2017-05-25 105 views
0

我有一個引導日期選擇器,我調用一個函數來更改輸入和日曆框的日期,輸入更改框不是,當它丟失時將輸入更改集中到(錯誤的)日曆日期。我需要知道如何動態地更改這兩個日曆框和日曆輸入 //的Html爲什麼bootstarop日曆不會更改日曆框上的日期

<div id="positionHelper"> 
    <a id="anotherDatelink" style="float:left" class="pull-left" href="#" onclick="reset()">resetsate</a> 
    <div id="container" style="padding-left:120px"> 
     <div class="input-group date" data-provide="datepicker"> 
      <input type="text" class="form-control @semanticClass" 
      name="@Model.Name" id="@Model.Id" title="@Model.Name" value="@val"> 
      <div class="input-group-addon"> 
       <span class="glyphicon glyphicon-calendar"></span> 
      </div> 
     </div> 
    </div> 
</div> 

// JS

function reset() { 
       var today = getToday(); 
//works and changes the input line 


    $("#container").find("input").val(today); 


**nothing here worked.**    

// $('.datepicker-days').datepicker('setDate', null);-this class is from bootstrap 
      // $("#container").datepicker('setDate', null); 
      // $('#container').data('datepicker').setDate(null);             
      //$('#container').datepicker('setDate', new Date(2019, 11, 24)); 
      //$('#container').datepicker('update'); 
      // $('#container').val(''); 
      // $("#container").click(function(){ $(this).datepicker("setDate", today)}); 
      //$('container').data("DateTimePicker").date("08/08/2019"); 
      // $(".datepicker").datepicker("update", "08/08/2019"); 
      // $("#container").datepicker("setDate", new Date());   
      //   $("#container").datepicker() 
      // .on("changeDate", function (e) { 
     //  alert(e); 
      // }); 
     // 

//我加了圖片顯示的差異 - 日曆盒( 15/06/2017應該是 - > 25/05/2017)

enter image description here

回答

0

嘿這裏有一個例子,你如何能做到這 ^ h TML:

<div class="col-md-4"> 
    <div class="panel panel-default text-center"> 
     <div class="panel-heading"> 
      <h3 class="panel-title">Select time</h3> 
     </div> 
     <div class="input-group date" id="datetimestart">           
      <div class="input-group-addon"> 
       <i class="glyphicon glyphicon-calendar"></i> 
      </div> 
      <input class="form-control" name="datetimestart" type="text"> 
     </div> 
    </div> 
</div> 

的javascript:

$('#datetimestart').datetimepicker({ 
     format: 'YYYY-MM-DD HH:mm', 
     defaultDate: moment() 
}); 

調用這個片段在文件準備就緒功能(創建一個新的文件main.js)。

創建與所有需要的JavaScript庫的文件夾,並將它們包括在您的HTML,DOC的頭:

<script src="js/jquery.js"></script> 
<script src="js/bootstrap.min.js"></script> 
<script src="js/bootstrap-datetimepicker.min.js"></script> 
<script src="js/main.js"></script> 

的bootstrap.min.js是不是真的需要爲選擇器,但也用於在HTML文檔中。 你使用哪個datetimepicker?我向你推薦這個庫https://eonasdan.github.io/bootstrap-datetimepicker/