JSON日付からブートストラップ日付パーカーコントロールを解析する

Question

次のスニペットは、ブートストラップ日付ピッカーコントロールを示しています。私はJSON配列を持っていて、解析結果を表示しています。どのようにテキストボックスを入力して日付ピッカーとの互換性を保つことができますか？フィールドをクリックするとドロップダウンカレンダーで選択された日付が表示されます。

私は$.datepicker.parseDate('d/m/yy', new Date((obj[0].DOB.match(/\d+/)[0] * 1))); のように日付を解析しようとしたが、 おかげ

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

を動作しませんでしたが、このようにそれを実行します。 date_input.datepicker("update", this_date);は番目の日付を更新しますe datepicker。 Dateオブジェクトを受け入れるので、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>