amazeui-datetimepicker
Advanced tools
该项目来自 bootstrap-datetimepicker，只修改了 CSS 文件，使用需要结合原来的的 class 和 Amaze UI 使用。
使用说明：
css 目录下）以及 Amaze UI 样式：<link rel="stylesheet" href="path/to/amazeui.min.css"/>
<link rel="stylesheet" href="path/to/amazeui.datetimepicker.css"/>
js 目录下）：<script src="path/to/jquery.min.js"></script>
<script src="path/to/amazeui.datetimepicker.min.js"></script>
<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 :
日期格式：接受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）
设置开始星期几的选择：接受整数 0 - 6，默认为 0，0 (Sunday) 到 6 (Saturday)。
设置时间开始参数：接受 Date 类型值，开始时间前面的日期将被设置为 disabled。
设置结束时间参数：接受 Date 类型值，结束时间后面的日期将被设置为 disabled。
禁用星期的列数：接受 String 或 Array 类型参数
'', []daysOfWeekDisabled: '0,6' 或者 daysOfWeekDisabled: [0,6]。设置时间后自动关闭时间选择器面板，参数类型：Boolean 默认值为：false 不关闭。
视图模式，通过参数 startView 设置日历初始视图模式，可以接受 Number | String 类型：
0 或者 hour: 显示分1 或者 days: 显示小时2 或者 month: 显示天（默认）3 或者 year: 显示月4 或者 decade: 显示年最小视图模式，可以接受 Number | String 类型：
0 或者 hour: 显示分（默认）1 或者 days: 显示小时2 或者 month: 显示天3 或者 year: 显示月4 或者 decade: 显示年最大视图模式，可以接受 Number | String 类型：
0 或者 hour: 显示分1 或者 days: 显示小时2 或者 month: 显示天3 或者 year: 显示月4 或者 decade: 显示年（默认）是否显示按钮 Today ，点击 Today 会跳转到今日的时间，默认为 false
是否高亮当日的日期，默认为 false。
是否允许键盘选择时间，默认为 true。
语言设置，默认使用英语 'en' ,要支持更多语言可以通过参考下面的 I18N 扩展。
是否强制解析 <input> 元素内的时间格式, 默认为: true
设置分钟视图时间间隔数，默认为 5。
指定输入的 <input> 元素，默认为 default。
设置选择器的定位方式，接受 String 类型：
'bottom-right' (默认)'bottom-left''top-right''top-left'时间更新设置，默认为选择分面板时更新时间，可以接受 Number | String 类型：
0 或者 hour: 显示分（默认）1 或者 days: 显示小时2 或者 month: 显示天3 或者 year: 显示月4 或者 decade: 显示年是否显示 AM 和 PM 分隔小时面板。默认值为 false。
设置时间选择器初始化的时间值，默认情况下是现在，你可以指定其他时间，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参数：
更新指定的时间。
$('#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 也会触发。
上、下、左、右键控制选择日期。
Shift + 上或者左向前移动一个月，Shift + 下或右向后移动一个月。
Ctrl + 上或者左向前移动一个年，Ctrl + 下或右向后移动一个年。
ESC 键退出激活的时间选择器。
Enter 回车键能够选择日期。
支持鼠标滚轮导航需要依赖 jQuery Mouse Wheel Plugin
是否支持使用鼠标滚轮浏览不同的视图模式，wheelViewModeNavigation 默认为 false。
是否反向滚动, 默认的是向上滚动来查看，默认为：false
设置面板滚动时间间距，wheelViewModeNavigationDelay 默认值为 100。
支持鼠标滚轮控制器的Demo
扩展语言支持, 其他语言扩展示例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>
FAQs
Amaze UI styled Datetimepicker jQuery plugin.
We found that amazeui-datetimepicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.