@wangxinowo/vue-datepicker-next 1.0.0

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

@@ -0,0 +1,261 @@
+import PropTypes from '../../../_util/vue-types';
+import { getOptionProps, getListeners } from '../../../_util/props-util';
+import cx from 'classnames';
+import DateConstants from './DateConstants';
+import { getTitleString, getTodayTime } from '../util/';
+function noop() {}
+function isSameDay(one, two) {
+  return one && two && one.isSame(two, 'day');
+}
+
+function beforeCurrentMonthYear(current, today) {
+  if (current.year() < today.year()) {
+    return 1;
+  }
+  return current.year() === today.year() && current.month() < today.month();
+}
+
+function afterCurrentMonthYear(current, today) {
+  if (current.year() > today.year()) {
+    return 1;
+  }
+  return current.year() === today.year() && current.month() > today.month();
+}
+
+function getIdFromDate(date) {
+  return `rc-calendar-${date.year()}-${date.month()}-${date.date()}`;
+}
+
+const DateTBody = {
+  props: {
+    contentRender: PropTypes.func,
+    dateRender: PropTypes.func,
+    disabledDate: PropTypes.func,
+    prefixCls: PropTypes.string,
+    selectedValue: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
+    value: PropTypes.object,
+    hoverValue: PropTypes.any.def([]),
+    showWeekNumber: PropTypes.bool,
+  },
+
+  render() {
+    const props = getOptionProps(this);
+    const {
+      contentRender,
+      prefixCls,
+      selectedValue,
+      value,
+      showWeekNumber,
+      dateRender,
+      disabledDate,
+      hoverValue,
+    } = props;
+    const { select = noop, dayHover = noop } = getListeners(this);
+    let iIndex;
+    let jIndex;
+    let current;
+    const dateTable = [];
+    const today = getTodayTime(value);
+    const cellClass = `${prefixCls}-cell`;
+    const weekNumberCellClass = `${prefixCls}-week-number-cell`;
+    const dateClass = `${prefixCls}-date`;
+    const todayClass = `${prefixCls}-today`;
+    const selectedClass = `${prefixCls}-selected-day`;
+    const selectedDateClass = `${prefixCls}-selected-date`; // do not move with mouse operation
+    const selectedStartDateClass = `${prefixCls}-selected-start-date`;
+    const selectedEndDateClass = `${prefixCls}-selected-end-date`;
+    const inRangeClass = `${prefixCls}-in-range-cell`;
+    const lastMonthDayClass = `${prefixCls}-last-month-cell`;
+    const nextMonthDayClass = `${prefixCls}-next-month-btn-day`;
+    const disabledClass = `${prefixCls}-disabled-cell`;
+    const firstDisableClass = `${prefixCls}-disabled-cell-first-of-row`;
+    const lastDisableClass = `${prefixCls}-disabled-cell-last-of-row`;
+    const lastDayOfMonthClass = `${prefixCls}-last-day-of-month`;
+    const month1 = value.clone();
+    month1.date(1);
+    const day = month1.day();
+    const lastMonthDiffDay = (day + 7 - value.localeData().firstDayOfWeek()) % 7;
+    // calculate last month
+    const lastMonth1 = month1.clone();
+    lastMonth1.add(0 - lastMonthDiffDay, 'days');
+    let passed = 0;
+    for (iIndex = 0; iIndex < DateConstants.DATE_ROW_COUNT; iIndex++) {
+      for (jIndex = 0; jIndex < DateConstants.DATE_COL_COUNT; jIndex++) {
+        current = lastMonth1;
+        if (passed) {
+          current = current.clone();
+          current.add(passed, 'days');
+        }
+        dateTable.push(current);
+        passed++;
+      }
+    }
+    const tableHtml = [];
+    passed = 0;
+
+    for (iIndex = 0; iIndex < DateConstants.DATE_ROW_COUNT; iIndex++) {
+      let isCurrentWeek;
+      let weekNumberCell;
+      let isActiveWeek = false;
+      const dateCells = [];
+      if (showWeekNumber) {
+        weekNumberCell = (
+          <td key={`week-${dateTable[passed].week()}`} role="gridcell" class={weekNumberCellClass}>
+            {dateTable[passed].week()}
+          </td>
+        );
+      }
+      for (jIndex = 0; jIndex < DateConstants.DATE_COL_COUNT; jIndex++) {
+        let next = null;
+        let last = null;
+        current = dateTable[passed];
+        if (jIndex < DateConstants.DATE_COL_COUNT - 1) {
+          next = dateTable[passed + 1];
+        }
+        if (jIndex > 0) {
+          last = dateTable[passed - 1];
+        }
+        let cls = cellClass;
+        let disabled = false;
+        let selected = false;
+
+        if (isSameDay(current, today)) {
+          cls += ` ${todayClass}`;
+          isCurrentWeek = true;
+        }
+
+        const isBeforeCurrentMonthYear = beforeCurrentMonthYear(current, value);
+        const isAfterCurrentMonthYear = afterCurrentMonthYear(current, value);
+
+        if (selectedValue && Array.isArray(selectedValue)) {
+          const rangeValue = hoverValue.length ? hoverValue : selectedValue;
+          if (!isBeforeCurrentMonthYear && !isAfterCurrentMonthYear) {
+            const startValue = rangeValue[0];
+            const endValue = rangeValue[1];
+            if (startValue) {
+              if (isSameDay(current, startValue)) {
+                selected = true;
+                isActiveWeek = true;
+                cls += ` ${selectedStartDateClass}`;
+              }
+            }
+            if (startValue || endValue) {
+              if (isSameDay(current, endValue)) {
+                selected = true;
+                isActiveWeek = true;
+                cls += ` ${selectedEndDateClass}`;
+              } else if (
+                (startValue === null || startValue === undefined) &&
+                current.isBefore(endValue, 'day')
+              ) {
+                cls += ` ${inRangeClass}`;
+              } else if (
+                (endValue === null || endValue === undefined) &&
+                current.isAfter(startValue, 'day')
+              ) {
+                cls += ` ${inRangeClass}`;
+              } else if (current.isAfter(startValue, 'day') && current.isBefore(endValue, 'day')) {
+                cls += ` ${inRangeClass}`;
+              }
+            }
+          }
+        } else if (isSameDay(current, value)) {
+          // keyboard change value, highlight works
+          selected = true;
+          isActiveWeek = true;
+        }
+
+        if (isSameDay(current, selectedValue)) {
+          cls += ` ${selectedDateClass}`;
+        }
+
+        if (isBeforeCurrentMonthYear) {
+          cls += ` ${lastMonthDayClass}`;
+        }
+        if (isAfterCurrentMonthYear) {
+          cls += ` ${nextMonthDayClass}`;
+        }
+
+        if (
+          current
+            .clone()
+            .endOf('month')
+            .date() === current.date()
+        ) {
+          cls += ` ${lastDayOfMonthClass}`;
+        }
+
+        if (disabledDate) {
+          if (disabledDate(current, value)) {
+            disabled = true;
+
+            if (!last || !disabledDate(last, value)) {
+              cls += ` ${firstDisableClass}`;
+            }
+
+            if (!next || !disabledDate(next, value)) {
+              cls += ` ${lastDisableClass}`;
+            }
+          }
+        }
+
+        if (selected) {
+          cls += ` ${selectedClass}`;
+        }
+
+        if (disabled) {
+          cls += ` ${disabledClass}`;
+        }
+
+        let dateHtml;
+        if (dateRender) {
+          dateHtml = dateRender(current, value);
+        } else {
+          const content = contentRender ? contentRender(current, value) : current.date();
+          dateHtml = (
+            <div
+              key={getIdFromDate(current)}
+              class={dateClass}
+              aria-selected={selected}
+              aria-disabled={disabled}
+            >
+              {content}
+            </div>
+          );
+        }
+
+        dateCells.push(
+          <td
+            key={passed}
+            onClick={disabled ? noop : select.bind(null, current)}
+            onMouseenter={disabled ? noop : dayHover.bind(null, current)}
+            role="gridcell"
+            title={getTitleString(current)}
+            class={cls}
+          >
+            {dateHtml}
+          </td>,
+        );
+
+        passed++;
+      }
+
+      tableHtml.push(
+        <tr
+          key={iIndex}
+          role="row"
+          class={cx({
+            [`${prefixCls}-current-week`]: isCurrentWeek,
+            [`${prefixCls}-active-week`]: isActiveWeek,
+          })}
+        >
+          {weekNumberCell}
+          {dateCells}
+        </tr>,
+      );
+    }
+    return <tbody class={`${prefixCls}-tbody`}>{tableHtml}</tbody>;
+  },
+};
+
+export default DateTBody;

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

