我想做的是将事件日历中的月份和年份设置为Tempus Dominus datepicker。因此,主页上的日历很大,用户可以将月份从11月更改为12月,并在12月创建一个新事件。
一旦用户单击按钮以输入新事件,我想将日期选择器设置为该月。根据页面上的文档,我可以通过以下方式访问功能:
$('#datetimepicker').datetimepicker(FUNCTION)
要设置viewDate
,我需要将日期放在()
viewDate('11/21/2018')
中
放在一起(我尝试了几种不同的方式,看起来应该像这样:
$('#datetimepicker').datetimepicker(viewDate('11/21/2018'))
我已将viewDate
用单引号引起来,尝试过viewDate:
和其他一些例子,但没有运气。我目前将其连接到一个按钮上,并对日期进行硬编码以进行测试。
我没有理解或做错什么?
答案 0 :(得分:1)
我认为调用viewDate
函数的正确方法是:
$('#datetimepicker').datetimepicker('viewDate', <value>)
其中<value>
是一个字符串(与format
选项兼容),时刻或日期值。
无论如何,我担心Tempus Dominus datetimepicker的当前版本(5.1.2
)有错误/问题,并且viewDate
不会通知组件视图。
如果需要,可以使用date
代替viewDate
来更改组件的值。
这里有一个现场样本:
$('#datetimepicker1').datetimepicker();
$('#btnViewDate').click(function() {
$('#datetimepicker1').datetimepicker('viewDate', moment('11/21/2018', 'MM/DD/YYYY') );
});
$('#btnDate').click(function() {
$('#datetimepicker1').datetimepicker('date', moment('11/21/2018', 'MM/DD/YYYY') );
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-4@5.1.2/build/css/tempusdominus-bootstrap-4.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tempusdominus-bootstrap-4@5.1.2/build/js/tempusdominus-bootstrap-4.js"></script>
<div class="container">
<div class="row form-inline">
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1" />
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar"></i></div>
</div>
</div>
</div>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-primary" id="btnViewDate">
Set viewDate
</button>
</div>
<div class="col-sm-2">
<button type="button" class="btn btn-primary" id="btnDate">
Set date
</button>
</div>
</div>
</div>