欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JQuery的datetimepicker插件,限制开始时间小于等于结束时间的方法

程序员文章站 2022-03-02 08:23:11
web的时间js控件,在管理性的项目中频繁用到,总结了一些用到的知识,分享出来,供参考学习: 1、首先引用资源包; bootstrap基础资源包:...

web的时间js控件,在管理性的项目中频繁用到,总结了一些用到的知识,分享出来,供参考学习:


1、首先引用资源包;

bootstrap基础资源包: bootstrap.min.css 、bootstrap-responsive.min.css、style.css、jquery-1.10.1.min.js、

datetimepicker资源包: bootstrap-datetimepicker.min.css、bootstrap-datetimepicker.min.js、bootstrap-datetimepicker.zh-CN.js

2、html代码:




  <li>
                    <span class="search-title">时间:</span>
                    <input type="text" id="BeginTime" placeholder="开始时间" class="search-date datetimepicker" data-date-format="yyyy-mm-dd" readonly="readonly">
                    <b>--</b>
                    <input type="text" id="EndTime" placeholder="结束时间" class="search-date datetimepicker" data-date-format="yyyy-mm-dd" readonly="readonly">
                </li>
      3、js代码:
<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>