300字范文,内容丰富有趣,生活中的好帮手!
300字范文 > 日历插件:bootstrap-datetimepicker

日历插件:bootstrap-datetimepicker

时间:2019-12-26 23:21:36

相关推荐

日历插件:bootstrap-datetimepicker

1. 简述

前端插件使用步骤:

1)引入开发包:.js,.css

下载开发包,拷贝到项目webapp目录下

把开发包引入到jsp文件中:<link><script>

2)创建容器:<input type="text"><div>

3)当容器加载完成之后,对容器调用工具函数

注意:引入开发包时还需引入插件所依赖的技术(bootstrap,jquery)

2. 官方文档

附上官方文档链接,需要的人们传送门。

3. 选项(属性)

总体调用格式为:

jsp中:

<input type="text" id="demo" >

js中:

$("#demo").datetimepicker();

3.1 format — 格式

String类型

默认值: ‘mm/dd/yyyy’

这个是最重要最常用的属性之一了。控制显示格式就是固定值得个性化搭配。

比如,显示 -04-21 19:21

$("#demo").datetimepicker({format: 'yyyy-mm-dd hh:ii'});

又比如,你就是喜欢反人类的格式,那你可以这样:

$("#demo").datetimepicker({format: 'hh-yyyy-ii mm:dd'});

这个是扯淡的,就是个意思,你可以自己设计样式,但是里面的字母都代表不同属性:

3.2 weekStart — 一周从哪一天开始

Integer类型

默认值:0

0(星期日)到6(星期六)

例如:

$("#demo").datetimepicker({weekStart: 3});

效果:

3.3 startDate — 开始时间

Date类型

默认值:开始时间

之前的日期都不能选择,这个时间之后的时间才能选择。

咱们做一个常用的Demo,就是只能选现在之后的时间:

例如:

var date = new Date();$("#demo").datetimepicker({startDate: date });

1234

效果卡件上图中的灰色部分:

3.4 endDate— 结束时间

Date类型

默认值:结束时间

这个时间后面的不能再选择。

用法同上,不再赘述。

3.5 daysOfWeekDisabled — 一周的周几不能选

String, Array类型

默认值:”, []

0(星期日)到6(星期六)

可以有多个。

例如:

$("#demo").datetimepicker({daysOfWeekDisabled: [0,4,6]});

或者:

$("#demo").datetimepicker({daysOfWeekDisabled: '0,4,6'});

效果:

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

Boolean类型

默认值:false

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

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

Number, String类型

默认值:2, ‘month’

日期时间选择器打开之后首先显示的视图。

可接受的值:

3.8 minView — 最精确的时间

Number, String类型

默认值:0, ‘hour’

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

可接受的值:

例如:

$("#demo").datetimepicker({minView : 2});

上例中选完日后,不在出现下级时间选择。

3.9 maxView — 最高能展示的时间

Number, String类型

默认值:4, ‘decade’

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

用法同上,不在赘述。

3.10 todayBtn — 当天日期按钮

Boolean, “linked”类型

默认值:false’

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

例如:

$("#demo").datetimepicker({todayBtn : true});

效果:

3.11 todayHighlight — 当天日期高亮

Boolean类型

默认值:false

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

不再举例。

3.12 keyboardNavigation — 方向键改变日期

Boolean类型

默认值:false

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

不再举例。

3.13 language — 语言

String类型

默认值:’en’

中文:’zh-CN’

3.14 forceParse — 强制解析

Boolean类型

默认值:true

就是你输入的可能不正规,但是它胡强制尽量解析成你规定的格式(format)

3.15 minuteStep — 步进值

Number类型

默认值:5

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

3.16 pickerPosition — 选择框位置

String类型

默认值:’bottom-right’

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

可以试试看,他拿出位置会发生变化。

3.17 showMeridian — 是否显示上下午

Boolean类型

默认值:false

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

3.18 initialDate — 初始化日期时间

Date or String类型

默认值:new Date()

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

3.19 clearBtn—清空按钮

默认值:false

如果此值为true ,则在日期时间选择器组件的底部显示一个 “clear” 按钮用以清空文本框。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。