bootstrap 日期控件起始日期&结束日期相互约束

简介: bootstrap 日期控件起始日期&结束日期相互约束

引入控件

使用bootstrap的日期控件需要单独引入bootstrap-datetimepicker.min.css和bootstrap-datetimepicker.min.js

详情及文件可以通过下面地址下载:http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm


使用场景

单独引入一个日期控件可以参考上面提供的连接地址上的案例。此处介绍的是怎么使用两个日期控件,一个为开始日期,另外一个为结束日期,两个日期之间建立相互约束关系。即开始日期不能大于结束日期,结束日期不能小于开始日期。


使用方法

两个时间输入域如图:


image.png

<script type="text/javascript">
    $("#datetimeStart").datetimepicker({
        format: 'yyyy-mm-dd',
        minView:'month',
        language: 'zh-CN',
        autoclose:true,
        startDate:new Date()
    }).on("click",function(){
        $("#datetimeStart").datetimepicker("setEndDate",$("#datetimeEnd").val())
    });
    $("#datetimeEnd").datetimepicker({
        format: 'yyyy-mm-dd',
        minView:'month',
        language: 'zh-CN',
        autoclose:true,
        startDate:new Date()
    }).on("click",function(){
        $("#datetimeEnd").datetimepicker("setStartDate",$("#datetimeStart".val()))
    });
</script>
目录
相关文章
|
前端开发
bootstrap 插件 字体图标库 按钮库 日期插件
bootstrap 插件 字体图标库 按钮库 日期插件
|
前端开发 JavaScript
bootstrap-daterangepicker:最好用的日期范围选择组件
bootstrap-daterangepicker:最好用的日期范围选择组件
729 0
bootstrap-daterangepicker:最好用的日期范围选择组件
|
前端开发
|
前端开发 JavaScript
|
Web App开发 前端开发
【问题解决】BootStrap.css与layDate日期选择样式起冲突的解决办法
转载请注明出处:http://blog.csdn.net/qq_26525215 本文源自【大学之旅_谙忆的博客】  问题如图: 给大家看下正常的layDate年份选择图片: 一开始想到的,以为是自己没有将layer.css导入,或者layDate.css没有导入,出现的这个问题,结果发现只要导入layer.css,会自动导入layDate.css的,所以问题不在这里。
1411 0
|
前端开发 JavaScript
bootstrap-daterangepicker:最好用的日期范围选择组件
版权声明:欢迎转载,请注明沉默王二原创。 https://blog.csdn.net/qing_gee/article/details/65629720 嗯,在我还没有发现bootstrap-daterangepicker组件时, 在页面需要选择日期范围时,我是傻乎乎的创建两个日期组件。
1211 0
N..
|
8月前
|
开发框架 前端开发 UED
Bootstrap的CSS组件
Bootstrap的CSS组件
N..
75 0
|
前端开发 容器
|
前端开发 容器