Bootstrap-datepicker日期时间选择器的略以

日子时选择器

眼前,bootstrap有星星点点种日历。datepicker和datetimepicker,后者是前者的展开。

Bootstrap日期以及日组件:

用示例:

Bootstrap 1

从左到右依次是十年视图、年视图、月视图、日视图、小时视图

Bootstrap 2Bootstrap 3Bootstrap 4Bootstrap 5Bootstrap 6

动时用导入相应的CSS和js文件:

 Bootstrap 7

Bootstrap 8

可选的日子格式:

  • yyyy-mm-dd
  • yyyy-mm-dd hh:ii
  • yyyy-mm-dd hh:ii:ss

Bootstrap 9

Bootstrap 10Bootstrap 11

 

HTML部分代码:

<div class="form-group">
                <label for="dtp_input1" class="col-md-2 control-label">DateTime Picking</label>
                <div class="input-group date form_datetime col-md-5" data-date="1979-09-16T05:25:07Z" data-date-format="dd MM yyyy - HH:ii p" data-link-field="dtp_input1">
                    <input class="form-control" size="16" type="text" value="" readonly>


                </div>
                <input type="hidden" id="dtp_input1" value="" /><br/>
            </div>

JS部分代码:

$('.form_datetime').datetimepicker({
        weekStart: 0, //一周从哪一天开始
        todayBtn:  1, //
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0,
        showMeridian: 1
    });

选项:

weekStart

Integer. 默认值:0

无异于全面由哪一样龙开始。0(星期日)到6(星期六)

startDate

Date. 默认值:开始时

endDate

Date. 默认值:结束时

autoclose

Boolean. 默认值:false

当选择一个日期后是否就关闭是日期时选择器。

startView

Number, String. 默认值:2, ‘month’

日子时选择器打开之后首先显示的视图。 可领的值:

  • 0 or ‘hour’ 也小时视图
  • 1 or ‘day’ 为天视图
  • 2 or ‘month’ 为月视图(为默认值)
  • 3 or ‘year’  为年视图
  • 4 or ‘decade’ 为什年视图

todayBtn

Boolean, “linked”. 默认值: false

如若此值为true 或 “linked”,则在日期时选择器组件的底色显示一个 “Today”
按钮用以选择时日期。如果是true的话,”Today”
按钮仅仅以视图转至当天的日期,如果是”linked”,当天日子将见面吃入选。

todayHighlight

Boolean. 默认值: false

比方为true, 高亮当前日子。

keyboardNavigation

Boolean. 默认值: true

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

日期时选择器提供了键盘导航:

up, down, left, right 方向键

这些动向键中,left/right 向后/向前 一上,up/down 向后/向前 一周。

匹配shift键,up/left 向后退一个月份,down/right 向前迈进一个月。

配备ctrl键,up/left 向后下降一年,down/right 向前迈进同年。

Shift+ctrl 和 ctrl 同等效力 –
也就是说,他们不能够而且转月与年,只能单独改变年。

language

String. 默认值: ‘en’; 可以经过导入对应语言的js文件来安语言

forceParse

Boolean. 默认值: true

入选择器关闭的时节,是否强制解析输入框中的值。

 方法:

.datetimepicker(options)

初始化日期时选择器。

remove

参数: None

移除日期时选择器。同时移除已经绑定的event、内部绑定的对象与HTML元素。

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

show

参数: None

来得日期时选择器。

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

hide

参数: None

隐身日期时选择器。

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

update

参数: None

应用时输入框中的价更新日期时选择器。

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

setStartDate

参数:

  • startDate (String)

于日期时选择器设置一个新的胚胎日期。

$('#datetimepicker').datetimepicker('setStartDate', '2012-01-01');

setEndDate

参数:

  • endDate (String)

受日期时选择器设置完日期。

$('#datetimepicker').datetimepicker('setEndDate', '2012-01-01');

 

 

 

 

相关文章