@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/vc-calendar/src/locale/vi_VN.js

@@ -0,0 +1,28 @@
+export default {
+  today: 'Hôm nay',
+  now: 'Bây giờ',
+  backToToday: 'Trở về hôm nay',
+  ok: 'Ok',
+  clear: 'Xóa',
+  month: 'Tháng',
+  year: 'Năm',
+  timeSelect: 'Chọn thời gian',
+  dateSelect: 'Chọn ngày',
+  weekSelect: 'Chọn tuần',
+  monthSelect: 'Chọn tháng',
+  yearSelect: 'Chọn năm',
+  decadeSelect: 'Chọn thập kỷ',
+  yearFormat: 'YYYY',
+  dateFormat: 'D/M/YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'D/M/YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'Tháng trước (PageUp)',
+  nextMonth: 'Tháng sau (PageDown)',
+  previousYear: 'Năm trước (Control + left)',
+  nextYear: 'Năm sau (Control + right)',
+  previousDecade: 'Thập kỷ trước',
+  nextDecade: 'Thập kỷ sau',
+  previousCentury: 'Thế kỷ trước',
+  nextCentury: 'Thế kỷ sau',
+};

package/src/components/vc-calendar/src/locale/zh_CN.js

@@ -0,0 +1,27 @@
+export default {
+  today: '今天',
+  now: '此刻',
+  backToToday: '返回今天',
+  ok: '确定',
+  timeSelect: '选择时间',
+  dateSelect: '选择日期',
+  weekSelect: '选择周',
+  clear: '清除',
+  month: '月',
+  year: '年',
+  previousMonth: '上个月 (翻页上键)',
+  nextMonth: '下个月 (翻页下键)',
+  monthSelect: '选择月份',
+  yearSelect: '选择年份',
+  decadeSelect: '选择年代',
+  yearFormat: 'YYYY年',
+  dayFormat: 'D日',
+  dateFormat: 'YYYY年M月D日',
+  dateTimeFormat: 'YYYY年M月D日 HH时mm分ss秒',
+  previousYear: '上一年 (Control键加左方向键)',
+  nextYear: '下一年 (Control键加右方向键)',
+  previousDecade: '上一年代',
+  nextDecade: '下一年代',
+  previousCentury: '上一世纪',
+  nextCentury: '下一世纪',
+};

package/src/components/vc-calendar/src/locale/zh_TW.js

@@ -0,0 +1,26 @@
+export default {
+  today: '今天',
+  now: '此刻',
+  backToToday: '返回今天',
+  ok: '確定',
+  timeSelect: '選擇時間',
+  dateSelect: '選擇日期',
+  clear: '清除',
+  month: '月',
+  year: '年',
+  previousMonth: '上個月 (翻頁上鍵)',
+  nextMonth: '下個月 (翻頁下鍵)',
+  monthSelect: '選擇月份',
+  yearSelect: '選擇年份',
+  decadeSelect: '選擇年代',
+  yearFormat: 'YYYY年',
+  dayFormat: 'D日',
+  dateFormat: 'YYYY年M月D日',
+  dateTimeFormat: 'YYYY年M月D日 HH時mm分ss秒',
+  previousYear: '上一年 (Control鍵加左方向鍵)',
+  nextYear: '下一年 (Control鍵加右方向鍵)',
+  previousDecade: '上一年代',
+  nextDecade: '下一年代',
+  previousCentury: '上一世紀',
+  nextCentury: '下一世紀',
+};

package/src/components/vc-calendar/src/mixin/CalendarMixin.js

