Amaze UI datetimepicker插件

readme.md

该项目来自 bootstrap-datetimepicker，只修改了样式，和 Amaze UI 统一风格，需结Amaze UI 的 CSS 使用。

使用演示

使用说明

使用说明：

获取 Amaze UI Datetime Picker

直接下载

引入 Datetime Picker 样式（css 目录下）以及 Amaze UI 样式：

  <link rel="stylesheet" href="path/to/amazeui.min.css"/>
  <link rel="stylesheet" href="path/to/amazeui.datetimepicker.css"/>

引入 jQuery 相关文件及 Datetime Picker JS 文件（下载包 js 目录下）：

  <script src="path/to/jquery.min.js"></script>
  <script src="path/to/amazeui.datetimepicker.min.js"></script>

初始化 Datetime Picker:

  <input type="text" value="2015-02-15 21:05" id="datetimepicker" class="am-form-field">

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

调用方法

设置时间格式：format 选项

<input type="text" value="2015-02-15 21:05" id="datetimepicker" class="am-form-field">

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

也可以通过 data-date-format 来设置时间格式

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

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

结合 Amaze UI 组件

结合 Amaze UI Class .am-input-group 来实现组件样式，其中 Class .date、.add-on、.icon-th 都在原 JS 中有引用，使用时务必加上。

<div class="am-input-group date" id="datetimepicker" data-date="12-02-2012" data-date-format="dd-mm-yyyy">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

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

内联调用：

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

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

依赖和编译

依赖 Amaze UI input-groupform，克隆项目后在 Node.js 环境下，首先全局安装 Gulp：

npm install -g gulp

然后进入目录安装依赖：

npm install

接下来，执行 gulp：

gulp serve

插件配置

所有的配置参数都是对 Date 对象的处理，按照 ISO-8601 日期和时间的表示方法，设置你的时间格式 format :

yyyy-mm-dd
yyyy-mm-dd hh:ii
yyyy-mm-ddThh:ii
yyyy-mm-dd hh:ii:ss
yyyy-mm-ddThh:ii:ssZ

format

日期格式：接受String,默认为mm/dd/yyyy

日期格式组合: p, P, h, hh, i, ii, s, ss, d, dd, m, mm, M, MM, yy, yyyy.

ss(秒), ii(分), hh(小时), HH(小时), dd(天), mm(月),代表不足两位数，以0作为占位符（01-02）

p : 小写时间分界点(‘am’ or ‘pm’)
P : 大写时间分界点(‘AM’ or ‘PM’)
s : 秒
ss : 秒
i : 分
ii : 分
h : 小时, 24小时格式
hh : 小时, 24小时格式
H : 小时, 12小时格式
HH : 小时, 12小时格式
d : 天
dd : 天
m : 月
mm : 月
M : 月份短文本表述
MM : 月份短文本表述
yy : 年, 2位数字表示
yyyy : 年, 4位数字表示

weekStart

设置开始星期几的选择：接受整数 0 - 6，默认为 0，0 (Sunday) 到 6 (Saturday)。

startDate

设置时间开始参数：接受 Date 类型值，开始时间前面的日期将被设置为 disabled。

endDate

设置结束时间参数：接受 Date 类型值，结束时间后面的日期将被设置为 disabled。

daysOfWeekDisabled

禁用星期的列数：接受 String 或 Array 类型参数

默认值为 '', []
示例：设置周六和周日禁用: daysOfWeekDisabled: '0,6' 或者 daysOfWeekDisabled: [0,6]。

autoclose

设置时间后自动关闭时间选择器面板，参数类型：Boolean 默认值为：false 不关闭。

startView

视图模式，通过参数 startView 设置日历初始视图模式，可以接受 Number String 类型：

0 或者 hour: 显示分
1 或者 days: 显示小时
2 或者 month: 显示天（默认）
3 或者 year: 显示月
4 或者 decade: 显示年

minView

最小视图模式，可以接受 Number String 类型：

0 或者 hour: 显示分（默认）
1 或者 days: 显示小时
2 或者 month: 显示天
3 或者 year: 显示月
4 或者 decade: 显示年

maxView

最大视图模式，可以接受 Number String 类型：

0 或者 hour: 显示分
1 或者 days: 显示小时
2 或者 month: 显示天
3 或者 year: 显示月
4 或者 decade: 显示年（默认）

todayBtn

是否显示按钮 Today ，点击 Today 会跳转到今日的时间，默认为 false

todayHighlight

是否高亮当日的日期，默认为 false。

keyboardNavigation

是否允许键盘选择时间，默认为 true。

