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

Dear 丶 2022-04-04 03:12 435阅读 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 条评论，435人围观）

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

相关阅读

相关用jquery写一个时间选择器要求开始时间小于结束时间

jQuery 是一个流行的 JavaScript 库，可以用来简化 HTML DOM 的操作。如果你想用 jQuery 写一个时间选择器，可以这样做： 1. 在 HTML

约定不等于承诺〃/ 2024年03月25日 08:29/ 0 赞/ 86 阅读

相关 Element el-time-picker开始时间不小于结束时间

时间控件与日期控件不同，其是通过selectableRange来控制时间选择范围 format为时分，但selectableRange只能解析时分秒，所以在变量之后拼接’

野性酷女/ 2023年07月23日 15:56/ 0 赞/ 21 阅读

相关 element 校验开始时间小于结束时间,结束时间大于开始时间

<el-col :span="12"> <el-form-item label="期望发货时间：" prop="orderE

男娘i/ 2023年03月12日 14:29/ 0 赞/ 84 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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