Datetime picker form element not working in EPIServer??

London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

AI OnAI Off

Home / Forums / Developers (Apps and Integrations) Forum / Forms /

Datetime picker form element not working in EPIServer??

Kartheek

Vote:

Hi Guys,

i installed date time picker form element from "Install-Package EPiServer.Forms.Samples",but when i drag date time picker its working like textbox and am unable to choose date from it.can any one help me out of this.

Thanks,

Ramkee.G

#187110

Edited, Jan 12, 2018 6:19

Vote:

Are there any exceptions thrown in the console or the log?

#187201

Jan 15, 2018 22:49

Kartheek

Vote:

No Ankit,i didn't get any exception in logs but the date picker working like textbox instead of date time picker

Thanks,
Ramkee.G

#187239

Jan 16, 2018 17:30

Bob Bolt

Vote:

Moved to Forms fourm.

#187242

Edited, Jan 16, 2018 18:49

Dac Thach Nguyen

Vote:

Hi,

Are you using Forms in non-js mode? The Date time picker element require JS to process.

#187257

Jan 17, 2018 3:34

Marija Jemuovic

Vote:

Hi!

Do you have @Html.RequiredClientResources("Footer") and @Html.RequiredClientResources("Header") rendered in your layout/on the page?

BR,
Marija

#187263

Jan 17, 2018 9:50

Kartheek

Vote:

Hi Dac Thach Nguyen,

The JSMode is true in form.cinfig file,still the date picker works like a textbox.

Thanks,

Kartheek

#187472

Jan 24, 2018 6:41

Dac Thach Nguyen

Vote:

There are 2 things you should check

The Forms.config should contain workInNonJSMode="false" (changing need to restart site to make affected).
@Html.RequiredClientResources("Footer") and @Html.RequiredClientResources("Header") should be in your layout your page ase Marija said above

If the problem is still there, please give us a support case. We will look inside deeper.

#187482

Jan 24, 2018 11:47

Abhishek Tayade

Vote:

Have Same issue.

I have did all settings as suggested above but not working in console there is 500 erro showing resoource failed load of Episerver Sameple.

Please suggest.

Thanks

Abhishek

#188018

Feb 08, 2018 14:52

Kartheek

Vote:

Hi Guys,

Due to the override the styles and scripts the date picker not working.So before testing the date picker element remove added CSS and Scripts.

Thanks,

Kartheek.

#188019

Feb 08, 2018 15:14

Abhishek Tayade

Vote:

@Kartheek,

Are you talking about the site's layout JS and CSS? which may conflicts with EPi form client resources?

As I am new in EPi form , coudl you please explain it?

Thanks

Abhishek

#188027

Feb 09, 2018 8:10

Kartheek

Vote:

Yes Abhishek,Example:-You creat one form(e.g:Registration) with date picker element what you have created.Now drag that registration form in content area of page type(e.g:Home Page).Here don't call any CSS and JS script in view(.CSHTML) of home page.Than run the application and test it properly.The below code is sample of date picker

@model EpiserverSite5.Models.CustomElements.CustomDatePickerBlock2
@using System.Web.Mvc
@using EPiServer.Core
@using EPiServer.Web.Mvc.Html
@using EPiServer.Forms.Core
@using EPiServer.Forms.Core.Models
@using EPiServer.Forms.Helpers.Internal
@using EPiServer.Forms.Samples.Implementation.Elements
@using EPiServer.Forms.Samples.EditView

@{
Layout = null;
}

<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function () {
$('.form_textbox').datepicker({
dateFormat: 'mm/dd/yy',
changeMonth: true,
changeYear: true,
yearRange: "-80:+0",
})
});
</script>
</head>

<body>
<div class="Form__Element Form__CustomElement FormDateTime <%: Model.GetValidationCssClasses() %>" data-epiforms-element-name="<%: formElement.ElementName %>">
<div class="form-group row">
@Html.Label(@Model.Label, new { @class = "col-sm-2 control-label form_label" })
<div class="col-sm-3" id="calenderspan">
@Html.TextBox(Convert.ToString(@Model.FormElement.ElementName), null, "", new
{
name = @Model.FormElement.ElementName,
@value = @Model.GetDefaultValue(),
@Model.AttributesString,
@placeholder = @Model.PlaceHolder,
@class = "form-control form_textbox"
})
</div>
</div>
</div>
</body>
</html>

This Is my Home Page View

@model EpiserverSite5.Models.Pages.Home

@{
Layout = null;
}

<!DOCTYPE html>

<html>
<head>

</head>
<body>
<div>
@Html.PropertyFor(p=>p.Content)
</div>
</body>
</html>

#188028

Feb 09, 2018 8:28

Abhishek Tayade

Vote:

@Kartheek,

Thanks for reply! Tried as suggested, but not working. Same 500 error with plane html. Don't know what I am missing here.

Rgegards,

Abhishek

#188034

Feb 09, 2018 9:53

Kartheek

Vote:

Can you post your error???

#188040

Feb 09, 2018 10:10

Will

Vote:

I am having the same issue. It doesn't seem like it is Datepicker specific because with any form after downloading forms.samples I get this in the javascript console:

GetFormInitScript:7 Uncaught TypeError: Cannot read property 'Forms' of undefined
at initializeOnRenderingFormDescriptor (GetFormInitScript:7)
at GetFormInitScript:32.

Edit: I fixed the issue by adding the @Html.RequiredClientResources("Footer") and @Html.RequiredClientResources("Header") in the layout as mentioned above

#206462

Edited, Aug 21, 2019 18:13

Please login to post a reply