language

语言设置，默认使用英语 'en' ,要支持更多语言可以通过参考下面的 I18N 扩展。

forceParse

是否强制解析 <input> 元素内的时间格式, 默认为: true

minuteStep

设置分钟视图时间间隔数，默认为 5。

pickerReferer : （弃用）

指定输入的 <input> 元素，默认为 default。

pickerPosition

设置选择器的定位方式，接受 String 类型：

'bottom-right' (默认)
'bottom-left'
'top-right'
'top-left'

viewSelect

时间更新设置，默认为选择分面板时更新时间，可以接受 Number String 类型：

0 或者 hour: 显示分（默认）
1 或者 days: 显示小时
2 或者 month: 显示天
3 或者 year: 显示月
4 或者 decade: 显示年

showMeridian

是否显示 AM 和 PM 分隔小时面板。默认值为 false。

initialDate

设置时间选择器初始化的时间值，默认情况下是现在，你可以指定其他时间，initialDate 接受 Date String，默认值为: new Date()。

组件结合

<div class="am-input-group date form_datetime-1">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

带有删除的组件结合

<div class="am-input-group date form_datetime-3" data-date="2015-02-14 14:45">
  <input size="16" type="text" value="" class="am-form-field" readonly>
  <span class="add-on am-input-group-label"><i class="icon-remove am-icon-close"></i></span>
  <span class="add-on am-input-group-label"><i class="icon-th am-icon-calendar"></i></span>
</div>

方法

`.datetimepicker(options)`

初始化日期时间选择器。

`remove`

移除日期时间选择面板。

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

`show`

显示日期时间选择面板。

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

`hide`

隐藏日期时间选择面板。

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

`update`

参数：

currentDate (Date).

更新指定的时间。

$('#datetimepicker').datetimepicker('update', new Date());

如果更新时间为现在时间，则不需要传值。

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

`setStartDate`

设置开始时间，小于开始时间的将被禁用，setStartDate 接受：String 值。

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

如果忽略该值，将不启用该选项。

$('#datetimepicker').datetimepicker('setStartDate');
$('#datetimepicker').datetimepicker('setStartDate', null);

`setEndDate`

设置结束时间，大于结束时间的将被禁用，setEndDate 接受：String 值。

$('#datetimepicker').datetimepicker('setEndDate', '2014-12-31');

如果忽略该值，选项无效。

$('#datetimepicker').datetimepicker('setEndDate');
$('#datetimepicker').datetimepicker('setEndDate', null);

`setDaysOfWeekDisabled`

禁用星期的列数：setDaysOfWeekDisabled 接受 String 或 Array 类型参数。

// 周日和周六将被禁用
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', [0,6]);

如果忽略该值，选项无效。

$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled');
$('#datetimepicker').datetimepicker('setDaysOfWeekDisabled', null);

自定义事件

`show`

时间选择器显示时触发。

$('#date-end')
  .datetimepicker()
  .on('show', function(ev){
    console.log('datetimepciker 显示了');
  });

`hide`

时间选择器隐藏时触发。

$('#date-end')
  .datetimepicker()
  .on('hide', function(ev){
    console.log('datetimepciker 将隐藏');
  });

`changeDate`

时间日期发生修改时触发，通过 ev.date 获取修改后的时间。

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

`changeYear`

年份修改时触发。

`changeMonth`

月份修改时触发。

`outOfRange`

当选择了 startDate 前的时间和 endDate 后面的时间将触发该事件，setDate setUTCDate 也会触发。

键盘控制导航

up, down, left, right arrow keys

上、下、左、右键控制选择日期。
Shift + 上或者左向前移动一个月，Shift + 下或右向后移动一个月。
Ctrl + 上或者左向前移动一个年，Ctrl + 下或右向后移动一个年。

escape

ESC 键退出激活的时间选择器。

enter

Enter 回车键能够选择日期。

鼠标滚轮导航

依赖

支持鼠标滚轮导航需要依赖 jQuery Mouse Wheel Plugin

配置参数

wheelViewModeNavigation

是否支持使用鼠标滚轮浏览不同的视图模式，wheelViewModeNavigation 默认为 false。

wheelViewModeNavigationInverseDirection

是否反向滚动, 默认的是向上滚动来查看，默认为：false

wheelViewModeNavigationDelay

设置面板滚动时间间距，wheelViewModeNavigationDelay 默认值为 100。

Demo

支持鼠标滚轮控制器的Demo

I18N 国际化

扩展语言支持, 其他语言扩展示例Demo

