Bootstrap datetimepicker 未在日历中设置日期

问题描述

我正在创建一个引导日期时间选择器控件:

<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>


<div class="row" id="rowSelectAppointmentDate">
   <div class="col-md-5" style="min-height:300px">
        <input type="text" class="form-control input-sm" style="width: 100%;font-weight:800;font-size:22px;text-align:center" id="txtAppointmentDate" value="" />
        <span style="display: none" id="appointmentDate"></span>            
    </div>       
</div>

这是我的初始化代码

function ShowDatePicker(defaultDate) {
    var date = new Date();        
    if (defaultDate==null)
     defaultDate = new Date();      
    date.setDate(date.getDate() - 1);
    $('*[id=txtAppointmentDate]').datetimepicker({
        useCurrent: false,format: 'YYYY-MM-DD',toolbarPlacement: 'top',showClose: false,keepOpen: true,debug: true,minDate: date,defaultDate: defaultDate,inline:true
    });
}

这会正确显示选择了当前日期的日期时间选择器。我更改日期的那一刻,它会在输入中显示该日期以及它显示为选定的日期。所以到这里一切正常。

现在我的要求是我必须在更改事件的单选按钮上更改日期时间选择器。所以这就是我到目前为止所写的:

function OnRadioChange() {        

    $("#txtAppointmentDate").datepicker('destroy');

    ShowDatePicker();

    SetDate(new Date());
}

function SetDate(date) {
    var field = document.querySelector('#txtAppointmentDate');
   if (date==null)
     date = new Date();
    // Set the date
    field.value = date.getFullYear().toString() + '-' + (date.getMonth() + 1).toString().padStart(2,0) +
        '-' + date.getDate().toString().padStart(2,0);
}

现在这会在输入框中显示当前日期,但不会在下面打开的日历中设置。因此,例如,如果今天是 1 月 7 日并且我将日期更改为 1 月 25 日,那么我更改了单选选项,它在输入中显示 1 月 7 日,但日历仍然显示选定的 1 月 25 日。 请告知还需要设置什么才能将日历日显示为当前日期。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)