datetimepicker 编辑活动日期 dp.show

Question

我需要：

我试过下面的代码...

$('.date1').datetimepicker({
                    language: 'ru',
                    pickTime: false,
                    useCurrent: false
}).on('dp.show', function() {

});

今天：26.11.2017

打开日历时默认为空输入，活动日期为 26.11.2017 并且输入为空

如果输入为空，我想将日期更改为我的 (05.11.2017) 并显示输入的活动日期，如果输入不为空

Answer 1

这可以首先删除定义所选日期的active 类。

注意：由于您没有显示任何 HTML 结构，我猜您使用的是最小设置的结构

$('.date1').datetimepicker({
  language: 'ru',
  pickTime: false,
  useCurrent: false
}).on('dp.show', function() {
  if ($('.date1 :input').val().length === 0) {
    $(".active").removeClass('active');
    $('[data-day="05.11.2017"]').addClass('active');
  }
});

所以我们要做的是检查我们的输入是否为空，如果是则我们删除默认当前日期的活动日期并添加我们自己的 [data-day="05.11.2017"] 由您设置的格式或区域设置定义如果是默认英文，即[data-day="11/20/2017"]

在这里总结一个活生生的例子。

注意：您似乎使用的是旧版本的库，它不应该改变脚本的结果，我真的建议您更新它。

注2：小提琴使用最新版本仅供参考。

$('.date1').datetimepicker({
  locale: 'ru',
  useCurrent: false
}).on('dp.show', function() {
  if ($('.date1 :input').val().length === 0) {
    $(".active").removeClass('active');
    $('[data-day="05.11.2017"]').addClass('active');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://momentjs.com/downloads/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/25c11d79/build/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />

<br/>
<!--Space for the fiddle-->
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date date1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
             <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>