@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/vc-calendar/src/calendar/CalendarFooter.jsx

@@ -0,0 +1,86 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { getOptionProps, getListeners } from '../../../_util/props-util';
+import TodayButton from './TodayButton';
+import OkButton from './OkButton';
+import TimePickerButton from './TimePickerButton';
+
+const CalendarFooter = {
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string,
+    showDateInput: PropTypes.bool,
+    disabledTime: PropTypes.any,
+    timePicker: PropTypes.any,
+    selectedValue: PropTypes.any,
+    showOk: PropTypes.bool,
+    // onSelect: PropTypes.func,
+    value: PropTypes.object,
+    renderFooter: PropTypes.func,
+    defaultValue: PropTypes.object,
+    locale: PropTypes.object,
+    showToday: PropTypes.bool,
+    disabledDate: PropTypes.func,
+    showTimePicker: PropTypes.bool,
+    okDisabled: PropTypes.bool,
+    mode: PropTypes.string,
+  },
+  methods: {
+    onSelect(value) {
+      this.__emit('select', value);
+    },
+
+    getRootDOMNode() {
+      return this.$el;
+    },
+  },
+
+  render() {
+    const props = getOptionProps(this);
+    const { value, prefixCls, showOk, timePicker, renderFooter, showToday, mode } = props;
+    let footerEl = null;
+    const extraFooter = renderFooter && renderFooter(mode);
+    if (showToday || timePicker || extraFooter) {
+      const btnProps = {
+        props: {
+          ...props,
+          value,
+        },
+        on: getListeners(this),
+      };
+      let nowEl = null;
+      if (showToday) {
+        nowEl = <TodayButton key="todayButton" {...btnProps} />;
+      }
+      delete btnProps.props.value;
+      let okBtn = null;
+      if (showOk === true || (showOk !== false && !!timePicker)) {
+        okBtn = <OkButton key="okButton" {...btnProps} />;
+      }
+      let timePickerBtn = null;
+      if (timePicker) {
+        timePickerBtn = <TimePickerButton key="timePickerButton" {...btnProps} />;
+      }
+
+      let footerBtn;
+      if (nowEl || timePickerBtn || okBtn || extraFooter) {
+        footerBtn = (
+          <span class={`${prefixCls}-footer-btn`}>
+            {extraFooter}
+            {nowEl}
+            {timePickerBtn}
+            {okBtn}
+          </span>
+        );
+      }
+      const cls = {
+        [`${prefixCls}-footer`]: true,
+        [`${prefixCls}-footer-show-ok`]: !!okBtn,
+      };
+      footerEl = <div class={cls}>{footerBtn}</div>;
+    }
+    return footerEl;
+  },
+};
+
+export default CalendarFooter;

package/src/components/vc-calendar/src/calendar/CalendarHeader.jsx