@@ -0,0 +1,49 @@
+import DateConstants from './DateConstants';
+import moment from 'moment';
+
+export default {
+  functional: true,
+  render(createElement, context) {
+    const { props } = context;
+    const value = props.value;
+    const localeData = value.localeData();
+    const prefixCls = props.prefixCls;
+    const veryShortWeekdays = [];
+    const weekDays = [];
+    const firstDayOfWeek = localeData.firstDayOfWeek();
+    let showWeekNumberEl;
+    const now = moment();
+    for (let dateColIndex = 0; dateColIndex < DateConstants.DATE_COL_COUNT; dateColIndex++) {
+      const index = (firstDayOfWeek + dateColIndex) % DateConstants.DATE_COL_COUNT;
+      now.day(index);
+      veryShortWeekdays[dateColIndex] = localeData.weekdaysMin(now);
+      weekDays[dateColIndex] = localeData.weekdaysShort(now);
+    }
+
+    if (props.showWeekNumber) {
+      showWeekNumberEl = (
+        <th
+          role="columnheader"
+          class={`${prefixCls}-column-header ${prefixCls}-week-number-header`}
+        >
+          <span class={`${prefixCls}-column-header-inner`}>x</span>
+        </th>
+      );
+    }
+    const weekDaysEls = weekDays.map((day, xindex) => {
+      return (
+        <th key={xindex} role="columnheader" title={day} class={`${prefixCls}-column-header`}>
+          <span class={`${prefixCls}-column-header-inner`}>{veryShortWeekdays[xindex]}</span>
+        </th>
+      );
+    });
+    return (
+      <thead>
+        <tr role="row">
+          {showWeekNumberEl}
+          {weekDaysEls}
+        </tr>
+      </thead>
+    );
+  },
+};

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

