文档章节

DateTimePicker的Zepto版本

braverong
 braverong
发布于 2016/11/13 12:49
字数 836
阅读 64
收藏 0

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

这样就好了。

© 著作权归作者所有

braverong

braverong

粉丝 0
博文 25
码字总数 16534
作品 0
朝阳
私信 提问
KoalaUI的DateTimePicker的若干问题解答

DateTimePicker控件怎样才能只精确到分,而不显示秒? 答:在初始化参数时,修改pickSeconds为false即可,例如$("#picker").datetimepicker({pickSeconds: false}) DateTimePicker如何只显示日...

黑人牙膏
2014/05/07
153
0
bootstrapdatetimepicker插件汉化、日期初始化等使用记录

两个表单元素:开始日期和结束日期,先汉化。然后把开始日期的初始化时间设置为当月第一天,结束日期的初始化时间为当月最后一天。 $.fn.datetimepicker.dates['zh-CN'] = { days: ["星期日"...

Ethel_oo
2018/04/21
269
0
Struts2 日期控件 sx::datetimepicker

我的Struts2日期控件 sx::datetimepicker不能显示,,在网上找了好多方法都不行、包是2.18的struts2-dojo-plugin-2.1.8.jar。 <%@ taglib prefix="s" uri="/struts-tags"%> <%@ taglib pref......

hnaxing
2012/08/15
1K
3
YII2 少用的一些扩展 插件等功能 自定义操作按钮 时间插件_会点击不生效---原因可能是有的公司会对框架进行修改,影响到了, 自己下载的项目中可以正常使用 --网上很少有遇到这个问题的.

[ 'attribute' => 'status', 'label' => '状态', 'value' => function ($model) { return $model->status == 1 ? '开启' : '关闭'; }, ], [ 'class' => 'yiigridActionColumn', 'template' =......

兔子想飞
2018/05/23
0
0
有没有可以指定日期的时间选择插件

现在用的是datetimepicker,https://www.malot.fr,这个插件只能指定一个时间段为可选区域,但是现在需求是后台计算出多个日期(比如2017-08-09,2017-08-20,2017-09-03),然后插件只能选择这...

哎码
2017/09/08
95
2

没有更多内容

加载失败,请刷新页面

加载更多

最简单的获取相机拍照的图片

  import android.content.Intent;import android.graphics.Bitmap;import android.os.Bundle;import android.os.Environment;import android.provider.MediaStore;import andr......

MrLins
34分钟前
4
0
说好不哭!数据可视化深度干货,前端开发下一个涨薪点在这里~

随着互联网在各行各业的影响不断深入,数据规模越来越大,各企业也越来越重视数据的价值。作为一家专业的数据智能公司,个推从消息推送服务起家,经过多年的持续耕耘,积累沉淀了海量数据,在...

个推
35分钟前
7
0
第三方支付-返回与回调注意事项

不管是支付宝,微信,还是其它第三方支付,第四方支付,支付机构服务商只要涉及到钱的交易都要进行如下校验,全部成功了才视为成功订单 1.http请求是否成功 2.校验商户号 3.校验订单号及状态...

Shingfi
38分钟前
4
0
简述Java内存分配和回收策略以及Minor GC 和 Major GC(Full GC)

内存分配: 1. 栈区:栈可分为Java虚拟机和本地方法栈 2. 堆区:堆被所有线程共享,在虚拟机启动时创建,是唯一的目的是存放对象实例,是gc的主要区域。通常可分为两个区块年轻代和年老代。更...

DustinChan
44分钟前
6
0
Excel插入批注:可在批注插入文字、形状、图片

1.批注一直显示:审阅选项卡-------->勾选显示批注选项: 2.插入批注快捷键:Shift+F2 组合键 3.在批注中插入图片:鼠标右键点击批注框的小圆点【重点不可以在批注文本框内点击】----->调出批...

东方墨天
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部