title: Populating a Bootstrap datepicker based on date a passed from controller not working
body: <p>Main problem solved however still can't get datepicker to disable. More info at bottom of post.</p>
  
  <p>I'm using MVC 5 and trying to use a <code>bootstrap datepicker</code> on one of my forms.</p>
  
  <p>My view works like this: I have a ID number field that when populated with a valid ID from my country (which takes the form of <code>yymmddxxxxxxx</code>), needs to disable the <code>datepicker</code> (or stop the datepicker from showing so that the user can't edit this field once a valid ID number has been entered), make the <code>datepicker</code> field (DateOfBirth) <code>readonly</code> and populate the field with the date of birth in format <code>yyyy-mm-dd.</code></p>
  
  <p>Currently, I use a ajax call back to my controller which calls a class which verifies the ID number and returns it as something like <code>yyyy/mm/dd (12:00:00)</code> and also passes back the gender gotten from the ID number. I then, in the controller, just grab the <code>yyyy/mm/dd</code>, as well as the gender and pass that back to my view as a string via <code>json</code>.</p>
  
  <p>All that works fine, however here is where my problem comes in. I now want to pass the DOB to the <code>datepicker</code> and I've tried a number of different ways, but I can't get it to format correctly as the datepicker gets today's date. I read that I should use <code>$.datepicker.parseDate()</code>, however I can't get that to work, either I get a typeerror <code>$.datepicker is not defined</code> or <code>parseDate is not a function</code> depending on how I try to fiddle with it.</p>
  
  <p>I'm not sure what other info I need to give besides above. Below is my code.</p>
  
  <p><strong>-View-</strong></p>
  
  <pre><code>            &lt;div class="form-group"&gt;
              &lt;label class="col-sm-4 control-label"&gt;Date of Birth:&lt;/label&gt;
              &lt;div class="col-sm-6"&gt;
                  @Html.TextBoxFor(model =&gt; model.DateOfBirth, "{0:yyyy-MM-dd}", new { @class = "form-control datepicker", @placeholder = "Select Date", @tabindex = "8"})
                  @Html.ValidationMessageFor(model =&gt; model.DateOfBirth)
              &lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>-Controller-</strong></p>
  
  <pre><code>    public ActionResult GetDOBID(string idNo)
      {
          SAIdNumber CheckNumber = new SAIdNumber(idNo);
  
          if (CheckNumber.IsValid == true)
          {
              string dob = CheckNumber.DateOfBirth.ToString();
              dob = dob.Substring(0, 10);
  
              return Json(new
              {
                  gender = CheckNumber.Gender,
                  DOB = dob
              }, JsonRequestBehavior.AllowGet);
          }
  
          return Json(new { gender = "fail", DOB = "fail" }, JsonRequestBehavior.AllowGet);
      }
  </code></pre>
  
  <p><strong>-Js-</strong></p>
  
  <pre><code>     $('.datepicker').datepicker({
              dateFormat: "yy-mm-dd"
  
          });  
  
    $('#IdNumber').on('focusout', function () {
          var idNum = $(this).val();
          $.ajax({
              type: 'GET',
              url: '@Url.Action("GetDOBID", "Client")',
              data: { idNo: idNum },
              cache: false,
              success: function (data) {
                  if (data.gender === "fail" || data.DOB === "fail") {
  
                          $('#Gender').removeAttr('readonly').val('');
                          $('#DateOfBirth').removeAttr('readonly').val('');
                          $("#DateOfBirth").datepicker('enable');
                  }
                  else {
                          $("#DateOfBirth").datepicker("disable");
                      var gend = 'F';
                      var date = new Date(data.DOB).toString('yy-mm-dd');
  
                      if (data.gender.toString() === '1') {
                          gend = 'M';
                      }
  
                      $('#Gender').val(gend);
                          $('#Gender').attr('readonly', true);
  
                      $('#DateOfBirth').datepicker('setValue', date);
                      $('#DateOfBirth').attr('readonly', true);
  
                  }
              }
          })
      });
  </code></pre>
  
  <p>I know that this line <code>var date = new Date(data.DOB).toString('yy-mm-dd');</code> is wrong at least because DOB is already passed as a string, however I don't think I'm supposed to use this line at all, it was done by a colleague before I got to it and according to him apparently used to work but didn't when I got to having to work on the screen.</p>
  
  <p>I also want to have this datepicker have today's date as the maximum date but I can't seem to get that to work either. I've tried initializing it with <code>maxDate: 0 or '0'</code> but that hasn't worked.</p>
  
  <p>When editing a user on this page, I also need the datepicker to be auto filled with the DOB from the database which is also yyyy-mm-dd however I assume once the major problem being experienced and formatting issue is solved won't be a problem anymore.</p>
  
  <p>Thanks in advance and let me know if I need to provide anymore information.</p>
  
  <p>EDIT:
  I've done a basic <a href="http://jsfiddle.net/VMzLG/35/" rel="nofollow" title="JSFiddle">JsFiddle</a> to show what it should do using jquery UI, however I'm using bootstrap datepicker and doing the exact same thing in my code doesn't work. I get a date like <code>08/27/19</code> filling the field. </p>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>Well I managed to fix the populating problem my self when I had a realisation while doing some testing that the bootsrap datepicker doesn't use <code>dateFormat:</code> as a parameter and that is should be <code>format:</code>.</p>
  
  <p>However I still can't get the datepicker to be disabled so that it doesn't show. It needs to not show so that a user can't edit the date in the readonly field by using the datepicker once.</p>
  
  <p>using <code>$('#DateOfBirth').datepicker('disable');</code> or <code>$('#DateOfBirth').datepicker('options: 'disabled');</code> doesn't work and I can't get a function on show using <code>preventdefault</code> to work either.</p>
  
  <p><strong>Edit 3:</strong></p>
  
  <p>Well, Even though no one replied I'm updating this thread with my answer. I managed to fix the problem kind of by disabling the dates of the week. So if anyone wants to do something similar they can have a look at my answer below, However I'd still appreciate any other suggestions with regards to a better way to disable the picker. It's only an issue with bootstrap datepicker. Anyway, See below.</p>