@@ -0,0 +1,20 @@
+import DateTHead from './DateTHead';
+import DateTBody from './DateTBody';
+
+export default {
+  functional: true,
+  render(createElement, context) {
+    const { props, listeners = {} } = context;
+    const prefixCls = props.prefixCls;
+    const bodyProps = {
+      props,
+      on: listeners,
+    };
+    return (
+      <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+        <DateTHead {...bodyProps} />
+        <DateTBody {...bodyProps} />
+      </table>
+    );
+  },
+};

package/src/components/vc-calendar/src/decade/DecadePanel.jsx

@@ -0,0 +1,131 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+const ROW = 4;
+const COL = 3;
+function noop() {}
+function goYear(direction) {
+  const next = this.sValue.clone();
+  next.add(direction, 'years');
+  this.setState({
+    sValue: next,
+  });
+}
+
+function chooseDecade(year, event) {
+  const next = this.sValue.clone();
+  next.year(year);
+  next.month(this.sValue.month());
+  this.__emit('select', next);
+  event.preventDefault();
+}
+
+export default {
+  mixins: [BaseMixin],
+  props: {
+    locale: PropTypes.object,
+    value: PropTypes.object,
+    defaultValue: PropTypes.object,
+    rootPrefixCls: PropTypes.string,
+    renderFooter: PropTypes.func,
+  },
+  data() {
+    this.nextCentury = goYear.bind(this, 100);
+    this.previousCentury = goYear.bind(this, -100);
+    return {
+      sValue: this.value || this.defaultValue,
+    };
+  },
+  watch: {
+    value(val) {
+      this.sValue = val;
+    },
+  },
+  render() {
+    const value = this.sValue;
+    const { locale, renderFooter } = this.$props;
+    const currentYear = value.year();
+    const startYear = parseInt(currentYear / 100, 10) * 100;
+    const preYear = startYear - 10;
+    const endYear = startYear + 99;
+    const decades = [];
+    let index = 0;
+    const prefixCls = `${this.rootPrefixCls}-decade-panel`;
+
+    for (let rowIndex = 0; rowIndex < ROW; rowIndex++) {
+      decades[rowIndex] = [];
+      for (let colIndex = 0; colIndex < COL; colIndex++) {
+        const startDecade = preYear + index * 10;
+        const endDecade = preYear + index * 10 + 9;
+        decades[rowIndex][colIndex] = {
+          startDecade,
+          endDecade,
+        };
+        index++;
+      }
+    }
+
+    const footer = renderFooter && renderFooter('decade');
+    const decadesEls = decades.map((row, decadeIndex) => {
+      const tds = row.map(decadeData => {
+        const dStartDecade = decadeData.startDecade;
+        const dEndDecade = decadeData.endDecade;
+        const isLast = dStartDecade < startYear;
+        const isNext = dEndDecade > endYear;
+        const classNameMap = {
+          [`${prefixCls}-cell`]: 1,
+          [`${prefixCls}-selected-cell`]: dStartDecade <= currentYear && currentYear <= dEndDecade,
+          [`${prefixCls}-last-century-cell`]: isLast,
+          [`${prefixCls}-next-century-cell`]: isNext,
+        };
+        const content = `${dStartDecade}-${dEndDecade}`;
+        let clickHandler = noop;
+        if (isLast) {
+          clickHandler = this.previousCentury;
+        } else if (isNext) {
+          clickHandler = this.nextCentury;
+        } else {
+          clickHandler = chooseDecade.bind(this, dStartDecade);
+        }
+        return (
+          <td key={dStartDecade} onClick={clickHandler} role="gridcell" class={classNameMap}>
+            <a class={`${prefixCls}-decade`}>{content}</a>
+          </td>
+        );
+      });
+      return (
+        <tr key={decadeIndex} role="row">
+          {tds}
+        </tr>
+      );
+    });
+
+    return (
+      <div class={prefixCls}>
+        <div class={`${prefixCls}-header`}>
+          <a
+            class={`${prefixCls}-prev-century-btn`}
+            role="button"
+            onClick={this.previousCentury}
+            title={locale.previousCentury}
+          />
+
+          <div class={`${prefixCls}-century`}>
+            {startYear}-{endYear}
+          </div>
+          <a
+            class={`${prefixCls}-next-century-btn`}
+            role="button"
+            onClick={this.nextCentury}
+            title={locale.nextCentury}
+          />
+        </div>
+        <div class={`${prefixCls}-body`}>
+          <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+            <tbody class={`${prefixCls}-tbody`}>{decadesEls}</tbody>
+          </table>
+        </div>
+        {footer && <div class={`${prefixCls}-footer`}>{footer}</div>}
+      </div>
+    );
+  },
+};

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