@@ -0,0 +1,122 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { hasProp } from '../../../_util/props-util';
+import moment from 'moment';
+import { isAllowedDate, getTodayTime } from '../util/index';
+function noop() {}
+
+export function getNowByCurrentStateValue(value) {
+  let ret;
+  if (value) {
+    ret = getTodayTime(value);
+  } else {
+    ret = moment();
+  }
+  return ret;
+}
+function isMoment(value) {
+  if (Array.isArray(value)) {
+    return (
+      value.length === 0 || value.findIndex(val => val === undefined || moment.isMoment(val)) !== -1
+    );
+  } else {
+    return value === undefined || moment.isMoment(value);
+  }
+}
+const MomentType = PropTypes.custom(isMoment);
+const CalendarMixin = {
+  mixins: [BaseMixin],
+  name: 'CalendarMixinWrapper',
+  props: {
+    value: MomentType,
+    defaultValue: MomentType,
+  },
+
+  data() {
+    const props = this.$props;
+    const sValue = props.value || props.defaultValue || getNowByCurrentStateValue();
+    return {
+      sValue,
+      sSelectedValue: props.selectedValue || props.defaultSelectedValue,
+    };
+  },
+  watch: {
+    value(val) {
+      const sValue = val || this.defaultValue || getNowByCurrentStateValue(this.sValue);
+      this.setState({
+        sValue,
+      });
+    },
+    selectedValue(val) {
+      this.setState({
+        sSelectedValue: val,
+      });
+    },
+  },
+  methods: {
+    onSelect(value, cause) {
+      if (value) {
+        this.setValue(value);
+      }
+      this.setSelectedValue(value, cause);
+    },
+
+    renderRoot(newProps) {
+      const props = this.$props;
+      const prefixCls = props.prefixCls;
+
+      const className = {
+        [prefixCls]: 1,
+        [`${prefixCls}-hidden`]: !props.visible,
+        // [props.className]: !!props.className,
+        [newProps.class]: !!newProps.class,
+      };
+      return (
+        <div
+          ref="rootInstance"
+          class={className}
+          tabIndex="0"
+          onKeydown={this.onKeyDown || noop}
+          onBlur={this.onBlur || noop}
+        >
+          {newProps.children}
+        </div>
+      );
+    },
+
+    setSelectedValue(selectedValue, cause) {
+      // if (this.isAllowedDate(selectedValue)) {
+      if (!hasProp(this, 'selectedValue')) {
+        this.setState({
+          sSelectedValue: selectedValue,
+        });
+      }
+      this.__emit('select', selectedValue, cause);
+      // }
+    },
+
+    setValue(value) {
+      const originalValue = this.sValue;
+      if (!hasProp(this, 'value')) {
+        this.setState({
+          sValue: value,
+        });
+      }
+      if (
+        (originalValue && value && !originalValue.isSame(value)) ||
+        (!originalValue && value) ||
+        (originalValue && !value)
+      ) {
+        this.__emit('change', value);
+      }
+    },
+
+    isAllowedDate(value) {
+      const disabledDate = this.disabledDate;
+      const disabledTime = this.disabledTime;
+      return isAllowedDate(value, disabledDate, disabledTime);
+    },
+  },
+};
+
+export default CalendarMixin;

package/src/components/vc-calendar/src/mixin/CommonMixin.js

@@ -0,0 +1,26 @@
+export default {
+  methods: {
+    getFormat() {
+      let { format } = this;
+      const { locale, timePicker } = this;
+      if (!format) {
+        if (timePicker) {
+          format = locale.dateTimeFormat;
+        } else {
+          format = locale.dateFormat;
+        }
+      }
+      return format;
+    },
+    focus() {
+      if (this.focusElement) {
+        this.focusElement.focus();
+      } else if (this.$refs.rootInstance) {
+        this.$refs.rootInstance.focus();
+      }
+    },
+    saveFocusElement(focusElement) {
+      this.focusElement = focusElement;
+    },
+  },
+};

package/src/components/vc-calendar/src/month/MonthPanel.jsx

