美文网首页
bootstrap日期限制

bootstrap日期限制

作者: NarCraven | 来源:发表于2017-09-12 14:45 被阅读0次

1.效果需求前一个input输入的日期不能大于后一个input输入的日期
页面效果:


日期约束.png

2.html

//引入文件datetimepick插件  
<link rel="stylesheet" href="/datatimepick/bootstrap-datetimepicker.min.css">
<script src="/Public/Static/datatimepick/bootstrap-datetimepicker.min.js"></script>
<script src="/Public/Static/datatimepick/bootstrap-datetimepicker.zh-CN.js"></script>

//页面
<div class="formDiv form-group">
    <label class="col-sm-2 control-label" >*&nbsp;&nbsp;活动时间</label>
    <div class="col-sm-7" >
        <div class=" date startD col-sm-5" data-date-format="yyyy-mm-dd" style="padding-left: 0;padding-right: 0;">
            <input placeholder="请选择开始时间"  name="SDate"  class="form-control" id="SDate" size="18" type="text" value="" >
            <span class="close">
                ![](/Public/Home/images/close.png)
            </span>
        </div>
        <div class="fgf col-sm-2">——</div>
        <div class=" date endD  col-sm-5" data-date-format="yyyy-mm-dd hh:mm" style="padding-left: 0;padding-right: 0;">
            <input placeholder="请选择结束时间" class="form-control" id="EDate" size="18" type="text" value="" >
            <span class="close">
                ![](/Public/Home/images/close.png)
            </span>
        </div>
    </div>
</div>

3.js

//初始化日期控件
 $("#SDate").datetimepicker({
            forceParse: true,  //强制解析
            language: 'zh-CN',
            format: 'yyyy-mm-dd hh:ii',    //日期格式
            autoclose: true,   //选完时间后自动关闭
            todayBtn: false,
            startView: 2,  //日期选择器打开首先显示的视图0-时,1-天,2-月,3-年,4-十年
            minView: 0,  //最精确的时间:0-时,1-天,2-月,3-年,4-十年
            maxView: 'decade',   //最高能展示的时间
            bootcssVer:3
      }).on("click", function (ev) {
           $("#SDate").datetimepicker("setEndDate", $("#EDate").val());
      });
       $("#EDate").datetimepicker({
            forceParse: true,
            language: 'zh-CN',
            format: 'yyyy-mm-dd hh:ii ',
            autoclose: true,
            todayBtn: false,
            startView: 2,
            minView: 0,
            maxView: 'decade',
            bootcssVer:3
       }).on("click", function (ev) {
           $("#EDate").datetimepicker("setStartDate", $("#SDate").val());
    });

相关文章

网友评论

      本文标题:bootstrap日期限制

      本文链接:https://www.haomeiwen.com/subject/lcycsxtx.html