天天看点

理想的Datepicker

山水盘桓,边草缠绵。苍茫一笑,愁在眉宇间。

去国怀乡,旧了红颜,追忆当初。心中已惘然。

……

这首《西风斩》无论词曲都着实让我惊艳,作为《大秦赋》插曲也分外贴合。尽管历朝历代的文人骚客都在对”暴秦“不遗余力的进行着口诛笔伐,尤以贾谊的《过秦论》为甚。然而在我眼中,这不过是六国那些被褫夺了昔日封地和特权后的王公贵族们的哀怨和私愤。且不谈其他,只说赵政的”书同文,车同轨“,仅此一点就足以让其在整个中华帝国的历史长河中屹立不倒,真可谓”千载谁堪伯仲间“!其意义如何?用今时今日的话来说就是——哥们制定了整个行业的标准!让未来的两千多年都有章可循,有法可依。

大到国家,小到行业,若无标准,到头来只能落的个各行其是。就好比战国时期的“马“字,居然各国写法都莫衷一是,无论阅读还是撰写,都给人们带来了无穷无尽的困扰,直到秦篆的出现,该问题才彻底被解决。而本文中需要谈到的,依然是这个问题,在国际化开发过程中,什么才是我们理想中的datepicker(亦包括calendar,后文同)?甚至可以作为整个行业的标准?

首先我们来总结下,作为一个典型的datepicker都需要具备什么样的功能特性。

  • 为事件或任务设定开始及结束日期
  • 鼠标设置当前事件或任务的年/月/日(按年/月/日显示)
  • 键盘设置当前事件或任务的年/月/日(按年/月/日显示)
  • 将datepicker跟时间日期字段绑定(只显示日期)
  • 将datepicker跟时间时间字段绑定(显示日期和时间)
  • 根据locale而自行更换picker的样式

而我们关心的这一切,在Moment的Datepicker中都已经得到了良好的实现,demo如下图。

理想的Datepicker
理想的Datepicker
理想的Datepicker

想要驱动国际化版本,就需要替换默认的moment.js(/moment/min/moment.min.js

),代之以moment-with-locales.js(/moment/min/moment-with-locales.js

)。同时在2.8.1版本后,还需要调用moment.locale函数明示locale string。

moment.locale(String);
moment.locale(String[]);
moment.locale(String, Object);
           

随后我们应该就可以看到国际化版本的datepicker了,下图是locale为FR时的效果。

理想的Datepicker

与国际化相关的核心代码都集中在以下三个文件内。

moment-datepicker-master/moment-datepicker/moment-datepicker.js

moment-datepicker-master/Scripts/moment-with-locales.js

moment-datepicker-master/Scripts/moment.i18n/zh-cn.js

到目前为止moment已经可以支持135个locale,每个locale date相关的细枝末节均已被涵盖。如下就是部分的日文代码:

var ja = _moment__default.defineLocale('ja', {
        months : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
        monthsShort : '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
        weekdays : '日曜日_月曜日_火曜日_水曜日_木曜日_金曜日_土曜日'.split('_'),
        weekdaysShort : '日_月_火_水_木_金_土'.split('_'),
        weekdaysMin : '日_月_火_水_木_金_土'.split('_'),
        longDateFormat : {
            LT : 'Ah時m分',
            LTS : 'Ah時m分s秒',
            L : 'YYYY/MM/DD',
            LL : 'YYYY年M月D日',
            LLL : 'YYYY年M月D日Ah時m分',
            LLLL : 'YYYY年M月D日Ah時m分 dddd'
        },
        meridiemParse: /午前|午後/i,
        isPM : function (input) {
            return input === '午後';
        },

…
           

那这么说来,moment可以被认为是相当理想的datepicker?甚至作为标准哦?我很想说是,但此刻我们不得不回到开篇话题——标准。来看看moment的标准从何处来?仔细阅读文档和代码后发现,所有format都由开源社区的志愿者们自行提供并相互认可。例如日文的由一位叫LI Long(https://github.com/baryon)的在东京的华人提供,其主业是区块链产品的全栈开发,百忙之余竟为moment这样一个国际化开源库添砖加瓦,笔者由衷的表示敬佩!而简体中文则是由一位来自杭州的Zeno Zeng同学(https://github.com/zenozeng)提供,繁体中文则由来自台北的Ben (https://github.com/ben-lin)上传。不难看出,这距离我们期望的“书同文,车同轨”还是有着不小的差距,这样的自说自话一旦涉及多个库的集成,问题就会暴露无遗。

如何扬长避短?让我们站在巨人的肩膀上继续前行呢?笔者的构想是,搁置这些来自开源社区的数据源,令所有date相关的数据都统一取自CLDR,这样秦国的战车就可以奔驰在整个中华大地上,而不至于到了赵国就得改弦更张,同时和笔者推荐的国际化开源项目Singleton的数据源也保持了一致。

简单总结如下,moment.js即便拥有再多的拥趸,再活跃的社区,也无法成为标准,但Moment+CLDR则可以成为国际化datepicker的“秦篆”,立为标杆。最后推荐大家参考甚至加入这个开源项目,让理想中的datepicker早日落地生根。https://github.com/moment/moment-cldr

继续阅读