Datetime picker form element not working in EPIServer??

November Happy Hour will be moved to Thursday December 5th.

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