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

这样就好了。

转载于:https://my.oschina.net/u/200628/blog/786955