bootstrap日期和时间选择器怎么用

html-css011

bootstrap日期和时间选择器怎么用,第1张

bootstrap为我们提供了一款十分实用的日期控件,但相对于初学者来说,这款日期控件的用法要比按钮等css样式难上许多。这里小编就为大家介绍一下这款功能强大的日期控件的用法。

工具/原料

bootstrap

Dreamweaver

方法/步骤

首先,我们将这款日期控件下载下来。百度bootstrap日期控件即可。

将下载好的日期控件的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(重要,这里是日期控件初始值)

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

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

<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">

<input class="span2" size="16" type="text" value="12-02-2012">

<span class="add-on"><i class="icon-th"></i></span>

</div>

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

<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">

<input class="span2" size="16" type="text" value="12-02-2012">

<span class="add-on"><i class="icon-remove"></i></span>

<span class="add-on"><i class="icon-th"></i></span>

</div>

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

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

<input class="span2" size="16" type="text" value="12-02-2012">

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

这里是最重要的一步,js激活日期选择器!

<script type="text/javascript">

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

//一堆参数

})

</script>

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

日期选择器的参数设置:

format

weekStart

startDate

endDate

daysOfWeekDisabled

autoclose

startView

minView

maxView

todayBtn

todayHighlight

keyboardNavigation

language

forceParse

minuteStep

pickerPosition

viewSelect

showMeridian

initialDate

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

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

$('.date').datetimepicker({

format:yyyy-mm-dd,

weekStart: 1,

todayBtn: 1,

autoclose: 1,

todayHighlight: 1,

startView: 2,

forceParse: 0,

showMeridian: 1

})

bootstrap日期选择器的属性非常多,这也给了用户较大的选择性,快去设置你自己的DIY日期选择器吧!

在固定日期下选择其它单位的前端,可以采用以下四种方法:

1. 使用JavaScript的“Date”对象,为前端应用程序创建一个简单的日期选择控件;

2. 使用第三方JavaScript框架和库,来实现日期选择器的简单、可配置化的控件;

3. 集成一些GUI控件,来实现更细节、更丰富的日期选择功能;

4. 使用CSS3中的日期输入字段,来更便捷地输入日期。

答:css失效的原因如下

一、div 标签未关闭

这是版面设计失效的最常见原因之一。当我们了解到这是多少精致的版块设计失效的罪魁祸首时,总会大吃一惊。开启的div标签是最普遍的版块设计失误之一,也是最难诊断的失误之一。验证程序有时会指向错误的开启div标签,诊断时就像大海捞针一样麻烦。

二、不当的DOCTYPE声明

不声明DOCTYPE,或者在文件开始错误声明DOCTYPE,也是一个常见错误。根据一般经验,Strict DOCTYPE是大家追求的最高级验证。Strict validation表明你的网页能够在所有浏览器上都得到最佳展示。

三、结尾斜线

如果你的网站不能验证,很有可能是在代码的某个地方漏写了结尾斜线。我们很容易忽略结尾斜线之类的东西,特别是在image标签等元素中。

在严格的DOCTYPE中这是无效的。要在img标签结尾处加上“/”以解决此问题。

四、JavaScript

如果已经声明Strict DOCTYPE,就需要在JavaScript中覆盖CDATA标签。验证程序的这一方面难倒了很多程序员,因为网站倾向于为广告和追踪脚本使用嵌入的 JavaScript。

五、不良嵌套

嵌套就是元素里又包括元素,我们容易混淆嵌套元素的顺序。例如在div标签前启动strong标签,但又先关闭div标签。这可能不会改变版块布局,但却会使你的版块设计失效。

如果仍无法发现,建议用“开发者模式”/“调试模式”(F12打开)查看对应元素继承了哪些属性,是不是其他的样式覆盖了自己设置的样式。