bootstrap日期限制

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());
    });
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,281评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 177,239评论 25 709
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 14,816评论 4 61
  • 新学期开始了,感赏女儿依然延续好习惯,早上不用我催,按时起床。吃完早饭不慌不忙地上学。 昨天刚报名,下午就上了新课...
    勿忘我瑶阅读 1,486评论 1 3
  • 你说一生太长, 誓言才没走完自己的路! 我说一生太短, 我才不愿留在你身边看你不快乐!
    简村小吹阅读 1,648评论 1 6

友情链接更多精彩内容