Bootstrap中的datetimepicker(日期控件)用法

在做项目的时候需要用到日期的控件,之前用的是H5的input type="date"标签,考虑到兼容性的问题换了时间控件
刚好看到了datetimepicker,学习了一下,也再次做个简单的笔记,进入正文
首先引入css 
    <link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">
        引入js,因为它支持多语言,所以我引入的是中文
    <script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>

    //年月日的时间配置(属性都有注释,常用的属性基本都在下面)
    $('.form_datetime').datetimepicker({
                language:  'zh-CN', //语言类型
                weekStart: 1,//一周从哪一天开始
                todayBtn:1, // 当天日期按钮``
                autoclose: 1,//选完时间后是否自动关闭
                todayHighlight: 1,//当天日期高亮
                startView: 2,
                forceParse: 0,
                showMeridian: 1,
                maxView:4, //最高显示到年份
                minView:2, //最低显示到日
                startDate: getCurrentDate(), //这个时间之前的不能再选择
                endDate:getCurrentDate(), //这个时间后面的不能再选择
                initialDate: new Date(),//初始化当前日期
                format: 'yyyy-mm-dd',//时间格式
                pickerPosition:'bottom-right'//选择框位置
    });
    // 年月日 时分秒
        $('.form_date').datetimepicker({
                    language: 'zh-CN',
                    weekStart: 1,
                    todayBtn:  1,
                    autoclose: 1,
                    todayHighlight: 1,
                    startView: 2,
                    minuteStep:1,//分钟间隔为1
                    maxView:4, //最高显示到年份
                    minView:0, //最低显示到日
                    forceParse: 0,
                    format: 'yyyy-mm-dd hh:ii:ss'
            });
```
//时分秒
        $('.form_time').datetimepicker({
                        language:  'zh-CN',
                        weekStart: 1,
                        todayBtn:  1,
                        autoclose: 1,
                        todayHighlight: 1,
                        startView: 1,
                        minView: 0,
                        maxView: 1,
                        forceParse: 0,
                        minuteStep:1,//分钟间隔为1
                        showMeridian:false,//是否显示上下午
                        format:'hh:ii:ss'
            });
```
不过使用上面的配置还是会出现一些问题,在使用时分秒的时候你会发现,并没有秒的选择(没有出现秒的下拉框),
那你就需要修改它的源码了,修改源码如下:

Bootstrap中的datetimepicker(日期控件)用法

