Bootstrap datetimepicker开始日期不能大于结束日日期

要实现选择开始日期后,结束日期不能小于开始日期,并且选择结束日期后,开始日期不能大于结束日起的效果。如图
在这里插入图片描述
界面部分

 <div class="pull-left input-w">
                    <span class="des pull-left">日期:</span>
                    <div class="input-append date time-box pull-left" id="mStartTimeDiv">
                        <input type="text" class="" id="StartTime" style="display:block;float:left;" />
                        <span class="add-on" style="display:block;float:left;margin-top:5px;"><i class="icon-th"></i></span>
                    </div>
                    <span class="pull-left time-seprate">-</span>
                    <div class="input-append date time-box" id="mEndTimeDiv">
                        <input type="text" class="" id="EndTime" style="display:block;float:left;" />
                        <span class="add-on" style="display:block;float:left;margin-top:5px;"><i class="icon-th"></i></span>
                    </div>
                </div>

js部分

 $("#mStartTimeDiv").datetimepicker({
                language: 'zh-CN',
                format: "yyyy-mm-dd",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                endDate: $("#end").val()
            }).on('changeDate', function (ev) {
                var startTime = $("#StartTime").val();
                $("#mEndTimeDiv").datetimepicker("setStartDate", startTime.toString("yyyy-MM-dd"));
                queryFunc();
            });
            $("#mEndTimeDiv").datetimepicker({
                language: 'zh-CN',
                format: "yyyy-mm-dd",
                weekStart: 1,
                todayBtn: 1,
                autoclose: 1,
                todayHighlight: 1,
                startView: 2,
                minView: 2,
                startDate: $("#start").val()
            }).on('changeDate', function (ev) {
                var endTime = $("#EndTime").val();
                $("#mStartTimeDiv").datetimepicker("setEndDate", endTime.toString("yyyy-MM-dd"));
                queryFunc();
                });

引入js

<link href="~/datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="~/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="~/datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值