文章目录

  1. 1. 1、获取项目
  2. 2. 2、使用项目
  3. 3. 3、使用
    1. 3.1. 3.1 绑定输入框
    2. 3.2. 3.2 绑定输入框,并设置format选项
    3. 3.3. 3.3 绑定输入框,多种参数设置
  4. 4. 4、选项
    1. 4.1. 4.1 日期格式
    2. 4.2. 4.2 weekStart
    3. 4.3. 4.3 startDate
    4. 4.4. 4.4 endDate
    5. 4.5. 4.5 daysOfWeekDisabled
    6. 4.6. 4.6 autoclose
    7. 4.7. 4.7 startView
    8. 4.8. 4.8 minView
    9. 4.9. 4.9 maxView
    10. 4.10. 4.10 todayBtn
    11. 4.11. 4.11 todayHighlight
    12. 4.12. 4.12 keyboardNavigation
    13. 4.13. 4.13 language
    14. 4.14. 4.14 forceParse
    15. 4.15. 4.15 minuteStep
    16. 4.16. 4.16 pickerPosition
  5. 5. 5、方法
  6. 6. 5.1 datetimepicker(options)
  7. 7. 5.2 remove
  8. 8. 5.3 show
  9. 9. 5.4 hide
  10. 10. 5.5 update
  11. 11. 5.6 setStartDate
  12. 12. 5.7 setEndDate
  13. 13. 5.8 setDaysOfWeekDisabled
  14. 14. 6、事件
  15. 15. 6.1 show
  16. 16. 6.2 hide
  17. 17. 6.3 changeDate

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。我们在实际项目的会根据我们的需求对Bootstrap进行功能扩展,以符合我们的开发需求。

1、获取项目

Bootstrap日期时间选择器(Bootstrap DateTime Picker)是一个Bootstrap组件,能够简化页面上日期、时间的输入。这里主要讲解下bootstrap-datetimepicker 项目。
可以克隆或fork该项目。

git clone git://github.com/smalot/bootstrap-datetimepicker.git

2、使用项目

引入一些必要的文件

<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css" type="text/css"></link>
<script type="text/javascript" src="js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="js/bootstrap-datetimepicker.zh-CN.js"></script>

3、使用

3.1 绑定输入框

  • HTML

    <input type="text" value="" id="datetimepicker" data-date-format="yyyy-mm-dd ">
    
  • JS

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

