Question

我有一个bootstrap-date选择器，我调用一个函数来改变输入和日历框的日期，输入改变框是不是当它失去焦点时输入变为（错误）日历日期。我需要知道如何动态更改日历框和日历输入 // HTML

<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);
          // });
        //

//我添加了一张图片来显示差异 - 日历框（2017年6月15日应该是 - ＆gt; 25/05/2017）

Answer 1

嘿，这里是一个如何做到这一点的例子 HTML：

<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>

picker上并不真正需要bootstrap.min.js，但也在HTML-doc中使用。你使用哪个datetimepicker？我推荐你这个图书馆https://eonasdan.github.io/bootstrap-datetimepicker/

为什么bootstarop日历不会在日历框中更改日期

1 个答案: