Parsing JSON Date to Bootstrap datepicker control

Question

the following snippets shows a bootstrap datepicker control. I have a JSON array and I m showing its parsed result, how can I fitch it to input textbox and keep its compatibility with the datepicker, meaning when you click on the field, you will see the date selected in the dropped down calendar

I tried parsing date like $.datepicker.parseDate('d/m/yy', new Date((obj[0].DOB.match(/\d+/)[0] * 1))); but didn't work Thanks

 d='[{"DOB":"\/Date(1512460800000)\/"}]'
 var obj = $.parseJSON(d)
 console.log(new Date((obj[0].DOB.match(/\d+/)[0] * 1)))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">

    <!-- Form code begins -->
    <form method="post">
      <div class="form-group"> <!-- Date input -->
        <label class="control-label" for="date">Date</label>
        <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
      </div>
      <div class="form-group"> <!-- Submit button -->
        <button class="btn btn-primary " name="submit" type="submit">Submit</button>
      </div>
     </form>
     <!-- Form code ends --> 

    </div>
  </div>    
 </div>
</div>
<script>
    $(document).ready(function(){
      var date_input=$('input[name="date"]'); //our date input has the name "date"
      var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
      var options={
        format: 'mm/dd/yyyy',
        container: container,
        todayHighlight: true,
        autoclose: true,
      };
      date_input.datepicker(options);
    })
</script>

Answer 1

Do it like this: date_input.datepicker("update", this_date); will update a date in the datepicker. Since it accepts the Date object, it will keep the date compatible to the datepicker.

$(document).ready(function() {
  d = '[{"DOB":"\/Date(1512460800000)\/"}]'
  var obj = $.parseJSON(d)
  var this_date = new Date((obj[0].DOB.match(/\d+/)[0] * 1))
  console.log(new Date((obj[0].DOB.match(/\d+/)[0] * 1)))


  var date_input = $('input[name="date"]'); //our date input has the name "date"
  var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
  var options = {
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
  };
  date_input.datepicker(options);
  date_input.datepicker("update", this_date);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

<!-- Isolated Version of Bootstrap, not needed if your site already uses Bootstrap -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />

<!-- Bootstrap Date-Picker Plugin -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />

<div class="bootstrap-iso">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-6 col-sm-6 col-xs-12">

        <!-- Form code begins -->
        <form method="post">
          <div class="form-group">
            <!-- Date input -->
            <label class="control-label" for="date">Date</label>
            <input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text" />
          </div>
          <div class="form-group">
            <!-- Submit button -->
            <button class="btn btn-primary " name="submit" type="submit">Submit</button>
          </div>
        </form>
        <!-- Form code ends -->

      </div>
    </div>
  </div>
</div>