@@ -0,0 +1,264 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { getOptionProps, getListeners } from '../../../_util/props-util';
+import MonthPanel from '../month/MonthPanel';
+import YearPanel from '../year/YearPanel';
+import DecadePanel from '../decade/DecadePanel';
+function noop() {}
+function goMonth(direction) {
+  const next = this.value.clone();
+  next.add(direction, 'months');
+  this.__emit('valueChange', next);
+}
+
+function goYear(direction) {
+  const next = this.value.clone();
+  next.add(direction, 'years');
+  this.__emit('valueChange', next);
+}
+
+function showIf(condition, el) {
+  return condition ? el : null;
+}
+
+const CalendarHeader = {
+  name: 'CalendarHeader',
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string,
+    value: PropTypes.object,
+    // onValueChange: PropTypes.func,
+    showTimePicker: PropTypes.bool,
+    // onPanelChange: PropTypes.func,
+    locale: PropTypes.object,
+    enablePrev: PropTypes.any.def(1),
+    enableNext: PropTypes.any.def(1),
+    disabledMonth: PropTypes.func,
+    mode: PropTypes.any,
+    selectedValue: PropTypes.object,
+    monthCellRender: PropTypes.func,
+    monthCellContentRender: PropTypes.func,
+    renderFooter: PropTypes.func,
+  },
+  data() {
+    this.nextMonth = goMonth.bind(this, 1);
+    this.previousMonth = goMonth.bind(this, -1);
+    this.nextYear = goYear.bind(this, 1);
+    this.previousYear = goYear.bind(this, -1);
+    return {
+      yearPanelReferer: null,
+    };
+  },
+  methods: {
+    onMonthSelect(value) {
+      this.__emit('panelChange', value, 'date');
+      if (getListeners(this).monthSelect) {
+        this.__emit('monthSelect', value);
+      } else {
+        // 只有当当前不是月份选择器模式时才触发 valueChange
+        // 当 mode === 'month' 时，表示用户在月份选择器模式下直接选择月份
+        // 此时不需要触发 valueChange，因为选择已通过 panelChange 处理
+        if (this.mode !== 'month') {
+          this.__emit('valueChange', value);
+        }
+      }
+    },
+
+    onYearSelect(value) {
+      const referer = this.yearPanelReferer;
+      this.setState({ yearPanelReferer: null });
+      this.__emit('panelChange', value, referer);
+      // 只有当从其他面板进入年份选择时才触发 valueChange
+      // 当 referer 为 null 时，表示用户在年份选择器模式下直接选择年份
+      // 此时不需要触发 valueChange，因为选择已通过 panelChange 处理
+      // 触发 valueChange 会导致面板显示值被重置
+      if (referer) {
+        this.__emit('valueChange', value);
+      }
+    },
+
+    onDecadeSelect(value) {
+      this.__emit('panelChange', value, 'year');
+      this.__emit('valueChange', value);
+    },
+
+    // 处理年份面板的十年导航变化
+    onYearValueChange(value) {
+      this.__emit('valueChange', value);
+    },
+
+    changeYear(direction) {
+      if (direction > 0) {
+        this.nextYear();
+      } else {
+        this.previousYear();
+      }
+    },
+
+    monthYearElement(showTimePicker) {
+      const props = this.$props;
+      const prefixCls = props.prefixCls;
+      const locale = props.locale;
+      const value = props.value;
+      const localeData = value.localeData();
+      const monthBeforeYear = locale.monthBeforeYear;
+      const selectClassName = `${prefixCls}-${monthBeforeYear ? 'my-select' : 'ym-select'}`;
+      const timeClassName = showTimePicker ? ` ${prefixCls}-time-status` : '';
+      const year = (
+        <a
+          class={`${prefixCls}-year-select${timeClassName}`}
+          role="button"
+          onClick={showTimePicker ? noop : () => this.showYearPanel('date')}
+          title={showTimePicker ? null : locale.yearSelect}
+        >
+          {value.format(locale.yearFormat)}
+        </a>
+      );
+      const month = (
+        <a
+          class={`${prefixCls}-month-select${timeClassName}`}
+          role="button"
+          onClick={showTimePicker ? noop : this.showMonthPanel}
+          title={showTimePicker ? null : locale.monthSelect}
+        >
+          {locale.monthFormat ? value.format(locale.monthFormat) : localeData.monthsShort(value)}
+        </a>
+      );
+      let day;
+      if (showTimePicker) {
+        day = (
+          <a class={`${prefixCls}-day-select${timeClassName}`} role="button">
+            {value.format(locale.dayFormat)}
+          </a>
+        );
+      }
+      let my = [];
+      if (monthBeforeYear) {
+        my = [month, day, year];
+      } else {
+        my = [year, month, day];
+      }
+      return <span class={selectClassName}>{my}</span>;
+    },
+
+    showMonthPanel() {
+      // null means that users' interaction doesn't change value
+      this.__emit('panelChange', null, 'month');
+    },
+
+    showYearPanel(referer) {
+      this.setState({ yearPanelReferer: referer });
+      this.__emit('panelChange', null, 'year');
+    },
+
+    showDecadePanel() {
+      this.__emit('panelChange', null, 'decade');
+    },
+  },
+
+  render() {
+    const props = getOptionProps(this);
+    const {
+      prefixCls,
+      locale,
+      mode,
+      value,
+      showTimePicker,
+      enableNext,
+      enablePrev,
+      disabledMonth,
+      renderFooter,
+      selectedValue,
+    } = props;
+
+    let panel = null;
+    if (mode === 'month') {
+      panel = (
+        <MonthPanel
+          locale={locale}
+          value={value}
+          selectedValue={selectedValue}
+          rootPrefixCls={prefixCls}
+          onSelect={this.onMonthSelect}
+          onYearPanelShow={() => this.showYearPanel('month')}
+          disabledDate={disabledMonth}
+          cellRender={props.monthCellRender}
+          contentRender={props.monthCellContentRender}
+          renderFooter={renderFooter}
+          changeYear={this.changeYear}
+        />
+      );
+    }
+    if (mode === 'year') {
+      panel = (
+        <YearPanel
+          locale={locale}
+          value={value}
+          selectedValue={selectedValue}
+          rootPrefixCls={prefixCls}
+          onSelect={this.onYearSelect}
+          onValueChange={this.onYearValueChange}
+          onDecadePanelShow={this.showDecadePanel}
+          renderFooter={renderFooter}
+          disabledDate={disabledMonth}
+        />
+      );
+    }
+    if (mode === 'decade') {
+      panel = (
+        <DecadePanel
+          locale={locale}
+          value={value}
+          rootPrefixCls={prefixCls}
+          onSelect={this.onDecadeSelect}
+          renderFooter={renderFooter}
+        />
+      );
+    }
+
+    return (
+      <div class={`${prefixCls}-header`}>
+        <div style={{ position: 'relative' }}>
+          {showIf(
+            enablePrev && !showTimePicker,
+            <a
+              class={`${prefixCls}-prev-year-btn`}
+              role="button"
+              onClick={this.previousYear}
+              title={locale.previousYear}
+            />,
+          )}
+          {showIf(
+            enablePrev && !showTimePicker,
+            <a
+              class={`${prefixCls}-prev-month-btn`}
+              role="button"
+              onClick={this.previousMonth}
+              title={locale.previousMonth}
+            />,
+          )}
+          {this.monthYearElement(showTimePicker)}
+          {showIf(
+            enableNext && !showTimePicker,
+            <a
+              class={`${prefixCls}-next-month-btn`}
+              onClick={this.nextMonth}
+              title={locale.nextMonth}
+            />,
+          )}
+          {showIf(
+            enableNext && !showTimePicker,
+            <a
+              class={`${prefixCls}-next-year-btn`}
+              onClick={this.nextYear}
+              title={locale.nextYear}
+            />,
+          )}
+        </div>
+        {panel}
+      </div>
+    );
+  },
+};
+
+export default CalendarHeader;

