feat: calendar update locale

Author: tangjinzhou

build/config.js

@@ -1,5 +1,5 @@
 module.exports = {
   dev: {
-    componentName: 'table', // dev components
+    componentName: 'calendar', // dev components
   },
 };

components/calendar/index.jsx

@@ -1,15 +1,9 @@
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
-import {
-  getOptionProps,
-  hasProp,
-  initDefaultProps,
-  getListeners,
-  getComponentFromProp,
-} from '../_util/props-util';
+import { getOptionProps, hasProp, initDefaultProps, getListeners } from '../_util/props-util';
 import * as moment from 'moment';
 import FullCalendar from '../vc-calendar/src/FullCalendar';
-import Header, { HeaderRender } from './Header';
+import Header from './Header';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import interopDefault from '../_util/interopDefault';
 import { ConfigConsumerProps } from '../config-provider';

components/vc-calendar/index.js

@@ -1,4 +1,4 @@
-// based on rc-calendar 9.10.10
+// based on rc-calendar 9.15.8
 import Vue from 'vue';
 import ref from 'vue-ref';
 import Calendar from './src/';

components/vc-calendar/src/Calendar.jsx

@@ -14,6 +14,13 @@ import enUs from './locale/en_US';
 import { getTimeConfig, getTodayTime, syncTime } from './util';
 import { goStartMonth, goEndMonth, goTime } from './util/toTime';
 
+const getMomentObjectIfValid = date => {
+  if (moment.isMoment(date) && date.isValid()) {
+    return date;
+  }
+  return false;
+};
+
 const Calendar = {
   props: {
     locale: PropTypes.object.def(enUs),
@@ -46,6 +53,7 @@ const Calendar = {
     renderSidebar: PropTypes.func.def(() => null),
     clearIcon: PropTypes.any,
     focusablePanel: PropTypes.bool.def(true),
+    inputMode: PropTypes.string,
   },
 
   mixins: [BaseMixin, CommonMixin, CalendarMixin],
@@ -54,7 +62,10 @@ const Calendar = {
     const props = this.$props;
     return {
       sMode: this.mode || 'date',
-      sValue: props.value || props.defaultValue || moment(),
+      sValue:
+        getMomentObjectIfValid(props.value) ||
+        getMomentObjectIfValid(props.defaultValue) ||
+        moment(),
       sSelectedValue: props.selectedValue || props.defaultSelectedValue,
     };
   },
@@ -63,9 +74,11 @@ const Calendar = {
       this.setState({ sMode: val });
     },
     value(val) {
-      const sValue = val || this.defaultValue || getNowByCurrentStateValue(this.sValue);
       this.setState({
-        sValue,
+        sValue:
+          getMomentObjectIfValid(val) ||
+          getMomentObjectIfValid(this.defaultValue) ||
+          getNowByCurrentStateValue(this.sValue),
       });
     },
     selectedValue(val) {
@@ -190,6 +203,25 @@ const Calendar = {
         source: 'todayButton',
       });
     },
+
+    onBlur(event) {
+      setTimeout(() => {
+        const dateInput = DateInput.getInstance();
+        const rootInstance = this.rootInstance;
+
+        if (
+          !rootInstance ||
+          rootInstance.contains(document.activeElement) ||
+          (dateInput && dateInput.contains(document.activeElement))
+        ) {
+          // focused element is still part of Calendar
+          return;
+        }
+
+        this.$emit('blur', event);
+      }, 0);
+    },
+
     getRootDOMNode() {
       return this.$el;
     },
@@ -217,6 +249,9 @@ const Calendar = {
       sSelectedValue,
       sMode,
       renderFooter,
+      inputMode,
+      monthCellRender,
+      monthCellContentRender,
       $props: props,
     } = this;
     const clearIcon = getComponentFromProp(this, 'clearIcon');
@@ -267,6 +302,7 @@ const Calendar = {
         onChange={this.onDateInputChange}
         clearIcon={clearIcon}
         onSelect={this.onDateInputSelect}
+        inputMode={inputMode}
       />
     ) : null;
     const children = [];
@@ -286,6 +322,8 @@ const Calendar = {
             renderFooter={renderFooter}
             showTimePicker={showTimePicker}
             prefixCls={prefixCls}
+            monthCellRender={monthCellRender}
+            monthCellContentRender={monthCellContentRender}
           />
           {timePicker && showTimePicker ? (
             <div class={`${prefixCls}-time-picker`}>

components/vc-calendar/src/MonthCalendar.jsx

@@ -14,7 +14,6 @@ const MonthCalendar = {
     visible: PropTypes.bool.def(true),
     prefixCls: PropTypes.string.def('rc-calendar'),
     monthCellRender: PropTypes.func,
-    dateCellRender: PropTypes.func,
     value: PropTypes.object,
     defaultValue: PropTypes.object,
     selectedValue: PropTypes.object,

components/vc-calendar/src/Picker.jsx

@@ -38,6 +38,7 @@ const Picker = {
     defaultValue: PropTypes.oneOfType([MomentType, PropTypes.arrayOf(MomentType)]),
     align: PropTypes.object.def({}),
     dropdownClassName: PropTypes.string,
+    dateRender: PropTypes.func,
   },
   mixins: [BaseMixin],
 
@@ -123,6 +124,10 @@ const Picker = {
       this.closeCalendar(this.focus);
     },
 
+    onCalendarBlur() {
+      this.setOpen(false);
+    },
+
     onVisibleChange(open) {
       this.setOpen(open);
     },
@@ -144,6 +149,7 @@ const Picker = {
           ok: createChainedFunction(calendarEvents.ok, this.onCalendarOk),
           select: createChainedFunction(calendarEvents.select, this.onCalendarSelect),
           clear: createChainedFunction(calendarEvents.clear, this.onCalendarClear),
+          blur: createChainedFunction(calendarEvents.blur, this.onCalendarBlur),
         },
       };