bootstrap3 日期控件怎么弹出来

 我来答
就烦条0o
2016-07-28 · 知道合伙人软件行家
就烦条0o
知道合伙人软件行家
采纳数:33315 获赞数:46492
从事多年系统运维,喜欢编写各种小程序和脚本。

向TA提问 私信TA
展开全部
1.首先,我们将这款日期控件下载下来。百度bootstrap日期控件即可。

下载的网页界面如下图:

2.将下载好的日期控件的css、js引入自己的文件中。

在这里需要引入的文件有:

bootstrap.min.css(含有bootstrap 所有css)

bootstrap-datetimepicker.min.css(重要,这就是日期控件所需的样式表)

jquery-1.8.3.min.js(其他版本的jquery也可以)

bootstrap.min.js(含有bootstrap 所有js)

bootstrap-datetimepicker.js(重要,这就是日期控件所需的js)

locales/bootstrap-datetimepicker.fr.js(重要,这里是日期控件初始值)

bootstrap-datetimepicker.zh-CN.js(时间控件汉化的js)

3.将所有文件引入完成后,就开始设置日期控件吧。

这步可以参照时间控件包中的实例代码来写。
实例文件代码路径如下:

该实例中介绍了三种表现形式的时间控件。

这是第一种样式。当然,你可以只要input就可以了。

第二种样式,带有重置按钮(用于清空输入框)的组件模版:

i的作用就是两个小图标,若不要可以删去。

最简洁的样式,只有input,点击弹出选择器:

当然,只有这些是无法弹出日期选择器的,还需要js来激活。

4.最重要的一步,调用这个js来激活日期选择器!

$('你的input的class或id').datetimepicker({

//一堆参数

});

将这个写在你的页面内,至于参数,一会再介绍。这样就可以激活你的日期选择器了,点击input便可以弹出选择器。

5.日期选择器的参数设置:

format

weekStart

startDate

endDate

daysOfWeekDisabled

autoclose

startView

minView

maxView

todayBtn

todayHighlight

keyboardNavigation

language

forceParse

minuteStep

pickerPosition

viewSelect

showMeridian

initialDate

这些属性不用全部设置,但有些是必须的,比如format。

这里是我所使用的一款日期选择器的初始化设置:

$('.date').datetimepicker({

minView:
'month',
//设置时间选择为年月日 去掉时分秒选择

format:‘yyyy-mm-dd’,

weekStart: 1,

todayBtn: 1,

autoclose: 1,

todayHighlight: 1,

startView: 2,

forceParse: 0,

showMeridian: 1,

language:
'zh-CN'
//设置时间控件为中文

});

bootstrap日期选择器的属性非常多,这也给了用户较大的选择性,快去设置你自己的DIY日期选择器吧!
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式