$.fn.datetimepicker.dates['zh-CN'] = {
  days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
  daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
  daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
  months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  today: "今天",
  suffix: [],
  meridiem: ["上午", "下午"],
  rtl: true // 从右向左书写的语言你可以使用 rtl: true 来设置
};

// 调用

$('.xxx').datetimepicker({
  language:  'zh-CN'
});

你可以在格式属性的语言配置重写默认的日期格式。

$.fn.datetimepicker.dates['pt-BR'] = {
  format: 'dd/mm/yyyy'
};

调用你扩展的语言插件，注意字符编码格式:

<script type="text/javascript" src="datetimepicker.zh.js" charset="UTF-8"></script>

demo

默认 input

<input size="16" type="text" value="2015-02-14 14:45" readonly class="form-datetime am-form-field" />
<p><button type="button" class="am-btn am-btn-secondary" id="demo-settime">设置为当前时间</button></p>
<script>
  $(function() {
    var $dpInput = $('.form-datetime').datetimepicker({
      format: 'yyyy-mm-dd hh:ii'
    });

    $('#demo-settime').on('click', function() {
      $dpInput.datetimepicker('update', new Date());
    });
  });
</script>

<input size="16" type="text" value="2015-02-14 14:45" readonly class="form-datetime am-form-field">

<p><button type="button" class="am-btn am-btn-secondary" id="demo-settime">设置为当前时间</button></p>
<script>
$(function() {
  var $dpInput = $('.form-datetime').datetimepicker({
    format: 'yyyy-mm-dd hh:ii'
  });

  $('#demo-settime').on('click', function() {
    $dpInput.datetimepicker('update', new Date());
  });
});
</script>

只显示年月

$('.form-datetime').datetimepicker({
  format: 'yyyy-mm',//格式
  startView: 'year',//开始节点
  minView:'year',//最小节点
  maxView:'decade',//最大节点
  language:'zh-CN',//语言
  autoclose:true //自动关闭
});

设置语言

<input size="16" type="text" value="2015-02-14 14:45" readonly class="form-datetime-lang am-form-field">

<input size="16" type="text" value="2015-02-14 14:45" readonly class="form-datetime-lang am-form-field">

<script>
(function($){
  // 也可以在页面中引入 amazeui.datetimepicker.zh-CN.js
  $.fn.datetimepicker.dates['zh-CN'] = {
    days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],
    daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],
    months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
    today: "今日",
    suffix: [],
    meridiem: ["上午", "下午"]
  };

  $('.form-datetime-lang').datetimepicker({
    language:  'zh-CN',
    format: 'yyyy-mm-dd hh:ii'
  });
}(jQuery));
</script>

组件结合

结合 Amaze UI Class am-input-group 来实现组件样式，其中 Class date、add-on、icon-th 都在原 JS 中有引用，使用时务必写上。

<div class="am-input-group date form_datetime-1">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<script>
  $(function() {
    $('.form_datetime-1').datetimepicker({
      format: 'yyyy-mm-dd hh:ii'
    })
  })
</script>

<div class="am-input-group date form_datetime-1">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<script>
  $(function() {
    $('.form_datetime-1').datetimepicker({
      format: 'yyyy-mm-dd hh:ii'
    })
  })
</script>

内联调用

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

<script>
  $(function() {
    $('#datetimepicker').datetimepicker();
  })
</script>

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

<script>
  $(function() {
    $('#datetimepicker').datetimepicker();
  })
</script>

位置设置

HTML 和组件结合使用一样，pickerPosition 控制 datetimepicker 的位置，可以查看 API 详细说明。

<div class="am-input-group date form_datetime-2">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<script>
  $(function() {
    $('.form_datetime-2').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        autoclose: true,
        todayBtn: true,
        pickerPosition: 'bottom-left'
    });
  })
</script>

<div class="am-input-group date form_datetime-2">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<script>
  $(function() {
    $('.form_datetime-2').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        autoclose: true,
        todayBtn: true,
        pickerPosition: 'bottom-left'
    });
  })
</script>

带删除的组件应用

基于 Class icon-remove 重置 <input> 的值，Class am-icon-* 提供图片样式。

<div class="am-input-group date form_datetime-3" data-date="2015-02-14 14:45">
  <input size="16" type="text" value="" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-remove am-icon-close"></i></span>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<script type="text/javascript">
  $(function() {
    $('.form_datetime-3').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        autoclose: true,
        todayBtn: true,
        startDate: '2015-02-14 14:45',
        minuteStep: 10
    });
  });
</script>

