bootstrap-datetimepicker时间控件

来源：互联网发布：淘宝网货源编辑：程序博客网时间：2024/05/16 01:08

欢迎各种吐槽。

先展示，再上代码

首先，我们看看点击选择时间的时候的展示页面吧

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

页面里需要的文件有：

css:

bootstrap.min.css（含有bootstrap 所有css）

bootstrap-datetimepicker.min.css（重要，这就是日期控件所需的样式表）

js:

jquery-1.8.3.min.js（其他版本的jquery也可以）

bootstrap.min.js（含有bootstrap 所有js）

注意：前两个文件必须在后三个之前引入

bootstrap-datetimepicker.js（重要，这就是日期控件所需的js）

locales/bootstrap-datetimepicker.fr.js（重要，这里是日期控件初始值）

locales/bootstrap-datetimepicker.zh-CN.js(重要，这里是语言中文)

显示时：日期格式， p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy 的任意组合。

p : meridian in lower case ('am' or 'pm') - according to locale file
P : meridian in upper case ('AM' or 'PM') - according to locale file
s : seconds without leading zeros
ss : seconds, 2 digits with leading zeros
i : minutes without leading zeros
ii : minutes, 2 digits with leading zeros ...
yyyy-mm-dd 年-月-日（常用）
yyyy-mm-dd hh:ii 年-月-日时：分（常用）

weekStart

Integer. 默认值：0

一周从哪一天开始。0（星期日）到6（星期六）

weekStart:1。1（星期一）到7（星期日）

startDate

Date. 默认值：开始时间

可选择的最早日期；所有早期日期都将被禁用。

startDate:'1900-01-01'(意思是开始时间最小为1900-01-01，在向前不可取)

endDate

Date. 默认值：结束时间

可以选择的最新日期；所有稍后的日期将被禁用。

ebdDate:'2050-01-01'(意思是结束时间最大为2050-01-01，在向后时间取不到)

daysOfWeekDisabled

String, Array. 默认值: '', []

应该禁用的一周中的天数。数值为0（星期日）至6（星期六）。多个值应该用逗号分隔。例如：禁用周末：“0,6”或[ 0,6 ]。（默认的周日是0，周六是 6）

autoclose

Boolean. 默认值：false

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

startView

Number, String. 默认值：2, 'month'

日期时间选择器打开之后首先显示的视图。可接受的值：

0 or 'hour' for the hour view
1 or 'day' for the day view
2 or 'month' for month view (the default)
3 or 'year' for the 12-month overview
4 or 'decade' for the 10-year overview. Useful for date-of-birth datetimepickers.

minView

Number, String. 默认值：0, 'hour' 配合startView来使用

0 or 'hour' for the hour view 显示到分钟
1 or 'day' for the day view 显示到小时
2 or 'month' for month view (the default) 显示到天
3 or 'year' for the 12-month overview 显示到月

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

maxView

Number, String. 默认值：4, 'decade'

日期时间选择器最高能展示的选择范围（最大是 4）视图，就是点击上面标记地方，能展示的范围，这里可以展示到年代。

todayBtn

Boolean, "linked". 默认值: false

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

todayHighlight

Boolean. 默认值: false

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

keyboardNavigation

Boolean. 默认值: true

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

language

String. 默认值: 'en'

用于月和日名的语言的两个字母代码。这些也将被用作输入的值（在表单提交的情况下随后发送到服务器）。. 默认为英语 ('en')，德国('de'), 巴西('br'), and 西班牙 ('es') 但其他人可以添加 (see I18N below).如果给出了未知的语言代码，将使用英语。

forceParse（我没用过）

Boolean. 默认值: true

当选择器关闭的时候，是否强制解析输入框中的值。也就是说，当用户在输入框中输入了不正确的日期，选择器将会尽量解析输入的值，并将解析后的正确值按照给定的格式format设置到输入框中。

minuteStep（我没用过）

Number. 默认值: 5

