Bootstrap中的datetimepicker(日期控件)用法-创新互联-成都快上网建站

Bootstrap中的datetimepicker(日期控件)用法-创新互联

在做项目的时候需要用到日期的控件,之前用的是H5的input type="date"标签,考虑到兼容性的问题换了时间控件
刚好看到了datetimepicker,学习了一下,也再次做个简单的笔记,进入正文
首先引入css 
    
    
        引入js,因为它支持多语言,所以我引入的是中文
    
    

    //年月日的时间配置(属性都有注释,常用的属性基本都在下面)
    $('.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 ? '';
        }
        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:源码部分的修改是我在遇到这个问题的时候
        从网上搜到的)

另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


网页名称:Bootstrap中的datetimepicker(日期控件)用法-创新互联
网站链接:http://kswjz.com/article/dcepdj.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流