当前位置:首页 > XunRuiCMS > 关键词 > 迅睿标签 > 正文

Bootstrap的datetimepicker插件用法总结(基于迅睿CMS)

迅睿CMS框架目前只要使用的是Bootstrap,在网站制作和功能二次开发过程中,经常需要用到datetimepicker时间控件,本文总结归纳了datetimepicker使用中的常见用法和参数设置

迅睿CMS框架目前只要使用的是Bootstrap,在网站制作和功能二次开发过程中,经常需要用到datetimepicker时间控件,本文总结归纳了datetimepicker使用中的常见用法和参数设置。芝麻通后续将逐步更新迅睿CMS常用的基础设置。

    <div class="input-group date field_date_inputtime"><input id="dr_inputtime" name="data[inputtime]" type="text"
            style="width:100%;" value="{$t.endtime}" class="form-control "><span class="input-group-btn">
            <button class="btn default date-set" type="button">
                <i class="fa fa-calendar"></i>
            </button>
        </span></div>
    <script>
        $(function () {
            $(".field_date_inputtime").datetimepicker({
                isRTL: false,
                format: "yyyy-mm-dd",
                showMeridian: false,
                autoclose: true,
                minView: 2,
                pickerPosition: "bottom-left",
                todayBtn: "linked",
                todayHighlight: true,
                keyboardNavigation: true,
                weekStart: 1,
                daysOfWeekDisabled: [0, 6],
                startView: 2,
                startDate: new Date()
            });
        });
    </script>

1.1 format — 格式

String类型

符号意义
p12小时制且小写(‘am’ or ‘pm’)
P12小时制且大写(‘AM’ or ‘PM’)
s秒,前面不补0
ss秒,前面补0
i分,前面不补0
ii分,前面补0
h时,24小时制,前面不补0
hh时,24小时制,前面补0
H时,12小时制,前面不补0
HH时,12小时制,前面补0
d日,前面不补0
dd日,前面补0
m月,数字表示,前面不补0 如:4
mm月,数字表示,前面补0 如:04
M月,缩写表示,前面补0 如:Apr
MM月,全称表示,前面补0 如:April
yy年,后两位 如:22
yyyy年,全部 如:2022

1.2 weekStart — 一周从哪一天开始

Integer类型

默认值:0(周日)

0(周日)到6(周六)

1.3 startDate — 开始时间

Date类型

默认值:开始时间

这之前的时间不能选择

1.4 endDate— 结束时间

Date类型

默认值:结束时间

这之后的时间不能选择

1.5 daysOfWeekDisabled — 一周的周几不能选

String, Array类型

写法:'0,6'或者[0,6](周六、周日不能选择)

1.6 autoclose — 选完时间后是否自动关闭

Boolean类型

默认值:false

当选择一个日期之后是否立即关闭此日期时间选择器。

1.7 startView — 选完时间首先显示的视图

Number, String类型

默认值:2, ‘month’

点击选择器打开后首先显示的视图级别。

意义
0从小时视图开始,选分
1从天视图开始,选小时
2从月视图开始,选天
3从年视图开始,选月
4从十年视图开始,选年

1.8 minView — 最终精确时间

Number, String类型

默认值:0, ‘hour’

日期时间选择器所能够提供的精确的时间选择视图。

意义
0从小时视图开始,选分
1从天视图开始,选小时
2从月视图开始,选天
3从年视图开始,选月
4从十年视图开始,选年

1.9 maxView — 最高能展示的时间

Number, String类型

默认值:4, ‘decade’

日期时间选择器最高能展示的选择范围视图。

用法同上。

1.10 todayBtn — 当天日期按钮

Boolean, “linked”类型

默认值:false’

如果此值为true 或 “linked”,则在日期时间选择器组件的底部显示一个 “Today” 按钮用以选择当前日期。如果是true的话,”Today” 按钮仅仅将视图转到当天的日期,如果是”linked”,当天日期将会被选中。

1.11 todayHighlight — 当天日期高亮

Boolean类型

默认值:false

如果为true, 高亮当前日期。

不再举例。

1.12 keyboardNavigation — 方向键改变日期

Boolean类型

默认值:false

是否允许通过方向键改变日期。

1.13 language — 语言

String类型

默认值:’en’

中文:’zh-CN’

1.14 forceParse — 强制解析

Boolean类型

默认值:true

就是你输入的可能不正规,但是它会强制尽量解析成你规定的格式&#xff08;format&#xff09;

1.15 minuteStep — 步进值

Number类型

默认值:5

此数值被当做步进值用于构建小时视图。就是最小的视图是每5分钟可选一次。是以分钟为单位的。

1.16 pickerPosition — 选择框位置

String类型

默认值:’bottom-right’

还支持 : ‘bottom-left’,’top-right’,’top-left’

1.17 showMeridian — 是否显示上下午

Boolean类型

默认值:false

在日期和小时选择界面,出现上下午的选项

1.18 initialDate — 初始化日期时间

Date or String类型

默认值:new Date()

在打开时默认选当时的时间,显示在View中。

本文属原创,转载请注明原文:https://zhimatong.com/jiaocheng/862.html

为保证教程的实用性及扩大知识面覆盖,如果您有相似问题而未解决,可联系在线客服免费技术支持。

随手消灭0赞