@@ -0,0 +1,134 @@
+import PropTypes from '../../../_util/vue-types';
+import BaseMixin from '../../../_util/BaseMixin';
+import { getMonthName } from '../util';
+
+const CalendarHeader = {
+  name: 'CalendarHeader',
+  mixins: [BaseMixin],
+  props: {
+    value: PropTypes.object,
+    locale: PropTypes.object,
+    yearSelectOffset: PropTypes.number.def(10),
+    yearSelectTotal: PropTypes.number.def(20),
+    // onValueChange: PropTypes.func,
+    // onTypeChange: PropTypes.func,
+    Select: PropTypes.object,
+    prefixCls: PropTypes.string,
+    type: PropTypes.string,
+    showTypeSwitch: PropTypes.bool,
+    headerComponents: PropTypes.array,
+  },
+  methods: {
+    onYearChange(year) {
+      const newValue = this.value.clone();
+      newValue.year(parseInt(year, 10));
+      this.__emit('valueChange', newValue);
+    },
+
+    onMonthChange(month) {
+      const newValue = this.value.clone();
+      newValue.month(parseInt(month, 10));
+      this.__emit('valueChange', newValue);
+    },
+
+    yearSelectElement(year) {
+      const { yearSelectOffset, yearSelectTotal, prefixCls, Select } = this;
+      const start = year - yearSelectOffset;
+      const end = start + yearSelectTotal;
+
+      const options = [];
+      for (let index = start; index < end; index++) {
+        options.push(<Select.Option key={`${index}`}>{index}</Select.Option>);
+      }
+      return (
+        <Select
+          class={`${prefixCls}-header-year-select`}
+          onChange={this.onYearChange}
+          dropdownStyle={{ zIndex: 2000 }}
+          dropdownMenuStyle={{ maxHeight: '250px', overflow: 'auto', fontSize: '12px' }}
+          optionLabelProp="children"
+          value={String(year)}
+          showSearch={false}
+        >
+          {options}
+        </Select>
+      );
+    },
+
+    monthSelectElement(month) {
+      const { value, Select, prefixCls } = this;
+      const t = value.clone();
+      const options = [];
+
+      for (let index = 0; index < 12; index++) {
+        t.month(index);
+        options.push(<Select.Option key={`${index}`}>{getMonthName(t)}</Select.Option>);
+      }
+
+      return (
+        <Select
+          class={`${prefixCls}-header-month-select`}
+          dropdownStyle={{ zIndex: 2000 }}
+          dropdownMenuStyle={{
+            maxHeight: '250px',
+            overflow: 'auto',
+            overflowX: 'hidden',
+            fontSize: '12px',
+          }}
+          optionLabelProp="children"
+          value={String(month)}
+          showSearch={false}
+          onChange={this.onMonthChange}
+        >
+          {options}
+        </Select>
+      );
+    },
+
+    changeTypeToDate() {
+      this.__emit('typeChange', 'date');
+    },
+
+    changeTypeToMonth() {
+      this.__emit('typeChange', 'month');
+    },
+  },
+
+  render() {
+    const { value, locale, prefixCls, type, showTypeSwitch, headerComponents } = this;
+    const year = value.year();
+    const month = value.month();
+    const yearSelect = this.yearSelectElement(year);
+    const monthSelect = type === 'month' ? null : this.monthSelectElement(month);
+    const switchCls = `${prefixCls}-header-switcher`;
+    const typeSwitcher = showTypeSwitch ? (
+      <span class={switchCls}>
+        {type === 'date' ? (
+          <span class={`${switchCls}-focus`}>{locale.month}</span>
+        ) : (
+          <span onClick={this.changeTypeToDate} class={`${switchCls}-normal`}>
+            {locale.month}
+          </span>
+        )}
+        {type === 'month' ? (
+          <span class={`${switchCls}-focus`}>{locale.year}</span>
+        ) : (
+          <span onClick={this.changeTypeToMonth} class={`${switchCls}-normal`}>
+            {locale.year}
+          </span>
+        )}
+      </span>
+    ) : null;
+
+    return (
+      <div class={`${prefixCls}-header`}>
+        {typeSwitcher}
+        {monthSelect}
+        {yearSelect}
+        {headerComponents}
+      </div>
+    );
+  },
+};
+
+export default CalendarHeader;

