amazeui / datetimepicker

Amaze UI styled bootstrap-datetimepicker.

Amaze UI Datetime Picker

---

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

使用演示

使用说明

使用说明：

1. 获取 Amaze UI Datetime Picker

• 直接下载

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

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

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

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

4. 初始化 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>

datetimepicker's Issues

如何设置只选择日期，不精确到时间

是否可以设置只选择日期，不精确到小时？

onRender配置项不起作用

我在代码中也没有搜索到任何与render有关的内容，onRender貌似没有起作用

startDate设置开始时间之后月份禁用出错

startDate设置开始时间,比如我设置的是3月2日 几点几分,日期禁用是正确的 但是月份禁用3月4月都禁用了,这是错误的

在iframe嵌套页面中，日期控件显示位置有问题，

在iframe嵌套页面中，日期控件显示位置有问题，

时间选择可以精确到秒吗

如题，现在我只能设置精确到分

setStartDate不准

$('.starttime').datetimepicker('setStartDate','2019-05-01');
禁用的是7月之前，而不是5月之前

为什么datepicker获取的时间异常

同样的电脑系统时间，datepicker按天获取的时间一个是从8:00开始，一个是从0:00开始。目前知道的唯一区别是，0点是win10，8点是win7

插件在被侧边栏被覆盖

日期插件在侧边栏被覆盖了，请问怎么办

表单使用POST不能提交

<form class="am-form" method="POST" action="/search/">           
          <span>开始时间</span>
           <input type="text" value="2015-02-14 14:45" class="form-datetime am-form-field">
            <button type="submit"  name="search">查询</button>
</form>

发现表单POST之后拿不到任何的数据。请问datetimepicker只能使用get方法？

选择完最后的时间并没有自动收起来

当选择完时间后并没有自动收起来 ，只能点击空白才可以，如果放在移动端，这个体验十分不好。源码貌似混淆过，新手看不太懂。。

一个页面里设置两个datetimepicker的问题

设置一个没问题，放两个之后，几点几分弹不出来了也无法选择

怎么设置起始时间

默认的起始时间怎么设置？？

需要引入哪些文件

下载后，需要引入几个js，

<script src=/datetimepicker/js/amazeui.datetimepicker.min.js'></script> <script type="text/javascript" src=" /datetimepicker/js/locales/amazeui.datetimepicker.zh-CN.js" charset="UTF-8"></script>

引入这两个感觉没有效果

如何只显示时分秒选择不显示日期的选择

如何只显示时分秒选择不显示日期的选择，怎么设置？

怎么在选择了日期之后就可以关闭时间框

怎么设置可以只选择年，月，日，十，分这个样子，就是选到年就是年，选到月就是月这种

datetimepicker 内联调用，如何消除边框？

datetimepicker 内联调用，如何消除边框？

描述：

我在 model 摸态框中 放置了一个内联的datetimepicker日期组件，请问边框如何消除？

This page bug ,in qq browser.

http://amazeui.github.io/datetimepicker/docs/demo.html#href%3Dhttps%3A%2F%2Fgithub.com%2Famazeui%2Fdatetimepicker%26text%3DStar%26data.count.api%3D%26data.count.href%3Dhttps%3A%2F%2Fgithub.com%2Famazeui%2Fdatetimepicker%26data.count.aria.label%3D%26data.style%3D%26data.icon%3D%26aria.label%3D

the footer is in the middle of page.
and how to upload the screenshot?
Thanks

设置自定义时间格式之后，选择到最后一个datpicker无法隐藏

设置自定义时间格式之后，选择到最后一个datepicker无法隐藏，如何监听最后一个选择了，然后将datepicker隐藏

时间选择完后，时间框里面的时间是变了，但是input标签里面的value值没有变

如题，时间选择完后，时间框里面的时间是变了，但是input标签里面的value值没有变，这样我怎么取得到选择后的时间？？？取不到的话我要这个插件有何用？

禁止选择小于今天的日期，但是在点击prev的情况下，会出现过去日期

禁止选择小于今天的日期后，点击prev时，当面板是month或year情况下下能选择过去日期。
如何在任何情况下都不可以选择过去的年，月，日

对时间这个插件真的无语。。。。。。

干嘛要把每个时间点都显示出来，就不能简洁点两个下拉，或者参考一下别的组件吗。。。，用了amaziui真的是糟心，换别的组件风格又不统一。。。。哎

format设置不管用

我想设置年月日的，用了"yyyy-mm-dd"，可以还是会弹出时分选项