<div class="am-input-group date form_datetime-3" data-date="2015-02-14 14:45">
  <input size="16" type="text" value="" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-remove am-icon-close"></i></span>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<script type="text/javascript">
  $(function() {
    $('.form_datetime-3').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        autoclose: true,
        todayBtn: true,
        startDate: '2015-02-14 14:45',
        minuteStep: 10
    });
  });
</script>

镜像日期

HTML 和前面组件一样，增加一个镜像的 <input> 元素，调用时设置 linkField: 'your-mirror-id'、linkFormat: 'your-mirror-format'。

<div class="am-input-group date form_datetime-4" data-date="2015-02-14 14:45">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-remove am-icon-close"></i></span>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<p><input type="text" id="mirror_field" class="am-form-field" placeholder="镜像的日期" readonly /></p>

<script type="text/javascript">
  $(function() {
    $('.form_datetime-4').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        linkField: 'mirror_field',
        linkFormat: 'yyyy-mm-dd hh:ii'
    });
  });
</script>

<div class="am-input-group date form_datetime-4" data-date="2015-02-14 14:45">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-remove am-icon-close"></i></span>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<p><input type="text" id="mirror_field" class="am-form-field" placeholder="镜像的日期" readonly /></p>

<script type="text/javascript">
  $(function() {
    $('.form_datetime-4').datetimepicker({
        format: 'yyyy-mm-dd hh:ii',
        linkField: 'mirror_field',
        linkFormat: 'yyyy-mm-dd hh:ii'
    });
  });
</script>

Today 按钮

调用时设置 todayBtn: true。

<div class="am-input-group date form_datetime-5" data-date="2015-02-14 14:45">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-remove am-icon-close"></i></span>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<script>
  $(function() {
    $('.form_datetime-5').datetimepicker({
        format: 'yyyy-mm-dd HH:ii P',
        showMeridian: true,
        autoclose: true,
        todayBtn: true
    });
  });
</script>

<div class="am-input-group date form_datetime-5" data-date="2015-02-14 14:45">
  <input size="16" type="text" value="2015-02-14 14:45" class="am-form-field" readonly>
  <span class="am-input-group-label add-on"><i class="icon-remove am-icon-close"></i></span>
  <span class="am-input-group-label add-on"><i class="icon-th am-icon-calendar"></i></span>
</div>

<script>
  $(function() {
    $('.form_datetime-5').datetimepicker({
        format: 'yyyy-mm-dd HH:ii P',
        showMeridian: true,
        autoclose: true,
        todayBtn: true
    });
  });
</script>

<script src="../js/amazeui.datetimepicker.js"></script>
<script>
  (function($){
    // 只需要添加一次   
    $.fn.datetimepicker.dates['zh-CN'] = {   
      days: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期日"],  
      daysShort: ["周日", "周一", "周二", "周三", "周四", "周五", "周六", "周日"],   
      daysMin:  ["日", "一", "二", "三", "四", "五", "六", "日"],   
      months: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],   
      monthsShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],   
      today: "今日",   
      suffix: [],   
      meridiem: ["上午", "下午"]   
    };
    $('.form-datetime-lang').datetimepicker({
      language:  'zh-CN',
      format: 'yyyy-mm-dd hh:ii'
    });
  }(jQuery));
</script>

附件下载：链接

Amaze UI datetimepicker插件

2019-07-10 • 小熊猫幺儿

readme.md

使用演示

使用说明

调用方法

依赖和编译

插件配置

format

weekStart

startDate

endDate

daysOfWeekDisabled

autoclose

startView

minView

maxView

todayBtn

todayHighlight

keyboardNavigation

language

forceParse

minuteStep

pickerReferer : （弃用）

pickerPosition

viewSelect

showMeridian

initialDate

方法

.datetimepicker(options)

remove

show

hide

update

setStartDate

setEndDate

setDaysOfWeekDisabled

自定义事件

show

hide

changeDate

changeYear

changeMonth

outOfRange

键盘控制导航

up, down, left, right arrow keys

escape

enter

鼠标滚轮导航

依赖

配置参数

wheelViewModeNavigation

wheelViewModeNavigationInverseDirection

wheelViewModeNavigationDelay

Demo

I18N 国际化

demo

默认 input

只显示年月

设置语言

组件结合

内联调用

位置设置

带删除的组件应用

镜像日期

Today 按钮

`.datetimepicker(options)`

`remove`

`show`

`hide`

`update`

`setStartDate`

`setEndDate`

`setDaysOfWeekDisabled`

`show`

`hide`

`changeDate`

`changeYear`

`changeMonth`

`outOfRange`