package/src/components/vc-calendar/src/index.js

@@ -0,0 +1,3 @@
+import Calendar from './Calendar';
+
+export default Calendar;

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

@@ -0,0 +1,27 @@
+export default {
+  today: 'اليوم',
+  now: 'الأن',
+  backToToday: 'العودة إلى اليوم',
+  ok: 'تأكيد',
+  clear: 'مسح',
+  month: 'الشهر',
+  year: 'السنة',
+  timeSelect: 'اختيار الوقت',
+  dateSelect: 'اختيار التاريخ',
+  monthSelect: 'اختيار الشهر',
+  yearSelect: 'اختيار السنة',
+  decadeSelect: 'اختيار العقد',
+  yearFormat: 'YYYY',
+  dateFormat: 'M/D/YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'M/D/YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'الشهر السابق (PageUp)',
+  nextMonth: 'الشهر التالى(PageDown)',
+  previousYear: 'العام السابق (Control + left)',
+  nextYear: 'العام التالى (Control + right)',
+  previousDecade: 'العقد السابق',
+  nextDecade: 'العقد التالى',
+  previousCentury: 'القرن السابق',
+  nextCentury: 'القرن التالى',
+};

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

@@ -0,0 +1,27 @@
+export default {
+  today: 'Днес',
+  now: 'Сега',
+  backToToday: 'Към днес',
+  ok: 'Добре',
+  clear: 'Изчистване',
+  month: 'Месец',
+  year: 'Година',
+  timeSelect: 'Избор на час',
+  dateSelect: 'Избор на дата',
+  monthSelect: 'Избор на месец',
+  yearSelect: 'Избор на година',
+  decadeSelect: 'Десетилетие',
+  yearFormat: 'YYYY',
+  dateFormat: 'D M YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'D M YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'Предишен месец (PageUp)',
+  nextMonth: 'Следващ месец (PageDown)',
+  previousYear: 'Последна година (Control + left)',
+  nextYear: 'Следваща година (Control + right)',
+  previousDecade: 'Предишно десетилетие',
+  nextDecade: 'Следващо десетилетие',
+  previousCentury: 'Последен век',
+  nextCentury: 'Следващ век',
+};

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

@@ -0,0 +1,27 @@
+export default {
+  today: 'Avui',
+  now: 'Ara',
+  backToToday: 'Tornar a avui',
+  ok: 'Acceptar',
+  clear: 'Netejar',
+  month: 'Mes',
+  year: 'Any',
+  timeSelect: 'Seleccionar hora',
+  dateSelect: 'Seleccionar data',
+  monthSelect: 'Escollir un mes',
+  yearSelect: 'Escollir un any',
+  decadeSelect: 'Escollir una dècada',
+  yearFormat: 'YYYY',
+  dateFormat: 'D/M/YYYY',
+  dayFormat: 'D',
+  dateTimeFormat: 'D/M/YYYY HH:mm:ss',
+  monthBeforeYear: true,
+  previousMonth: 'Mes anterior (PageUp)',
+  nextMonth: 'Mes següent (PageDown)',
+  previousYear: 'Any anterior (Control + left)',
+  nextYear: 'Mes següent (Control + right)',
+  previousDecade: 'Dècada anterior',
+  nextDecade: 'Dècada següent',
+  previousCentury: 'Segle anterior',
+  nextCentury: 'Segle següent',
+};