3.2 绑定输入框,并设置format选项

  • HTML

    <input type="text" value="" id="datetimepicker">
    
  • JS

    $('#datetimepicker').datetimepicker({format: 'yyyy-mm-dd});
    

3.3 绑定输入框,多种参数设置

  • HTML

    <input type="text" value="" id="datetimepicker">
    
  • JS

    $('# datetimepicker'').datetimepicker({
      language:  'zh-CN',
      format: 'yyyy-mm-dd',       //时间格式:yyyy-mm-dd
      weekStart: 1,               //一周从星期一开始
      todayBtn:  true,            //底部显示一个 "Today" 按钮
      autoclose: true,            //当选择一个日期之后立即关闭此日期时间选择器
      todayHighlight: true,       //高亮当前日期
      keyboardNavigation:true,    //允许通过方向键改变日期
      forceParse: true,           //当选择器关闭的时候,强制解析输入框中的值
      minView: 'month',           //
      startView:'month'
    });
    

4、选项

4.1 日期格式

例如,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
h : hour without leading zeros - 24-hour format
hh : hour, 2 digits with leading zeros - 24-hour format
H : hour without leading zeros - 12-hour format
HH : hour, 2 digits with leading zeros - 12-hour format
d : day of the month without leading zeros
dd : day of the month, 2 digits with leading zeros
m : numeric representation of month without leading zeros
mm : numeric representation of the month, 2 digits with leading zeros
M : short textual representation of a month, three letters
MM : full textual representation of a month, such as January or March
yy : two digit representation of a year
yyyy : full numeric representation of a year, 4 digits

我们可以组合成

yyyy-mm-dd
yyyy-mm-dd hh:ii

4.2 weekStart

nteger. 默认值:0。
一周从哪一天开始。0(星期日)到6(星期六)

4.3 startDate

Date. 默认值:开始时间

4.4 endDate

Date. 默认值:结束时间

4.5 daysOfWeekDisabled

String, Array. 默认值: ‘’, []

4.6 autoclose

Boolean. 默认值:false
当选择一个日期之后是否立即关闭此日期时间选择器。

4.7 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.

4.8 minView

Number, String. 默认值:0, ‘hour’
日期时间选择器所能够提供的最精确的时间选择视图。

4.9 maxView

Number, String. 默认值:4, ‘decade’
日期时间选择器最高能展示的选择范围视图。

4.10 todayBtn

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

4.11 todayHighlight

Boolean. 默认值: false
如果为true, 高亮当前日期。

4.12 keyboardNavigation

Boolean. 默认值: true
是否允许通过方向键改变日期。

4.13 language

String. 默认值: ‘en’

4.14 forceParse

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

4.15 minuteStep

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

4.16 pickerPosition

String. 默认值: ‘bottom-right’ (还支持 : ‘bottom-left’)
此选项当前只在组件实现中提供支持。通过设置选项可以讲选择器放倒输入框下方。

5、方法

5.1 datetimepicker(options)

初始化日期时间选择器。

5.2 remove

参数: None
移除日期时间选择器。同时移除已经绑定的event、内部绑定的对象和HTML元素。

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

5.3 show

参数: None
显示日期时间选择器。

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

5.4 hide

参数: None
隐藏日期时间选择器。

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

5.5 update

参数: None
使用当前输入框中的值更新日期时间选择器。

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

5.6 setStartDate

参数:
startDate (String)
给日期时间选择器设置一个新的起始日期。

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

5.7 setEndDate

参数:
endDate (String)
给日期时间选择器设置结束日期。

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

5.8 setDaysOfWeekDisabled

参数:
daysOfWeekDisabled (String|Array)

$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', [0,6]);
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled');
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', null);

6、事件

Datetimepicker 类暴露了一组event用以对日期进行操作。

6.1 show

当选择器显示时被触发。

6.2 hide

当选择器隐藏时被触发。

6.3 changeDate

当日期被改变时被触发。

$('#date-end')
.datetimepicker()
.on('changeDate', function(ev){
    if (ev.date.valueOf() < date-start-display.valueOf()){
        ....
    }
});
(完)

微信公众号

文章目录

  1. 1. 1、获取项目
  2. 2. 2、使用项目
  3. 3. 3、使用
    1. 3.1. 3.1 绑定输入框
    2. 3.2. 3.2 绑定输入框,并设置format选项
    3. 3.3. 3.3 绑定输入框,多种参数设置
  4. 4. 4、选项
    1. 4.1. 4.1 日期格式
    2. 4.2. 4.2 weekStart
    3. 4.3. 4.3 startDate
    4. 4.4. 4.4 endDate
    5. 4.5. 4.5 daysOfWeekDisabled
    6. 4.6. 4.6 autoclose
    7. 4.7. 4.7 startView
    8. 4.8. 4.8 minView
    9. 4.9. 4.9 maxView
    10. 4.10. 4.10 todayBtn
    11. 4.11. 4.11 todayHighlight
    12. 4.12. 4.12 keyboardNavigation
    13. 4.13. 4.13 language
    14. 4.14. 4.14 forceParse
    15. 4.15. 4.15 minuteStep
    16. 4.16. 4.16 pickerPosition
  5. 5. 5、方法
  6. 6. 5.1 datetimepicker(options)
  7. 7. 5.2 remove
  8. 8. 5.3 show
  9. 9. 5.4 hide
  10. 10. 5.5 update
  11. 11. 5.6 setStartDate
  12. 12. 5.7 setEndDate
  13. 13. 5.8 setDaysOfWeekDisabled
  14. 14. 6、事件
  15. 15. 6.1 show
  16. 16. 6.2 hide
  17. 17. 6.3 changeDate