@@ -0,0 +1,123 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { hasProp, getListeners } from '../../../_util/props-util';
+import MonthTable from './MonthTable';
+
+function goYear(direction) {
+  this.changeYear(direction);
+}
+
+function noop() {}
+
+const MonthPanel = {
+  name: 'MonthPanel',
+  mixins: [BaseMixin],
+  props: {
+    value: PropTypes.any,
+    defaultValue: PropTypes.any,
+    selectedValue: PropTypes.any,
+    cellRender: PropTypes.any,
+    contentRender: PropTypes.any,
+    locale: PropTypes.any,
+    rootPrefixCls: PropTypes.string,
+    // onChange: PropTypes.func,
+    disabledDate: PropTypes.func,
+    // onSelect: PropTypes.func,
+    renderFooter: PropTypes.func,
+    changeYear: PropTypes.func.def(noop),
+  },
+
+  data() {
+    const { value, defaultValue } = this;
+    // bind methods
+    this.nextYear = goYear.bind(this, 1);
+    this.previousYear = goYear.bind(this, -1);
+    return {
+      sValue: value || defaultValue,
+    };
+  },
+  watch: {
+    value(val) {
+      this.setState({
+        sValue: val,
+      });
+    },
+  },
+  methods: {
+    setAndSelectValue(value) {
+      this.setValue(value);
+      this.__emit('select', value);
+    },
+
+    setValue(value) {
+      if (hasProp(this, 'value')) {
+        this.setState({
+          sValue: value,
+        });
+      }
+    },
+  },
+
+  render() {
+    const {
+      sValue,
+      cellRender,
+      contentRender,
+      locale,
+      rootPrefixCls,
+      disabledDate,
+      renderFooter,
+      selectedValue,
+    } = this;
+    const year = sValue.year();
+    const prefixCls = `${rootPrefixCls}-month-panel`;
+
+    const footer = renderFooter && renderFooter('month');
+    return (
+      <div class={prefixCls}>
+        <div>
+          <div class={`${prefixCls}-header`}>
+            <a
+              class={`${prefixCls}-prev-year-btn`}
+              role="button"
+              onClick={this.previousYear}
+              title={locale.previousYear}
+            />
+
+            <a
+              class={`${prefixCls}-year-select`}
+              role="button"
+              onClick={getListeners(this).yearPanelShow || noop}
+              title={locale.yearSelect}
+            >
+              <span class={`${prefixCls}-year-select-content`}>{year}</span>
+              <span class={`${prefixCls}-year-select-arrow`}>x</span>
+            </a>
+
+            <a
+              class={`${prefixCls}-next-year-btn`}
+              role="button"
+              onClick={this.nextYear}
+              title={locale.nextYear}
+            />
+          </div>
+          <div class={`${prefixCls}-body`}>
+            <MonthTable
+              disabledDate={disabledDate}
+              onSelect={this.setAndSelectValue}
+              locale={locale}
+              value={sValue}
+              selectedValue={selectedValue}
+              cellRender={cellRender}
+              contentRender={contentRender}
+              prefixCls={prefixCls}
+            />
+          </div>
+          {footer && <div class={`${prefixCls}-footer`}>{footer}</div>}
+        </div>
+      </div>
+    );
+  },
+};
+
+export default MonthPanel;

package/src/components/vc-calendar/src/month/MonthTable.jsx

