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!

Datetime picker form element not working in EPIServer??

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
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
Vote:
 

Moved to Forms fourm.

#187242
Edited, Jan 16, 2018 18:49
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
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
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
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
Vote:
 

Hi 

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
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
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
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
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
Vote:
 

Can you post your error???

#188040
Feb 09, 2018 10:10
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
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.