链接日期选择器

Question

我是 bootstrap 的新手，正在尝试在

中使用链接的日期选择器

只应显示日期（不是时间）。
日期选择器和文本框中显示的默认选定日期应该是页面加载时的今天日期（在从日期选择器中选择任何日期之前，文本框中显示的默认日期应该是今天的日期）。
应在开始日期和结束日期中禁用未来日期。

我正在使用以下代码：

Html代码

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

脚本

jQuery(function () {
    jQuery('#startDate').datepicker({
        //format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true
    });
    jQuery('#endDate').datepicker({
        //format: 'mm-dd-yyyy',
        endDate: '+0d',
        autoclose: true,
        useCurrent: false
    });

    jQuery('#startDate').datetimepicker().datepicker("setDate",new Date());
    jQuery('#endDate').datetimepicker().datepicker("setDate",new Date());

  jQuery("#startDate").on("dp.change",function (e) {
        jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
    });
    jQuery("#endDate").on("dp.change",function (e) {
        jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
    });

});

使用jQuery('#startDate').datepicker().datepicker("setDate",new Date()); 我可以达到没有。 2.

但是，问题是未来日期禁用适用于日期选择器，开始日期结束日期选择适用于日期时间选择器。（使用 datepicker 和 datetimepicker 显示两个 datepikcer 控件，一个在文本框上，另一个在插件上）

如何结合使用日期选择器实现所有三点

Answer 1

我认为您混合了两个不同的库 eonasdan datetimepicker and bootstrap datepicker。

如果你想使用第一个库，那么你必须：

根据 momentjs 文档指定 format 选项
使用minDate and maxDate properties and methods
监听 dp.change 事件
使用useCurrent选项

这是一个工作示例：

jQuery('#startDate').datetimepicker({
  format: 'MM-DD-YYYY',
  maxDate: moment().endOf('day'),
  defaultDate: moment()
}).on("dp.change",function (e) {
  jQuery('#endDate').data("DateTimePicker").minDate(e.date);
});

jQuery('#endDate').datetimepicker({
  format: 'MM-DD-YYYY',
  maxDate: moment().endOf('day'),
  defaultDate: moment()
}).on("dp.change",function (e) {
   jQuery('#startDate').data("DateTimePicker").maxDate(e.date);
});

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

如果您想使用 bootstrap 日期选择器，则必须：

指定format选项小写
使用endDate option and setStartDate and setEndDate 函数
监听 changeDate 事件
使用update方法设置默认日期

这是一个工作示例：

jQuery('#startDate').datepicker({
  format: 'mm-dd-yyyy',
  endDate: '0d',
  autoclose: true
}).on("changeDate",function (e) {
  jQuery('#endDate').datepicker("setStartDate", e.date);
});
var d = new Date();
var now = new Date(d.getFullYear(), d.getMonth(), d.getDate());
$('#startDate').datepicker('update', now);

jQuery('#endDate').datepicker({
  format: 'mm-dd-yyyy',
  endDate: '0d',
  autoclose: true
}).on("changeDate",function (e) {
   jQuery('#startDate').datepicker("setEndDate", e.date);
});
$('#endDate').datepicker('update', now);

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker3.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>

<div class="container">
    <div class="col-sm-6" style="height:75px;">
       <div class='col-md-5'>
            <div class="form-group">
                <div>Start</div>

                <div class='input-group date' id='startDate'>
                    <input type='text' class="form-control" name="startDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <div class='col-md-5'>
            <div class="form-group">
                <div>End</div>

                <div class='input-group date' id='endDate'>
                    <input type='text' class="form-control" name="org_endDate" />
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

请注意，根据 docs，update 接受日期对象，但 $('#startDate').datepicker('update', new Date()); 对我不起作用（我不知道为什么），而以下几行正确设置默认日期：

var d = new Date();
var now = new Date(d.getFullYear(), d.getMonth(), d.getDate());
$('#startDate').datepicker('update', now);

链接日期选择器

Linked Datepicker

javascript

jquery

twitter-bootstrap

datepicker

bootstrap-datepicker