❤
npm
Sign UpSign In

amazeui-datetimepicker

2.3.10 • Public • Published

Amaze UI Datetime Picker

该项目来自 bootstrap-datetimepicker，只修改了 CSS 文件，使用需要结合原来的的 class 和 Amaze UI 使用。

使用演示

使用说明

使用说明：

  1. 获取 Amaze UI Datetime Picker
  1. 引入 Datetime Picker 样式（css 目录下）以及 Amaze UI 样式：
<link rel="stylesheet" href="path/to/amazeui.min.css"/>
<link rel="stylesheet" href="path/to/amazeui.datetimepicker.css"/>
  1. 引入 jQuery 相关文件及 Datetime Picker JS 文件（下载包 js 目录下）：
<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.datetimepicker.min.js"></script>
  1. 初始化 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-group``form，克隆项目后在 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>

Readme

Keywords

Package Sidebar

Install

npm i amazeui-datetimepicker

Repository

github.com/amazeui/datetimepicker

Homepage

github.com/amazeui/datetimepicker

Weekly Downloads

7

Version

2.3.10

License

Apache

Last publish

Collaborators

  • minwe
Try on RunKit
Report malware