@@ -0,0 +1,138 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { getTodayTime, getMonthName } from '../util/index';
+
+const ROW = 4;
+const COL = 3;
+
+function noop() {}
+
+const MonthTable = {
+  name: 'MonthTable',
+  mixins: [BaseMixin],
+  props: {
+    cellRender: PropTypes.func,
+    prefixCls: PropTypes.string,
+    value: PropTypes.object,
+    selectedValue: PropTypes.object,
+    locale: PropTypes.any,
+    contentRender: PropTypes.any,
+    disabledDate: PropTypes.func,
+  },
+  data() {
+    return {
+      sValue: this.value,
+    };
+  },
+  watch: {
+    value(val) {
+      this.setState({
+        sValue: val,
+      });
+    },
+  },
+  methods: {
+    setAndSelectValue(value) {
+      this.setState({
+        sValue: value,
+      });
+      this.__emit('select', value);
+    },
+    chooseMonth(month) {
+      const next = this.sValue.clone();
+      next.month(month);
+      this.setAndSelectValue(next);
+    },
+    months() {
+      const value = this.sValue;
+      const current = value.clone();
+      const months = [];
+      let index = 0;
+      for (let rowIndex = 0; rowIndex < ROW; rowIndex++) {
+        months[rowIndex] = [];
+        for (let colIndex = 0; colIndex < COL; colIndex++) {
+          current.month(index);
+          const content = getMonthName(current);
+          months[rowIndex][colIndex] = {
+            value: index,
+            content,
+            title: content,
+          };
+          index++;
+        }
+      }
+      return months;
+    },
+  },
+
+  render() {
+    const props = this.$props;
+    const value = this.sValue;
+    const { selectedValue } = props;
+    const today = getTodayTime(value);
+    const months = this.months();
+    const { prefixCls, locale, contentRender, cellRender, disabledDate } = props;
+
+    // 只有当 selectedValue 存在且与当前面板年份相同时，才显示选中状态
+    const hasSelectedValue = selectedValue && selectedValue.year() === value.year();
+    const selectedMonth = hasSelectedValue ? selectedValue.month() : -1;
+
+    const monthsEls = months.map((month, index) => {
+      const tds = month.map(monthData => {
+        let disabled = false;
+        if (disabledDate) {
+          const testValue = value.clone();
+          testValue.month(monthData.value);
+          disabled = disabledDate(testValue);
+        }
+        const classNameMap = {
+          [`${prefixCls}-cell`]: 1,
+          [`${prefixCls}-cell-disabled`]: disabled,
+          [`${prefixCls}-selected-cell`]: monthData.value === selectedMonth,
+          [`${prefixCls}-current-cell`]:
+            today.year() === value.year() && monthData.value === today.month(),
+        };
+        let cellEl;
+        if (cellRender) {
+          const currentValue = value.clone();
+          currentValue.month(monthData.value);
+          cellEl = cellRender(currentValue, locale);
+        } else {
+          let content;
+          if (contentRender) {
+            const currentValue = value.clone();
+            currentValue.month(monthData.value);
+            content = contentRender(currentValue, locale);
+          } else {
+            content = monthData.content;
+          }
+          cellEl = <a class={`${prefixCls}-month`}>{content}</a>;
+        }
+        return (
+          <td
+            role="gridcell"
+            key={monthData.value}
+            onClick={disabled ? noop : () => this.chooseMonth(monthData.value)}
+            title={monthData.title}
+            class={classNameMap}
+          >
+            {cellEl}
+          </td>
+        );
+      });
+      return (
+        <tr key={index} role="row">
+          {tds}
+        </tr>
+      );
+    });
+
+    return (
+      <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+        <tbody class={`${prefixCls}-tbody`}>{monthsEls}</tbody>
+      </table>
+    );
+  },
+};
+
+export default MonthTable;

package/src/components/vc-calendar/src/picker/placements.js

