1. 代码在这里
https://github.com/CuriousSolutions/DateTimePicker/blob/master/dist/DateTimePicker-Zepto.js
2.国际化代码
3.使用
3.1 引入样式和JS
<link rel="stylesheet" href="/assets/plugins/DateTimePicker/DateTimePicker.css"/>
<script src="/assets/plugins/zepto.min.js"></script>
<script src="/assets/plugins/DateTimePicker/DateTimePicker-Zepto.js"></script>
<script src="/assets/plugins/DateTimePicker/DatetimePicker-i18n-zh-CN.js?random=201611131142"></script>
3.2 DOM
不要忘了在下面添加<div id="dtBox"></div>，用于存放弹出的时间选择框
<div class="container">
<div class="page js_show">
<div class="page__bd" id="wfssp_index">
<form>
<div class="weui-cells weui-cells_form">
<!-- 违法时间 -->
<div class="weui-cell">
<div class="weui-cell__hd"><label class="weui-label">违法时间</label></div>
<div class="weui-cell__bd">
<input class="weui-input" type="text" readonly="readonly" id="wfsj" name="wfsj"
data-field="datetime" data-format="yyyy-MM-dd hh:mm:ss" >
</div>
</div>
</div>
</form>
</div>
</div>
<div id="dtBox"></div>
......
<script type="text/javascript">
$(document).ready(function () {
var nowDateTime = new Date();
var minDateTime = new Date(nowDateTime.getTime() - 2 * 86400 * 1000);//n天前
var maxDateTime = new Date(nowDateTime.getTime() + 1 * 3600 * 1000);//n小时后
$("#dtBox").DateTimePicker({
language:'zh-CN', //指定中文
defaultDate: nowDateTime,
maxDateTime: maxDateTime.format("yyyy-MM-dd HH:mm:ss"), //这里只能使用字符串格式化的时间，不能使用new Date()这样的格式
minDateTime: minDateTime.format("yyyy-MM-dd HH:mm:ss"), //同上
animationDuration:200,
buttonsToDisplay: [ "SetButton"]
});
});
</script>
4.这样还不行
中文化失败，报错，DateTimePicker对象不存在之类的。先看下中文的国际化代码
/* -----------------------------------------------------------------------------
jQuery DateTimePicker - Responsive flat design jQuery DateTime Picker plugin for Web & Mobile
Version 0.1.37
Copyright (c)2016 Curious Solutions LLP and Neha Kadam
http://curioussolutions.github.io/DateTimePicker
https://github.com/CuriousSolutions/DateTimePicker
----------------------------------------------------------------------------- */
/*
language: Simple Chinese
file: DateTimePicker-i18n-zh-CN
author: Calvin(https://github.com/Calvin-he)
*/
(function ($) {
$.DateTimePicker.i18n["zh-CN"] = $.extend($.DateTimePicker.i18n["zh-CN"], {
language: "zh-CN",
labels: {
'year': '年',
'month': '月',
'day': '日',
'hour': '时',
'minutes': '分',
'seconds': '秒',
'meridiem': '午'
},
dateTimeFormat: "yyyy-MM-dd HH:mm",
dateFormat: "yyyy-MM-dd",
timeFormat: "HH:mm",
shortDayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
fullDayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
shortMonthNames: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
fullMonthNames: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
titleContentDate: "设置日期",
titleContentTime: "设置时间",
titleContentDateTime: "设置日期和时间",
setButtonContent: "设置",
clearButtonContent: "清除",
formatHumanDate: function (oDate, sMode, sFormat) {
if (sMode === "date")
return oDate.dayShort + ", " + oDate.yyyy + "年" + oDate.month +"月" + oDate.dd + "日";
else if (sMode === "time")
return oDate.HH + "时" + oDate.mm + "分" + oDate.ss + "秒";
else if (sMode === "datetime")
return oDate.dayShort + ", " + oDate.yyyy + "年" + oDate.month +"月" + oDate.dd + "日 " + oDate.HH + "时" + oDate.mm + "分";
}
});
})(jQuery);
很明显，它是针对jQuery版本写的。那么先做修改： 修改1：jQuery改为Zepto 结果还是报错，can't set property language 之类的错误。 debugger代码发现$.DateTimePicker.i18n["zh-CN"]是undefined；然后看看Zepto.extend的实现代码
function extend(target, source, deep) {
for (key in source)
if (deep && (isPlainObject(source[key]) || isArray(source[key]))) {
if (isPlainObject(source[key]) && !isPlainObject(target[key]))
target[key] = {}
if (isArray(source[key]) && !isArray(target[key]))
target[key] = []
extend(target[key], source[key], deep)
}
else if (source[key] !== undefined) target[key] = source[key] //source[key]非空，于是给undefined[key]赋值，然后就出错了
}
修改2： 在前面添加代码
if($.DateTimePicker.i18n["zh-CN"] === undefined) {
$.DateTimePicker.i18n["zh-CN"] = {};
}
整理后代码如下：
(function ($) {
if($.DateTimePicker.i18n["zh-CN"] === undefined) {
$.DateTimePicker.i18n["zh-CN"] = {};
}
$.DateTimePicker.i18n["zh-CN"] = $.extend($.DateTimePicker.i18n["zh-CN"], {
language: "zh-CN",
labels: {
'year': '年',
'month': '月',
'day': '日',
'hour': '时',
'minutes': '分',
'seconds': '秒',
'meridiem': '午'
},
dateTimeFormat: "yyyy-MM-dd HH:mm",
dateFormat: "yyyy-MM-dd",
timeFormat: "HH:mm",
shortDayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
fullDayNames: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'],
shortMonthNames: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
fullMonthNames: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
titleContentDate: "设置日期",
titleContentTime: "设置时间",
titleContentDateTime: "设置日期和时间",
setButtonContent: "设置",
clearButtonContent: "清除",
formatHumanDate: function (oDate, sMode, sFormat) {
if (sMode === "date")
return oDate.dayShort + ", " + oDate.yyyy + "年" + oDate.month +"月" + oDate.dd + "日";
else if (sMode === "time")
return oDate.HH + "时" + oDate.mm + "分" + oDate.ss + "秒";
else if (sMode === "datetime")
return oDate.dayShort + ", " + oDate.yyyy + "年" + oDate.month +"月" + oDate.dd + "日 " + oDate.HH + "时" + oDate.mm + "分";
}
});
})(Zepto);
这样就好了。