Bootstrap 时间控件datetimepicker与timepicker

一、datetimepicker

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

年                                                月                                            日

时                                                                        分                                                           上下午                                                                                             

小视图         

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

页面里需要的文件有:

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.zh-CN.js(重要,这里是日期控件初始值)

html页面是这样滴~

Bootstrap 时间控件datetimepicker与timepicker
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>标题</title>
        <meta name="description" content="" />
        <meta name="author" content="" />
        <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.zh-CN.js"></script>/*(重要,弹出日历里面 显示的文字 
bootstrap里面显示的是英文 ,触发后显示的年月日等的显示文字,即为:Jan,feb等等)*/   <script type="text/javascript">这里写自己的js,调用时间选择器,也就是激活日期选择器,即为下文的js</script> </body>
Bootstrap 时间控件datetimepicker与timepicker

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

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

第一种是最简单的输入框

代码:

<input type="text" value="2014-09-23 23:05" id="datetimepicker">

 

js:

$('#datetimepicker').datetimepicker({

  language: 'zh-CN',//显示中文
  format: 'yyyy-mm-dd',//显示格式
  minView: "month",//设置只显示到月份
  initialDate: new Date(),
  autoclose: true,//选中自动关闭
  todayBtn: true,//显示今日按钮*/
  locale: moment.locale('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();

 

作为内联日期时间选择器:

代码是这样的:

<div id="datetimepicker"></div>

 

js:

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

 以上的介绍中,js部分是一定要写在页面里的,注意要写在页面最后面。(js依赖于jquery和bootstrap等文件)

比如我想设置自己想要的时间控件。我希望点击选择的时候先显示月份而不是年份,我想要时间的顺序是dd-mm-yyyy,这个时候就需要参数来设置了。下面就来具体看看一些参数设置吧。

format

这个是必须要设置的。

String. 默认值: 'mm/dd/yyyy'

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

weekStart

Integer. 默认值:0

一周从哪一天开始。0(星期日)到6(星期六)

startDate

Date. 默认值:开始时间

可以选择的最早日期;所有较早的日期将被禁用。

endDate

Date. 默认值:结束时间

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

daysOfWeekDisabled  一周禁用的日期

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

一周中应该停用的几天。数值为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'

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

maxView

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

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

todayBtn

Boolean, "linked". 默认值: false

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

todayHighlight

Boolean. 默认值: false

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

keyboardNavigation

Boolean. 默认值: true

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

language

String. 默认值: 'en'

单的情况下发送到服务器)。目前船上有英语(“EN”)、德语(“DE”)、巴西('BR')和西班牙语('ES’)翻译,但其他可以添加(见下面的I18N)。如果给出一个未知的语言代码,将使用英语。

forceParse

Boolean. 默认值: true

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

minuteStep

Number. 默认值: 5

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

pickerReferer : 不建议使用

String. 默认值: 'default' (other value available : 'input')

The referer element to place the picker for the component implementation. If you want to place the picker just under the input field, just specify input.

pickerPosition

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

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

viewSelect

Number or String. 默认值: same as minView (supported values are: 'decade', 'year', 'month', 'day', 'hour')

使用此选项,您可以选择将从中选择日期的视图。默认情况下,它是最后一个,但是您可以选择第一个,所以在每次单击时,日期将被更新。

showMeridian

Boolean. 默认值: false

此选项将启用日间视图和日间视图的子午线视图。

initialDate

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

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

 

二、timepicker

 1 <div class="col-md-4" style="display: -webkit-inline-box;padding-left:0px">
 2    <div class="input-group">
 3       <input type="text" id="startTime" name="startTime"
 4       readonly="readonly" class="form-control timepicker timepicker-default" placeholder="从">
 5       <span class="input-group-btn">
 6           <button class="btn default" type="button">
 7              <i class="fa fa-clock-o"></i>
 8           </button>
 9       </span>
10    </div>
11 
12 </div>
13 <div class="col-md-4">
14    <div class="input-group">
15        <input type="text" id="endTime" name="endTime"
16        readonly="readonly" class="form-control timepicker timepicker-default" placeholder="到">
17        <span class="input-group-btn">
18             <button class="btn default" type="button">
19                 <i class="fa fa-clock-o"></i>
20             </button>
21        </span>
22    </div>
23 </div>
1 <link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-timepicker/css/bootstrap-timepicker.min.css" />
2 <link rel="stylesheet" type="text/css" href="/assets/global/plugins/bootstrap-datetimepicker/css/datetimepicker.css" />
3 <script type="text/javascript" src="/assets/global/plugins/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
4 <script type="text/javascript" src="/assets/global/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.min.js"></script>
5 <script type="text/javascript" src="/assets/global/plugins/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>

var nowTime = '<%=DateTime.Now.ToString("HH:mm")%>';

$("#startTime").val(nowTime).timepicker('setTime', nowTime);

 

官方文档:DateTime Picker

前提,引用bootstrap哈哈

页面效果:

Bootstrap 时间控件datetimepicker与timepicker

上一篇:016、列表切片 和 reverse 反转,是否产生新的列表


下一篇:安装webmin时报错