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.