package/src/components/vc-calendar/src/calendar/OkButton.jsx

@@ -0,0 +1,18 @@
+function noop() {}
+export default {
+  functional: true,
+  render(createElement, context) {
+    const { props, listeners = {} } = context;
+    const { prefixCls, locale, okDisabled } = props;
+    const { ok = noop } = listeners;
+    let className = `${prefixCls}-ok-btn`;
+    if (okDisabled) {
+      className += ` ${prefixCls}-ok-btn-disabled`;
+    }
+    return (
+      <a class={className} role="button" onClick={okDisabled ? noop : ok}>
+        {locale.ok}
+      </a>
+    );
+  },
+};

package/src/components/vc-calendar/src/calendar/TimePickerButton.jsx

@@ -0,0 +1,22 @@
+function noop() {}
+export default {
+  functional: true,
+  render(h, context) {
+    const { props, listeners = {} } = context;
+    const { prefixCls, locale, showTimePicker, timePickerDisabled } = props;
+    const { closeTimePicker = noop, openTimePicker = noop } = listeners;
+    const className = {
+      [`${prefixCls}-time-picker-btn`]: true,
+      [`${prefixCls}-time-picker-btn-disabled`]: timePickerDisabled,
+    };
+    let onClick = noop;
+    if (!timePickerDisabled) {
+      onClick = showTimePicker ? closeTimePicker : openTimePicker;
+    }
+    return (
+      <a class={className} role="button" onClick={onClick}>
+        {showTimePicker ? locale.dateSelect : locale.timeSelect}
+      </a>
+    );
+  },
+};

