DateTimePicker的Zepto版本

1. 代碼在這裏

https://github.com/CuriousSolutions/DateTimePicker/blob/master/dist/DateTimePicker-Zepto.js

2.國際化代碼

https://github.com/CuriousSolutions/DateTimePicker/blob/master/dist/i18n/DatetimePicker-i18n-zh-CN.js

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);

這樣就行了。