How to use jqueryui in your form for datepicker show?

Question

Hi Team

I have a checkbox, i want if i click to it must populate the datepicker, i need some help below. The issue when i unchecked it its not hidding. I want a user when the first check it must must show, then when its not unchecked it must hide. I also getting javascript error, date.datepicker is not a function. what library are necessary for this exception?

1. class="form-group row">
2. class="col-sm-6">
3. @Html.EditorFor(model => model.ModuleName, new { htmlAttributes = new { @class = "form-control", autofocus = "autofocus", placeholder = "ModuleName" } })

class="form-group row">

class="col-sm-2">

@Html.CheckBoxFor(model => model.Lockuntil, new { @class = "rb", data_toggle = "hide-element", data_target = "#datepicker" })

"date" type="text" />

"checkbox" id="chkDisable" onclick="disableDP()">

// javascrpit

Junaid Musla · Answer

I hope you have given the datepicker class to your control. Also you might need this to activate datapicker: $( '#TextValue' ).datepicker({ orientation: "bottom auto" , format: 'dd MM yyyy' , todayHighlight: true , minDate: 0 }).on( 'changeDate' , function (ev) { $( this ).datepicker( 'hide' ); }); Add this in your script section under document.ready() section.

Guest User · Answer

Hi Junaid please send full javascript code,thanks for datepicker one just send now.

Guest User · Answer

Hi Junaid, i cant seem to know exactly on my side the issue is here, i still getting no datepicker when checking. The code is exactly same no error when debugging, perhaps what could be the problem let me share my GUI with you here.

Junaid Musla · Answer

Hey, So basically, I prefer to use string datatype for Date when it comes to web development UI. Below is the property which i used in viewModel: public string TextValue { get ; set ; } Try this out.

Guest User · Answer

Hi Junaid Ok, the check and unchecking is working, but the Textbox is not displaying date, must change its data type from the model? as being Datetime? class = "form-group row" > class = "col-sm-2" > @Html.CheckBoxFor(model => model.Lockuntil, new { @ class = "rb" , id = "Lockuntil" }) class = "form-group row" > class = "col-sm-1" > @Html.TextBoxFor(model => model.DateSelect, new { @ class = "datepicker" , id = "TextValue" }) for datechecking--> "text/javascript" > $(document).ready(function () { $( '#Lockuntil' ).on( 'click' , onClickCheckBox); // bind an event with checkbox on click. On click function onClickCheckBox will be called. onClickCheckBox(); // to hide or show on page load.c }); function onClickCheckBox() // logic to show hide textbox based on checkbox's value. { if ($( '#Lockuntil' ). is ( ":checked" )) { $( "#TextValue" ).show(); } else { $( "#TextValue" ).hide(); } }

Junaid Musla · Answer

Hi , Try to write your script in the script section as below: @section ScriptSection{ for datechecking--> "text/javascript" > $(document).ready( function () { $( '#Lockuntil' ).on( 'click' , onClickCheckBox); // bind an event with checkbox on click. On click function onClickCheckBox will be called. onClickCheckBox(); // to hide or show on page load.c }); function onClickCheckBox() // logic to show hide textbox based on checkbox's value. { if ($( '#Lockuntil' ).is( ":checked" )) { $( "#TextValue" ).show(); } else { $( "#TextValue" ).hide(); } } } Now, here is the code of your Ui control: div class = "row" > div class = "form-group" > div class = "col-sm-2" > @Html.CheckBoxFor( model = > model.Lockuntil, new { @ class = "rb" , id = "Lockuntil" }) @Html.TextBoxFor( model = > model.TextValue, new { @ class = "datepicker" , id = "TextValue" }) div > div > div > I have tested this with model and it works fine. Datepicker is also visible. Screenshot :

Guest User · Answer

Hi Junaid The textbox is not showing the datepicker, this is my current logic. class = "form-group row" > class = "col-sm-2" > @Html.CheckBoxFor(model => model.Lockuntil, new { @ class = "rb" , data_toggle = "hide-element" , data_target = "#datepicker" , id = "checkBox" }) "text" onclick= "onClickCheckBox()" /> for datechecking--> "text/javascript" > $(document).ready(function () { $( '#checkBox' ).on( 'click' , onClickCheckBox); }); function onClickCheckBox() { if ($( this ). is ( ":checked" )) { $( "#datepicker" ).show(); } else { $( "#datepicker" ).hide(); } }

Junaid Musla · Answer

Try this out: $(document).ready( function () { $( '#controlId' ).on( 'click' , onClickCheckBox); } function onClickCheckBox() { if ($( this ).is( ":checked" )) { $( "#datepicker" ).show(); } else { $( "#datepicker" ).hide(); } }