docs: zh-cn

example/app.js

@@ -20,7 +20,8 @@ import MinuteStep from './demo/MinuteStep.vue';
 import FixedTimeList from './demo/FixedTimeList.vue';
 import Disabled from './demo/Disabled.vue';
 
-import en from './en.md';
+import docEn from './en.md';
+import docZhCN from './zh-cn.md';
 
 hljs.registerLanguage('javascript', javascript);
 hljs.registerLanguage('xml', xml);
@@ -109,12 +110,25 @@ function transformMd(text) {
   return result;
 }
 
-const titleAndDescMap = transformMd(en);
+const docMap = {
+  en: transformMd(docEn),
+  'zh-cn': transformMd(docZhCN),
+};
 
 const App = {
   name: 'App',
+  props: {
+    changeLocale: {
+      type: Function,
+      default() {
+        return '';
+      },
+    },
+  },
   data() {
     return {
+      lang: 'en',
+      hackReset: true,
       currentId: this.getCurrentId(),
     };
   },
@@ -131,26 +145,50 @@ const App = {
     getCurrentId() {
       return location.hash.slice(1);
     },
+    handleChangeLocale() {
+      const lang = this.lang === 'en' ? 'zh-cn' : 'en';
+      this.lang = lang;
+      this.changeLocale(lang);
+      this.hackReset = false;
+      this.$nextTick(() => {
+        this.hackReset = true;
+      });
+    },
   },
   render(h) {
+    const doc = docMap[this.lang] || docMap.en;
     const menus = components.map(item => {
       return {
         id: item.id,
-        ...titleAndDescMap[item.id],
+        ...doc[item.id],
       };
     });
     return (
       <Container menus={menus}>
-        {components.map(item => {
-          const { component, id, code } = item;
-          const props = {
-            id,
-            code,
-            active: id === this.currentId,
-            ...titleAndDescMap[id],
-          };
-          return <Card {...{ props }}>{h(component)}</Card>;
-        })}
+        <div style={{ textAlign: 'right' }}>
+          <a
+            style="margin-right: 10px"
+            class="mx-btn-text mx-btn"
+            href="https://github.com/mengxiong10/vue2-datepicker"
+            target="_blank"
+          >
+            GitHub
+          </a>
+          <button onClick={this.handleChangeLocale} class="mx-btn">
+            {this.lang === 'en' ? '中文' : 'English'}
+          </button>
+        </div>
+        {this.hackReset &&
+          components.map(item => {
+            const { component, id, code } = item;
+            const props = {
+              id,
+              code,
+              active: id === this.currentId,
+              ...doc[id],
+            };
+            return <Card {...{ props }}>{h(component)}</Card>;
+          })}
       </Container>
     );
   },

example/dev.js

@@ -3,11 +3,18 @@ import Vue from 'vue';
 
 import DatePicker from '../src/index';
 import '../src/style/index.scss';
+import '../src/locale/zh-cn';
 
 import App from './app';
 
 DatePicker.install(Vue);
+DatePicker.locale('en');
 
 new Vue({
-  render: h => h(App),
+  render: h =>
+    h(App, {
+      props: {
+        changeLocale: DatePicker.locale,
+      },
+    }),
 }).$mount('#app');

example/en.md

@@ -39,13 +39,13 @@ Disabled part of dates and time by `disabledDate` and `disabledTime` respectivel
 ### Shortcut
 
 You can set `shortcuts` to improve user experience.
-You can also use the header slot or the footer slot
+Use the header slot or the footer slot to render extra element in panel for customized requirements.
 
 <!-- ControlTimePanel -->
 
-### Control TimePanel visible
+### Control TimePanel visible(datetime mode)
 
-Determing whether the time panel is displayed by `showTimePanel`.
+The display or hiding of the time panel can be controlled by `showTimePanel`.
 The time panel is displayed after the date is selected by default.
 
 <!-- ControlOpen -->
@@ -53,21 +53,21 @@ The time panel is displayed after the date is selected by default.
 ### Control Open
 
 You can use the prop `open` to control the visible of popup.
-The time picker doesn't automatically close by default.
-This example automatically close the popup when the seconds is selected.
+This example shows how to close the popup when the seconds is selected.
 
 <!-- HideSeconds -->
 
-### Hide Seconds & Show AM/PM
+### Hide seconds selection & display AMPM selection
 
-The columns of the time Picker is displayed according to the value of format by default.
+The columns of the time Picker is displayed according to the value of format(HH:mm:ss) by default.
 You can also set `showHour` `showMinute` `showSecond` to override the default value
 
 <!-- MinuteStep -->
 
 ### Interval and custom time options
 
-Show stepped options by `hourStep` `minuteStep` `secondStep` or show custom options by `hourOptions` `minuteOptions` `secondOptions`
+Set stepped time options by `hourStep` `minuteStep` `secondStep`
+Set custom time options by `hourOptions` `minuteOptions` `secondOptions`.
 
 <!-- FixedTimeList -->
 

example/helper/container.vue

@@ -6,6 +6,7 @@
         :key="menu.id"
         :class="{ active: activeIndex === i }"
         :href="`#${menu.id}`"
+        :title="menu.title"
         >{{ menu.title }}</a
       >
     </div>
@@ -118,6 +119,6 @@ body {
 .content {
   box-sizing: border-box;
   width: 100%;
-  padding: 20px;
+  padding: 10px 20px;
 }
 </style>

example/index.js

@@ -1,5 +1,10 @@
 import App from './app';
 
 new window.Vue({
-  render: h => h(App),
+  render: h =>
+    h(App, {
+      props: {
+        changeLocale: window.DatePicker.locale,
+      },
+    }),
 }).$mount('#app');

example/zh-cn.md

@@ -0,0 +1,76 @@
+<!-- Basic -->
+
+### 基本
+
+可以选择或手动输入一个日期, 月, 年, 时间或者日期加时间
+
+<!-- ValueType -->
+
+### 绑定值的类型
+
+通过`valueType`去设置`ｖ-model`绑定的值的类型
+
+- "format": 返回一个字符串，和输入框格式化之后的一样．
+- "date"(default): 返回一个 Date 对象.
+- "timestamp": 返回一个时间戳.
+- token: 一个可以被解析的 token, 返回格式化这个 token 的字符串.
+
+<!-- Range -->
+
+### 日期范围
+
+支持选择一个日期范围
+
+<!-- DisabledDateTime -->
+
+### 不可选择的日期和时间
+
+可用 `disabledDate` 和 `disabledTime` 分别禁止选择部分日期和时间
+
+<!-- Disabled -->
+
+### 禁用和可编辑
+
+- `disabled`: 设置组件是否禁用
+- `editable`: 设置是否可手动输入
+
+<!-- Shortcut -->
+
+### 快捷选项
+
+可以通过设置 `shortcuts` 提升用户体验.
+也可以使用 slot header 或者 footer 去设置额外的元素.
+
+<!-- ControlTimePanel -->
+
+### 控制时间选择的显示和隐藏(日期时间模式)
+
+时间选择的显示可以通过 `showTimePanel` 控制.
+默认情况下选择一个日期后时间面板就自动显示.
+
+<!-- ControlOpen -->
+
+### 控制弹窗打开
+
+可以通过 `open` 去控制弹窗的显示
+下面的例子说明怎么关闭弹窗当选择秒的时候
+
+<!-- HideSeconds -->
+
+### 隐藏秒和显示 am/pm
+
+时间选择的列是自动显示通过 `format`的设置.
+你可以通过 `showHour` `showMinute` `showSecond` 覆盖默认值
+
+<!-- MinuteStep -->
+
+### 间隔的时间和自定义时间选择
+
+设置间隔的时间通过`hourStep` `minuteStep` `secondStep`.
+设置自定义的选择通过`hourOptions` `minuteOptions` `secondOptions`.
+
+<!-- FixedTimeList -->
+
+### 固定的时间列表
+
+可以通过 `timePickerOptions` 提供一个固定的时间列表选择

src/date-picker.vue

@@ -88,7 +88,7 @@
 import { parse, format } from 'date-format-parse';
 import { isValidDate, isValidRangeDate, getValidDate } from './util/date';
 import { pick, isObject, mergeDeep } from './util/base';
-import { locale as getLocale } from './locale';
+import { getLocale } from './locale';
 import Popup from './popup';
 import IconCalendar from './icon/icon-calendar';
 import IconClose from './icon/icon-close';

src/locale.js

@@ -4,11 +4,22 @@ let defaultLocale = 'en';
 const locales = {};
 locales[defaultLocale] = enUS;
 
-export function locale(name, object) {
+export function locale(name, object, isLocal) {
   if (typeof name !== 'string') return locales[defaultLocale];
+  let l;
+  if (locales[name]) {
+    l = name;
+  }
   if (object) {
     locales[name] = object;
-    defaultLocale = name;
+    l = name;
+  }
+  if (!isLocal) {
+    defaultLocale = l;
   }
   return locales[name] || locales[defaultLocale];
 }
+
+export function getLocale(name) {
+  return locale(name, null, true);
+}

src/mixin/format.js

@@ -1,5 +1,5 @@
 import { format } from 'date-format-parse';
-import { locale as getLocale } from '../locale';
+import { getLocale } from '../locale';
 
 export default {
   inject: {

src/mixin/locale.js

@@ -1,4 +1,4 @@
-import { locale as getLocale } from '../locale';
+import { getLocale } from '../locale';
 
 export default {
   inject: {