@@ -0,0 +1,35 @@
+const autoAdjustOverflow = {
+  adjustX: 1,
+  adjustY: 1,
+};
+
+const targetOffset = [0, 0];
+
+const placements = {
+  bottomLeft: {
+    points: ['tl', 'bl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 4],
+    targetOffset,
+  },
+  bottomRight: {
+    points: ['tr', 'br'],
+    overflow: autoAdjustOverflow,
+    offset: [0, 4],
+    targetOffset,
+  },
+  topRight: {
+    points: ['br', 'tr'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -4],
+    targetOffset,
+  },
+  topLeft: {
+    points: ['bl', 'tl'],
+    overflow: autoAdjustOverflow,
+    offset: [0, -4],
+    targetOffset,
+  },
+};
+
+export default placements;

package/src/components/vc-calendar/src/range-calendar/CalendarPart.jsx

@@ -0,0 +1,171 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { getOptionProps, getComponentFromProp, getListeners } from '../../../_util/props-util';
+import { cloneElement } from '../../../_util/vnode';
+import CalendarHeader from '../calendar/CalendarHeader';
+import DateTable from '../date/DateTable';
+import DateInput from '../date/DateInput';
+import { getTimeConfig } from '../util/index';
+function noop() {}
+const CalendarPart = {
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string,
+    value: PropTypes.any,
+    hoverValue: PropTypes.any,
+    selectedValue: PropTypes.any,
+    direction: PropTypes.any,
+    locale: PropTypes.any,
+    showDateInput: PropTypes.bool,
+    showTimePicker: PropTypes.bool,
+    showWeekNumber: PropTypes.bool,
+    format: PropTypes.any,
+    placeholder: PropTypes.any,
+    disabledDate: PropTypes.any,
+    timePicker: PropTypes.any,
+    disabledTime: PropTypes.any,
+    disabledMonth: PropTypes.any,
+    mode: PropTypes.any,
+    // onInputSelect: PropTypes.func,
+    timePickerDisabledTime: PropTypes.object,
+    enableNext: PropTypes.any,
+    enablePrev: PropTypes.any,
+    clearIcon: PropTypes.any,
+    dateRender: PropTypes.func,
+    inputMode: PropTypes.string,
+    inputReadOnly: PropTypes.bool,
+  },
+  render() {
+    const { $props: props } = this;
+    const {
+      prefixCls,
+      value,
+      hoverValue,
+      selectedValue,
+      mode,
+      direction,
+      locale,
+      format,
+      placeholder,
+      disabledDate,
+      timePicker,
+      disabledTime,
+      timePickerDisabledTime,
+      showTimePicker,
+      enablePrev,
+      enableNext,
+      disabledMonth,
+      showDateInput,
+      dateRender,
+      showWeekNumber,
+      showClear,
+      inputMode,
+      inputReadOnly,
+    } = props;
+    const clearIcon = getComponentFromProp(this, 'clearIcon');
+    const {
+      inputChange = noop,
+      inputSelect = noop,
+      valueChange = noop,
+      panelChange = noop,
+      select = noop,
+      dayHover = noop,
+    } = getListeners(this);
+    const shouldShowTimePicker = showTimePicker && timePicker;
+    const disabledTimeConfig =
+      shouldShowTimePicker && disabledTime ? getTimeConfig(selectedValue, disabledTime) : null;
+    const rangeClassName = `${prefixCls}-range`;
+    const newProps = {
+      locale,
+      value,
+      prefixCls,
+      showTimePicker,
+    };
+    const index = direction === 'left' ? 0 : 1;
+    let timePickerEle = null;
+    if (shouldShowTimePicker) {
+      const timePickerProps = getOptionProps(timePicker);
+      timePickerEle = cloneElement(timePicker, {
+        props: {
+          showHour: true,
+          showMinute: true,
+          showSecond: true,
+          ...timePickerProps,
+          ...disabledTimeConfig,
+          ...timePickerDisabledTime,
+          defaultOpenValue: value,
+          value: selectedValue[index],
+        },
+        on: {
+          change: inputChange,
+        },
+      });
+    }
+
+    const dateInputElement = showDateInput && (
+      <DateInput
+        format={format}
+        locale={locale}
+        prefixCls={prefixCls}
+        timePicker={timePicker}
+        disabledDate={disabledDate}
+        placeholder={placeholder}
+        disabledTime={disabledTime}
+        value={value}
+        showClear={showClear || false}
+        selectedValue={selectedValue[index]}
+        onChange={inputChange}
+        onSelect={inputSelect}
+        clearIcon={clearIcon}
+        inputMode={inputMode}
+        inputReadOnly={inputReadOnly}
+      />
+    );
+    const headerProps = {
+      props: {
+        ...newProps,
+        mode,
+        enableNext,
+        enablePrev,
+        disabledMonth,
+        selectedValue: selectedValue[index],
+      },
+      on: {
+        valueChange,
+        panelChange,
+      },
+    };
+    const tableProps = {
+      props: {
+        ...newProps,
+        hoverValue,
+        selectedValue,
+        dateRender,
+        disabledDate,
+        showWeekNumber,
+      },
+      on: {
+        select,
+        dayHover,
+      },
+    };
+    return (
+      <div class={`${rangeClassName}-part ${rangeClassName}-${direction}`}>
+        {dateInputElement}
+        <div style={{ outline: 'none' }}>
+          <CalendarHeader {...headerProps} />
+          {showTimePicker ? (
+            <div class={`${prefixCls}-time-picker`}>
+              <div class={`${prefixCls}-time-picker-panel`}>{timePickerEle}</div>
+            </div>
+          ) : null}
+          <div class={`${prefixCls}-body`}>
+            <DateTable {...tableProps} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+};
+
+export default CalendarPart;