添加下拉框,找到this.picker.find('.datetimepicker-minutes td').html(html.join(''))这句
//添加datetimepicker下拉框,如果配置要选择秒,否则不添加
        var addSec = /,s{1,2},/.test(',' + this.format.parts.join(',') + ','), sSec = addSec ? '<select style="width:100%">' : '';
        this.addSec = addSec;
        if (addSec) {
                var orgSec = this.viewDate.getSeconds();
                for (var _i = 0; _i < 60; _i++) sSec += '<option value="' + _i + '"' + (_i == orgSec ? ' selected' : '') + '>' + (_i < 10 ? '0' : '') + _i + '</option>';
                sSec += '</select>';
        }
        this.picker.find('.datetimepicker-minutes td').html(html.join('') + sSec);

    //修改容器点击事件。增加下面的红色语句,防止选择select秒钟时日期弹出框隐藏
        click: function (e) {
            e.stopPropagation();
            e.preventDefault();

//防止选择秒钟选择器日期控件层隐藏
    if (e.target.tagName == 'SELECT' || e.target.tagName == 'OPTION') return;

    然后继续往下找到case 'span'语句,修改里面秒钟获取方式,如下所示:
    case 'span':
    if (!target.is('.disabled')) {
        var year = this.viewDate.getUTCFullYear(),
        month = this.viewDate.getUTCMonth(),
        day = this.viewDate.getUTCDate(),
        hours = this.viewDate.getUTCHours(),
        minutes = this.viewDate.getUTCMinutes(),

     //修改datetimepicker秒钟获取方式
        seconds = this.addSec ? this.picker.find('select').val() : this.viewDate.getUTCSeconds();
        到此完成bootstrap datetimepicker添加秒钟选择下拉框功能

        到此为止,也就实现了datetimepicker的基本用法(ps:源码部分的修改是我在遇到这个问题的时候
        从网上搜到的)

转载于:https://blog.51cto.com/12885303/2135545

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: bootstrap-datetimepicker是一个可定制的日期选择器插件,可以帮助我们在网页添加日期选择功能。它使用了Bootstrap风格的样式,并提供了丰富的选项和配置来满足不同的需求。 通过bootstrap-datetimepicker,我们可以轻松地自定义日期样式。首先,我们可以选择不同的主题来改变整体的样式,例如light主题和dark主题。其次,我们可以设置日期选择框的大小和位置,以适应不同的布局。还可以设置日期的格式,包括年月日、时分秒等不同精度。此外,我们还可以设置各个部分的颜色和字体样式,以满足个性化的需求。 除了基本的样式设置外,bootstrap-datetimepicker还提供了其他一些高级功能来增强用户体验。例如,我们可以设置日期范围限制,禁止选择过去的日期或将来的日期。还可以设置起始日期和结束日期,限制用户只能在指定的时间段选择日期。此外,我们可以使用快速选择按钮,让用户可以一键选择最近几天、最近几个月或最近几年的日期。 总之,bootstrap-datetimepicker通过提供丰富的选项和配置,可以帮助我们设计出符合我们需求的日期样式。无论是简单的日期选择功能还是复杂的日期范围限制,bootstrap-datetimepicker都能满足我们的需求,并且具有良好的用户体验。 ### 回答2: bootstrap-datetimepicker是一个基于Bootstrap框架的日期选择器插件。它提供了丰富的日期样式供用户选择。 首先,bootstrap-datetimepicker支持多种日期格式。你可以通过配置选项来指定日期的显示格式,例如:"yyyy-mm-dd"表示日期以年-月-日的形式显示,"dd/mm/yyyy"则表示日期以日/月/年的形式显示。 其次,该插件还支持时间的选择。你可以选择是否显示时间,以及时间的显示格式。比如,你可以使用"hh:ii"来显示小时和分钟,或者使用"hh:ii:ss"来显示小时、分钟和秒。 此外,bootstrap-datetimepicker还具有一些其他的日期样式设置。其包括: 1. 可以设置日期的起始和结束范围,限定用户只能选择某个范围内的日期。 2. 可以设置日期的禁用状态,禁止用户选择某些特定日期。 3. 可以设置日期的选择模式,包括单个日期选择、多个日期选择以及范围选择等。 最后,bootstrap-datetimepicker还提供了丰富的自定义选项,你可以根据自己的需求来定义日期的样式。比如,你可以修改日期选择器的主题颜色、字体样式、边框样式等。 总的来说,bootstrap-datetimepicker提供了许多灵活的日期样式设置,可以满足不同用户的需求,使日期选择更加方便、美观。 ### 回答3: bootstrap-datetimepicker是一个基于Bootstrap框架的日期选择插件,可以方便地在网页添加日期选择功能。 在使用bootstrap-datetimepicker时,可以通过设置不同的样式来定制日期选择器的外观。以下是一些常用的日期样式说明: 1. 格式:可以通过设置format属性来定义日期的显示格式。例如,format: 'yyyy-mm-dd'将日期以年-月-日的形式显示。 2. 语言:可以通过设置language属性来指定日期选择器的语言。例如,language: 'zh-CN'将日期选择器的语言设置为简体文。 3. 星期显示:可以通过设置weekStart属性来定义星期的起始日。例如,weekStart: 1将星期的起始日设置为周一。 4. 默认日期:可以通过设置initialDate属性来指定日期选择器的默认日期。例如,initialDate: '2022-01-01'将默认日期设置为2022年1月1日。 5. 最小日期和最大日期:可以通过设置minDate和maxDate属性来限制可选择的日期范围。例如,minDate: '2022-01-01'和maxDate: '2022-12-31'将日期范围限制在2022年内。 6. 显示周数:可以通过设置calendarWeeks属性来决定是否显示周数。例如,calendarWeeks: true将显示每周的周数。 以上仅为一些常用的日期样式设置,bootstrap-datetimepicker还有许多其他样式设置参数,通过灵活使用这些参数,可以根据需要定制出符合自己网页风格的日期选择器。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值