title: How to use datepicker in your form using jqueryui?
body: <p>I need some help to use my checkbox, where a user will use checkbox in order for the datepicker or calendar be displayed immediately when checkbox is used to lock- up until. Need some help on the jquery side in order my logic be functional. When a user unchecked after locking using calendor or datepicker, this must be hidden. I am also getting datepicker is not a function....?</p>
  <pre><code>&lt;div class=&quot;form-group row&quot;&gt;
              &lt;div class=&quot;col-sm-2&quot;&gt;
                  @Html.CheckBoxFor(model =&gt; model.Lockuntil, new { @class = &quot;rb&quot;, id = &quot;Lockuntil&quot; })
  
              &lt;/div&gt;
              &lt;div class=&quot;form-group row&quot;&gt;
                  &lt;div class=&quot;col-sm-1&quot;&gt;
                      @Html.TextBoxFor(model =&gt; model.DateSelect, new { @class = &quot;datepicker&quot;, id = &quot;TextValue&quot; })
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!--Jquery for datechecking--&gt;
          &lt;script type=&quot;text/javascript&quot;&gt;
              $(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(&quot;:checked&quot;)) {
                      $(&quot;#TextValue&quot;).show();
                  }
                  else {
                      $(&quot;#TextValue&quot;).hide();
                  }
              }
          &lt;/script&gt;
  </code></pre>