package/src/components/vc-calendar/src/calendar/TodayButton.jsx

@@ -0,0 +1,33 @@
+import { getTodayTimeStr, getTodayTime, isAllowedDate } from '../util/';
+function noop() {}
+export default {
+  functional: true,
+  render(createElement, context) {
+    const { props, listeners = {} } = context;
+    const {
+      prefixCls,
+      locale,
+      value,
+      timePicker,
+      disabled,
+      disabledDate,
+      // onToday,
+      text,
+    } = props;
+    const { today = noop } = listeners;
+    const localeNow = (!text && timePicker ? locale.now : text) || locale.today;
+    const disabledToday = disabledDate && !isAllowedDate(getTodayTime(value), disabledDate);
+    const isDisabled = disabledToday || disabled;
+    const disabledTodayClass = isDisabled ? `${prefixCls}-today-btn-disabled` : '';
+    return (
+      <a
+        class={`${prefixCls}-today-btn ${disabledTodayClass}`}
+        role="button"
+        onClick={isDisabled ? noop : today}
+        title={getTodayTimeStr(value)}
+      >
+        {localeNow}
+      </a>
+    );
+  },
+};

package/src/components/vc-calendar/src/date/DateConstants.js

@@ -0,0 +1,4 @@
+export default {
+  DATE_ROW_COUNT: 6,
+  DATE_COL_COUNT: 7,
+};

package/src/components/vc-calendar/src/date/DateInput.jsx

