bootstrap-datepicker 设置开始时间小于结束

Dear 丶 2022-04-04 03:12 356阅读 0赞

页面自行引入 jquery.min.js / bootstrap.min.js / datepicker.css  / bootstrap-datepicker.js 等

页面结构：

<div class="span6">
                                            <div class="control-group">
                                                <div class="part-left">
                                                    <label class="control-label">启用时间：</label>
                                                    <div class="controls">
                                                        <div data-date="" id="startTimeDiv" class="input-append date datepicker">
                                                            <input name="startTime" id="startTime" value="" style="width: 150px;" data-date-format="yyyy-mm-dd" readonly="readonly" class="span11 form_datetime" type="text">
                                                            <span class="add-on"><i class="icon-th"></i></span>
                                                        </div>
                                                        -
                                                        <div data-date="" id="endTimeDiv" class="input-append date datepicker">
                                                            <input name="endTime" id="endTime" value="" style="width: 150px;" data-date-format="yyyy-mm-dd" readonly="readonly" class="span11 form_datetime"  type="text">
                                                            <span class="add-on"><i class="icon-th"></i></span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

js:

$("#startTimeDiv").datetimepicker({
            format: 'yyyy-mm-dd',
            minView:'month',
            language: 'zh-CN',
        }).on("click",function(){
            $("#startTimeDiv").datetimepicker("setEndDate",$("#endTime").val())
        });
        $("#endTimeDiv").datetimepicker({
            format: 'yyyy-mm-dd',
            minView:'month',
            language: 'zh-CN',
        }).on("click",function(){
            $("#endTimeDiv").datetimepicker("setStartDate",$("#startTime").val())
        });

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70]: /images/20220404/fae2532d25a941e49976235b89dbbafc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM1NjI2NTU5_size_16_color_FFFFFF_t_70 1]: /images/20220404/9631918bfd944524b3c1a5e7328d2099.png

发表评论取消回复

表情：

评论列表（有 0 条评论，356人围观）

还没有评论，来说两句吧...

相关阅读

相关 layDate 时间范围限制开始时间小于结束时间

var startDate=laydate.render({ elem: 'start', done:function(valu

本是古典何须时尚/ 2022年12月01日 15:50/ 0 赞/ 325 阅读

相关 ElementUI TimePicker固定时间范围，开始时间小于结束时间

一、概述根据项目需求： 1. 开始时间必须小于结束时间，不能等于结束时间。 2. 结束时间必须小于开始时间，不能相等。 2. 开始时间和结束时间，最小间隔30分钟

╰+攻爆jí腚メ/ 2022年10月07日 12:47/ 0 赞/ 467 阅读

相关 html开始时间和结束时间,JS中验证开始时间和结束时间

1、html html代码 \开始时间： \结束时间： //当保存时触发方法2、js js代码 function travelSave()\{ if(checkVa

太过爱你忘了你带给我的痛/ 2022年10月06日 09:55/ 0 赞/ 303 阅读

相关 angular js判断结束时间不能小于开始时间并且间隔不能超过30天

if ($scope.endTime != null && $scope.endTime != "" && $scope.startTime != null && $s

我就是我/ 2022年06月16日 04:43/ 0 赞/ 172 阅读

相关 js验证结束日期不能小于开始日期

首先，将日期格式转换，写一个date转换的方法： //data转换 function getDate(date){ var

分手后的思念是犯贱/ 2022年05月28日 05:20/ 0 赞/ 516 阅读

相关 JS判断开始时间小于结束时间案例

一.html 预计入住时间:<input class="pub_textAlign_right" placeholder="例如，${memoDate }" type

亦凉/ 2022年04月15日 06:21/ 0 赞/ 342 阅读

相关 bootstrap-datepicker 设置开始时间小于结束

页面自行引入 jquery.min.js / bootstrap.min.js / datepicker.css / bootstrap-datepicker.js 等

Dear 丶/ 2022年04月04日 03:12/ 0 赞/ 357 阅读

相关 bootstrap-datepicker关于开始时间小于结束时间且都大于当前时间的控制

//==========================HTML======================================= <div class="col

我不是女神ヾ/ 2022年03月26日 12:47/ 0 赞/ 406 阅读

相关 iview中日期选择器开始时间与结束时间联动,设置开始时间和结束时间约束

官网例子 <template> <Row> <Col span="12"> <DatePi

太过爱你忘了你带给我的痛/ 2022年02月17日 13:45/ 1 赞/ 938 阅读

相关 layui 结束日期不能小于开始日期的设置

> <form class="layui-form" action=""> > <label>交易记录查询</label> >

怼烎@/ 2021年11月29日 16:44/ 0 赞/ 862 阅读