此数值被当做步进值用于构建小时视图。对于每个 minuteStep 都会生成一组预设时间（分钟）用于选择。

pickerPosition

String. 默认值: 'bottom-right' (还支持 : 'bottom-left')

此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框上方或下方（左边或右边）。

其实完整支持的参数可以通过查询源代码获取，一共有4个参数：

bottom-left / bottom-right / top-left / top-right

showMeridian（我没用过）

Boolean. 默认值: false

This option will enable meridian views for day and hour views.

（此选项将启用子午线视图的每日和小时视图。）

initialDate

（我没用过）

Date or String. 默认值: new Date()

You can initialize the viewer with a date. By default it's now, so you can specify yesterday or today at midnight ...

可以用日期初始化查看器。默认情况下是现在，所以你可以指定昨天或今天午夜…

准备工作：html页面是这样滴~

<!DOCTYPE html><html lang="en">    <head>       <meta charset="UTF-8">      <title>日期控件</title>        <link href="bootstrap.min.css" rel="stylesheet" />/*（含有bootstrap 所有css）*/        <link href="bootstrap-datetimepicker.min.css" rel="stylesheet" />/*（重要，这就是日期控件所需的样式表）*/    </head>    <body>　   <div>这里就写上自己需要的代码，比如你想要的是一个简单的输入框时间控件就写输入框的代码，具体如下几种样式介绍</div>

    <script type="text/javascript" src="jquery.js"></script>/*（重要，依赖jquery）*/    <script type="text/javascript" src="bootstrap.min.js"></script>/*（含有bootstrap 所有js) 这两个必须在后三者前面*/

    <script type="text/javascript" src="bootstrap-datetimepicker.js"></script>/*（重要，这就是日期控件所需的js）*/    <script type="text/javascript" src="locales/bootstrap-datetimepicker.fr.js"></script>/*（重要，弹出日历里面 显示的文字 
       bootstrap里面显示的是英文 ，触发后显示的年月日等的显示文字，即为：Jan，feb等等）*/　　<script type="text/javascript">这里写自己的js，调用时间选择器，也就是激活日期选择器，即为下文的js</script>    </body>

文件引用完了，咱们就开始设置日期控件了。

这里根据不同需求，也有不同的样式写法

第一种是最简单的输入框

代码：

<input type="text" id="datetimepicker" readonly>

js：

$('#datetimepicker').datetimepicker({        format: 'yyyy-mm-dd hh:ii'      /*此属性是显示顺序，还有显示顺序是mm-dd-yyyy*/

autoclose:true,                /*选择后自动关闭日期的下拉框*/startView:2,                   /*下拉框出现时显示的格式 这里是 显示 天 */minView:2,                      /*显示的格式最小时间 这里是 显示 天 */maxView:4,                     /*显示的格式最大时间 这里是 显示 年代 10年 */weekStart:1,                    /*星期的显示：从周一到周日*/todayBtn: "linked",              /*显示“今天”按钮 并选中今天*/keyboradNavigation:true,          /*方向键可以控制选择时间*/pickerPosition:"top-right",       /*下拉框显示的位置*/todayHighlight:true,              /*今天为高亮色*/startDate:'1900-01-01',           /*选择的最早时间*/endDate:'2050-01-01', /*选择的最晚时间*/daysOfWeekDisabled:'0,6',         /*不可选择的时间 按照星期来控制*/showMeridian:true,                  /*启用子午线视图的每日和小时视图*/language:'zh-CN'                     /*显示的语言*/});

也有这么写的

代码：

<input type="text" value="2012-05-15 21:05" id="datetimepicker" data-date-format="yyyy-mm-dd hh:ii">

js：

$('#datetimepicker').datetimepicker();

作为组件使用的时候

代码是这样的

<div class="input-append date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">       <input size="16" type="text" value="12-02-2012" readonly>       <span class="add-on"><i class="icon-th"></i></span></div>

js：

$('#datetimepicker').datetimepicker();

阅读全文

0 0