@@ -0,0 +1,226 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { getComponentFromProp } from '../../../_util/props-util';
+import moment from 'moment';
+import { formatDate } from '../util';
+import KeyCode from '../../../_util/KeyCode';
+
+let cachedSelectionStart;
+let cachedSelectionEnd;
+let dateInputInstance;
+
+const DateInput = {
+  mixins: [BaseMixin],
+  props: {
+    prefixCls: PropTypes.string,
+    timePicker: PropTypes.object,
+    value: PropTypes.object,
+    disabledTime: PropTypes.any,
+    format: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.arrayOf(PropTypes.string),
+      PropTypes.func,
+    ]),
+    locale: PropTypes.object,
+    disabledDate: PropTypes.func,
+    // onChange: PropTypes.func,
+    // onClear: PropTypes.func,
+    placeholder: PropTypes.string,
+    // onSelect: PropTypes.func,
+    selectedValue: PropTypes.object,
+    clearIcon: PropTypes.any,
+    inputMode: PropTypes.string,
+    inputReadOnly: PropTypes.bool,
+  },
+
+  data() {
+    const selectedValue = this.selectedValue;
+    return {
+      str: formatDate(selectedValue, this.format),
+      invalid: false,
+      hasFocus: false,
+    };
+  },
+  watch: {
+    selectedValue() {
+      this.setState();
+    },
+    format() {
+      this.setState();
+    },
+  },
+
+  updated() {
+    this.$nextTick(() => {
+      if (
+        dateInputInstance &&
+        this.$data.hasFocus &&
+        !this.invalid &&
+        !(cachedSelectionStart === 0 && cachedSelectionEnd === 0)
+      ) {
+        dateInputInstance.setSelectionRange(cachedSelectionStart, cachedSelectionEnd);
+      }
+    });
+  },
+  getInstance() {
+    return dateInputInstance;
+  },
+  methods: {
+    getDerivedStateFromProps(nextProps, state) {
+      let newState = {};
+      if (dateInputInstance) {
+        cachedSelectionStart = dateInputInstance.selectionStart;
+        cachedSelectionEnd = dateInputInstance.selectionEnd;
+      }
+      // when popup show, click body will call this, bug!
+      const selectedValue = nextProps.selectedValue;
+      if (!state.hasFocus) {
+        newState = {
+          str: formatDate(selectedValue, this.format),
+          invalid: false,
+        };
+      }
+      return newState;
+    },
+    onClear() {
+      this.setState({
+        str: '',
+      });
+      this.__emit('clear', null);
+    },
+    onInputChange(e) {
+      const { value: str, composing } = e.target;
+      const { str: oldStr = '' } = this;
+      if (e.isComposing || composing || oldStr === str) return;
+
+      const { disabledDate, format, selectedValue } = this.$props;
+
+      // 没有内容，合法并直接退出
+      if (!str) {
+        this.__emit('change', null);
+        this.setState({
+          invalid: false,
+          str,
+        });
+        return;
+      }
+
+      // 不合法直接退出
+      const parsed = moment(str, format, true);
+      if (!parsed.isValid()) {
+        this.setState({
+          invalid: true,
+          str,
+        });
+        return;
+      }
+      const value = this.value.clone();
+      value
+        .year(parsed.year())
+        .month(parsed.month())
+        .date(parsed.date())
+        .hour(parsed.hour())
+        .minute(parsed.minute())
+        .second(parsed.second());
+
+      if (!value || (disabledDate && disabledDate(value))) {
+        this.setState({
+          invalid: true,
+          str,
+        });
+        return;
+      }
+
+      if (selectedValue !== value || (selectedValue && value && !selectedValue.isSame(value))) {
+        this.setState({
+          invalid: false,
+          str,
+        });
+        this.__emit('change', value);
+      }
+    },
+    onFocus() {
+      this.setState({ hasFocus: true });
+    },
+    onBlur() {
+      this.setState((prevState, prevProps) => ({
+        hasFocus: false,
+        str: formatDate(prevProps.value, prevProps.format),
+      }));
+    },
+    onKeyDown(event) {
+      const { keyCode } = event;
+      const { value, disabledDate } = this.$props;
+      if (keyCode === KeyCode.ENTER) {
+        const validateDate = !disabledDate || !disabledDate(value);
+        if (validateDate) {
+          this.__emit('select', value.clone());
+        }
+        event.preventDefault();
+      }
+    },
+    getRootDOMNode() {
+      return this.$el;
+    },
+    focus() {
+      if (dateInputInstance) {
+        dateInputInstance.focus();
+      }
+    },
+    saveDateInput(dateInput) {
+      dateInputInstance = dateInput;
+    },
+  },
+
+  render() {
+    const {
+      invalid,
+      str,
+      locale,
+      prefixCls,
+      placeholder,
+      disabled,
+      showClear,
+      inputMode,
+      inputReadOnly,
+    } = this;
+    const clearIcon = getComponentFromProp(this, 'clearIcon');
+    const invalidClass = invalid ? `${prefixCls}-input-invalid` : '';
+    return (
+      <div class={`${prefixCls}-input-wrap`}>
+        <div class={`${prefixCls}-date-input-wrap`}>
+          <input
+            {...{
+              directives: [
+                {
+                  name: 'ant-ref',
+                  value: this.saveDateInput,
+                },
+                {
+                  name: 'ant-input',
+                },
+              ],
+            }}
+            class={`${prefixCls}-input ${invalidClass}`}
+            value={str}
+            disabled={disabled}
+            placeholder={placeholder}
+            onInput={this.onInputChange}
+            onKeydown={this.onKeyDown}
+            onFocus={this.onFocus}
+            onBlur={this.onBlur}
+            inputMode={inputMode}
+            readOnly={inputReadOnly}
+          />
+        </div>
+        {showClear ? (
+          <a role="button" title={locale.clear} onClick={this.onClear}>
+            {clearIcon || <span class={`${prefixCls}-clear-btn`} />}
+          </a>
+        ) : null}
+      </div>
+    );
+  },
+};
+
+export default DateInput;