bootstrap --datetimepicker之时间段选择

最新推荐文章于 2024-08-08 07:45:19 发布

blog-lichuyan

最新推荐文章于 2024-08-08 07:45:19 发布

阅读量8.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_38643776/article/details/80851887

CSS 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用Bootstrap和Angular实现的日期选择器组件，该组件能够实现两个日期输入框之间的日期范围双向同步，并展示了如何通过JavaScript进行配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文件引入

HTML：

<label>
    <input type='text' class='form-control ' id='dateBegin' name='date_begin' placeholder="beginTime..." value='' ng-model="dateBegin">
</label>
---
<label>
    <input type='text' class='form-control ' id='dateEnd' name='date_begin' placeholder="endTime..." value='' ng-model="dateEnd">
</label>

JS：

function DatePicker(beginSelector,endSelector){
    $(beginSelector).datetimepicker(
        {
            language:  'zh-CN', // 语言选择中文
            autoclose: true,
            startView: 'month', // 进来是月
            minView: 'hour',// 可以看到小时
            minuteStep:1, //分钟间隔为1分
            format: 'yyyy-mm-dd hh:ii:ss',// 年月日时分秒
            clearBtn:false,
            todayBtn:true,
            endDate:new Date()
        }).on('changeDate', function(ev){
        if(ev.date){
            $(endSelector).datetimepicker('setStartDate', new Date(ev.date.valueOf()))
        }else{
            $(endSelector).datetimepicker('setStartDate',null);
        }
    })

    $(endSelector).datetimepicker(
        {
            language:  "zh-CN",
            autoclose: true,
            minView: "hour",
            minuteStep:1,
            startView:'month',
            format: "yyyy-mm-dd hh:ii:ss",
            clearBtn:true,
            todayBtn:false,
            endDate:new Date()
        }).on('changeDate', function(ev){
        if(ev.date){
            $(beginSelector).datetimepicker('setEndDate', new Date(ev.date.valueOf()))
        }else{
            $(beginSelector).datetimepicker('setEndDate',new Date());
        }

    })
}
DatePicker("#dateBegin","#dateEnd");

效果图