@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/date-picker/generate/moment.js

@@ -0,0 +1,357 @@
+/**
+ * Moment.js 适配器
+ * 实现 GenerateConfig 接口，用于与 moment.js 集成
+ */
+
+import * as moment from 'moment';
+import interopDefault from '../../_util/interopDefault';
+
+const momentInstance = interopDefault(moment);
+
+/**
+ * 获取 moment 实例，处理 ES Module 兼容
+ * @param {any} value - 输入值
+ * @param {string} [format] - 格式字符串
+ * @returns {moment.Moment} moment 实例
+ */
+function toMoment(value, format) {
+  if (momentInstance.isMoment(value)) {
+    return value;
+  }
+  if (value === undefined || value === null) {
+    return momentInstance();
+  }
+  if (format) {
+    return momentInstance(value, format);
+  }
+  return momentInstance(value);
+}
+
+/**
+ * Moment.js GenerateConfig 实现
+ * @type {import('./index').GenerateConfig}
+ */
+const momentGenerateConfig = {
+  // ====================== 获取信息 ======================
+  getNow() {
+    return momentInstance();
+  },
+
+  getYear(date) {
+    return toMoment(date).year();
+  },
+
+  getMonth(date) {
+    return toMoment(date).month();
+  },
+
+  getDate(date) {
+    return toMoment(date).date();
+  },
+
+  getHour(date) {
+    return toMoment(date).hour();
+  },
+
+  getMinute(date) {
+    return toMoment(date).minute();
+  },
+
+  getSecond(date) {
+    return toMoment(date).second();
+  },
+
+  getWeekDay(date) {
+    return toMoment(date).day();
+  },
+
+  getWeek(date) {
+    return toMoment(date).week();
+  },
+
+  getQuarter(date) {
+    return toMoment(date).quarter();
+  },
+
+  // ====================== 修改日期 ======================
+  addYear(date, diff) {
+    return toMoment(date)
+      .clone()
+      .add(diff, 'year');
+  },
+
+  addMonth(date, diff) {
+    return toMoment(date)
+      .clone()
+      .add(diff, 'month');
+  },
+
+  addDate(date, diff) {
+    return toMoment(date)
+      .clone()
+      .add(diff, 'day');
+  },
+
+  setYear(date, year) {
+    return toMoment(date)
+      .clone()
+      .year(year);
+  },
+
+  setMonth(date, month) {
+    // 注意: moment 的 month 是 0-11
+    return toMoment(date)
+      .clone()
+      .month(month);
+  },
+
+  setDate(date, num) {
+    return toMoment(date)
+      .clone()
+      .date(num);
+  },
+
+  setHour(date, hour) {
+    return toMoment(date)
+      .clone()
+      .hour(hour);
+  },
+
+  setMinute(date, minute) {
+    return toMoment(date)
+      .clone()
+      .minute(minute);
+  },
+
+  setSecond(date, second) {
+    return toMoment(date)
+      .clone()
+      .second(second);
+  },
+
+  // ====================== 比较 ======================
+  isAfter(date1, date2) {
+    return toMoment(date1).isAfter(toMoment(date2));
+  },
+
+  isBefore(date1, date2) {
+    return toMoment(date1).isBefore(toMoment(date2));
+  },
+
+  isSame(date1, date2, type = 'day') {
+    return toMoment(date1).isSame(toMoment(date2), type);
+  },
+
+  isSameYear(date1, date2) {
+    return toMoment(date1).isSame(toMoment(date2), 'year');
+  },
+
+  isSameMonth(date1, date2) {
+    return toMoment(date1).isSame(toMoment(date2), 'month');
+  },
+
+  isSameDate(date1, date2) {
+    return toMoment(date1).isSame(toMoment(date2), 'day');
+  },
+
+  isSameWeek(date1, date2) {
+    return toMoment(date1).isSame(toMoment(date2), 'week');
+  },
+
+  // ====================== 验证 ======================
+  isValidate(date) {
+    return toMoment(date).isValid();
+  },
+
+  isDateType(value) {
+    return momentInstance.isMoment(value);
+  },
+
+  // ====================== 转换 ======================
+  toDate(value, format) {
+    if (momentInstance.isMoment(value)) {
+      return value;
+    }
+    if (value === null || value === undefined) {
+      return null;
+    }
+    if (format) {
+      return momentInstance(value, format);
+    }
+    return momentInstance(value);
+  },
+
+  toString(date, format) {
+    if (!date) {
+      return '';
+    }
+    const m = toMoment(date);
+    if (!m.isValid()) {
+      return '';
+    }
+    if (typeof format === 'function') {
+      return format(m);
+    }
+    return m.format(format);
+  },
+
+  clone(date) {
+    return toMoment(date).clone();
+  },
+
+  // ====================== 范围操作 ======================
+  getStartOfMonth(date) {
+    return toMoment(date)
+      .clone()
+      .startOf('month');
+  },
+
+  getEndOfMonth(date) {
+    return toMoment(date)
+      .clone()
+      .endOf('month');
+  },
+
+  getStartOfYear(date) {
+    return toMoment(date)
+      .clone()
+      .startOf('year');
+  },
+
+  getEndOfYear(date) {
+    return toMoment(date)
+      .clone()
+      .endOf('year');
+  },
+
+  getStartOfWeek(date) {
+    return toMoment(date)
+      .clone()
+      .startOf('week');
+  },
+
+  getEndOfWeek(date) {
+    return toMoment(date)
+      .clone()
+      .endOf('week');
+  },
+
+  getStartOfDay(date) {
+    return toMoment(date)
+      .clone()
+      .startOf('day');
+  },
+
+  getEndOfDay(date) {
+    return toMoment(date)
+      .clone()
+      .endOf('day');
+  },
+
+  // ====================== 国际化 ======================
+  locale: {
+    /**
+     * 获取一周的第一天
+     * @param {string} locale - 语言代码
+     * @returns {number} 0-6 (0=Sunday)
+     */
+    getWeekFirstDay(locale) {
+      const m = locale ? momentInstance().locale(locale) : momentInstance();
+      return m.localeData().firstDayOfWeek();
+    },
+
+    /**
+     * 获取一周的第一个日期
+     * @param {string} locale - 语言代码
+     * @param {moment.Moment} date - 日期
+     * @returns {moment.Moment} 一周的第一天
+     */
+    getWeekFirstDate(locale, date) {
+      const m = toMoment(date);
+      if (locale) {
+        m.locale(locale);
+      }
+      return m.clone().startOf('week');
+    },
+
+    /**
+     * 获取周数
+     * @param {string} locale - 语言代码
+     * @param {moment.Moment} date - 日期
+     * @returns {number} 周数
+     */
+    getWeek(locale, date) {
+      const m = toMoment(date);
+      if (locale) {
+        m.locale(locale);
+      }
+      return m.week();
+    },
+
+    /**
+     * 格式化日期
+     * @param {string} locale - 语言代码
+     * @param {moment.Moment} date - 日期
+     * @param {string} format - 格式字符串
+     * @returns {string} 格式化后的字符串
+     */
+    format(locale, date, format) {
+      const m = toMoment(date);
+      if (locale) {
+        m.locale(locale);
+      }
+      return m.format(format);
+    },
+
+    /**
+     * 解析日期字符串
+     * @param {string} locale - 语言代码
+     * @param {string} text - 日期字符串
+     * @param {string[]} formats - 格式字符串数组
+     * @returns {moment.Moment|null} 解析后的日期
+     */
+    parse(locale, text, formats) {
+      if (!text) {
+        return null;
+      }
+      const m = momentInstance(text, formats, locale, true);
+      return m.isValid() ? m : null;
+    },
+
+    /**
+     * 设置日期的 locale
+     * @param {moment.Moment} date - 日期
+     * @param {string} locale - 语言代码
+     * @returns {moment.Moment} 设置 locale 后的日期
+     */
+    setLocale(date, locale) {
+      const m = toMoment(date);
+      if (locale) {
+        m.locale(locale);
+      }
+      return m;
+    },
+
+    /**
+     * 获取短月份名称列表
+     * @param {string} locale - 语言代码
+     * @returns {string[]} 月份名称数组
+     */
+    getShortMonths(locale) {
+      const m = locale ? momentInstance().locale(locale) : momentInstance();
+      return m.localeData().monthsShort();
+    },
+
+    /**
+     * 获取短星期名称列表
+     * @param {string} locale - 语言代码
+     * @returns {string[]} 星期名称数组
+     */
+    getShortWeekDays(locale) {
+      const m = locale ? momentInstance().locale(locale) : momentInstance();
+      return m.localeData().weekdaysMin();
+    },
+  },
+};
+
+export default momentGenerateConfig;

package/src/components/date-picker/index.js

@@ -0,0 +1,37 @@
+import VcCalendar from '../vc-calendar';
+import MonthCalendar from '../vc-calendar/src/MonthCalendar';
+import createPicker from './createPicker';
+import wrapPicker from './wrapPicker';
+import RangePicker from './RangePicker';
+import WeekPicker from './WeekPicker';
+import { DatePickerProps, MonthPickerProps, WeekPickerProps, RangePickerProps } from './interface';
+import Base from '../base';
+
+const DatePicker = wrapPicker(
+  { ...createPicker(VcCalendar, DatePickerProps()), name: 'ADatePicker' },
+  DatePickerProps(),
+  'date',
+);
+
+const MonthPicker = wrapPicker(
+  { ...createPicker(MonthCalendar, MonthPickerProps()), name: 'AMonthPicker' },
+  MonthPickerProps(),
+  'month',
+);
+
+Object.assign(DatePicker, {
+  RangePicker: wrapPicker(RangePicker, RangePickerProps(), 'date'),
+  MonthPicker,
+  WeekPicker: wrapPicker(WeekPicker, WeekPickerProps(), 'week'),
+});
+
+/* istanbul ignore next */
+DatePicker.install = function(Vue) {
+  Vue.use(Base);
+  Vue.component(DatePicker.name, DatePicker);
+  Vue.component(DatePicker.RangePicker.name, DatePicker.RangePicker);
+  Vue.component(DatePicker.MonthPicker.name, DatePicker.MonthPicker);
+  Vue.component(DatePicker.WeekPicker.name, DatePicker.WeekPicker);
+};
+
+export default DatePicker;

package/src/components/date-picker/interface.js

@@ -0,0 +1,172 @@
+// import { TimePickerProps } from '../time-picker'
+import PropTypes from '../_util/vue-types';
+import { TimesType, TimeType } from '../_util/moment-util';
+
+export const PickerProps = () => ({
+  name: PropTypes.string,
+  transitionName: PropTypes.string,
+  prefixCls: PropTypes.string,
+  inputPrefixCls: PropTypes.string,
+  format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
+  disabled: PropTypes.bool,
+  allowClear: PropTypes.bool,
+  suffixIcon: PropTypes.any,
+  popupStyle: PropTypes.object,
+  dropdownClassName: PropTypes.string,
+  locale: PropTypes.any,
+  localeCode: PropTypes.string,
+  size: PropTypes.oneOf(['large', 'small', 'default']),
+  getCalendarContainer: PropTypes.func,
+  open: PropTypes.bool,
+  // onOpenChange: PropTypes.(status: bool) => void,
+  disabledDate: PropTypes.func,
+  showToday: PropTypes.bool,
+  dateRender: PropTypes.any, // (current: moment.Moment, today: moment.Moment) => React.ReactNode,
+  pickerClass: PropTypes.string,
+  pickerInputClass: PropTypes.string,
+  timePicker: PropTypes.any,
+  autoFocus: PropTypes.bool,
+  tagPrefixCls: PropTypes.string,
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  align: PropTypes.object.def(() => ({})),
+  inputReadOnly: PropTypes.bool,
+  valueFormat: PropTypes.string,
+});
+
+export const SinglePickerProps = () => ({
+  value: TimeType,
+  defaultValue: TimeType,
+  defaultPickerValue: TimeType,
+  renderExtraFooter: PropTypes.any,
+  placeholder: PropTypes.string,
+  // onChange?: (date: moment.Moment, dateString: string) => void;
+});
+
+export const DatePickerProps = () => ({
+  ...PickerProps(),
+  ...SinglePickerProps(),
+  showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+  open: PropTypes.bool,
+  disabledTime: PropTypes.func,
+  // onOpenChange?: (status: bool) => void;
+  // onOk?: (selectedTime: moment.Moment) => void;
+  mode: PropTypes.oneOf(['time', 'date', 'month', 'year', 'decade']),
+});
+
+export const MonthPickerProps = () => ({
+  ...PickerProps(),
+  ...SinglePickerProps(),
+  placeholder: PropTypes.string,
+  monthCellContentRender: PropTypes.func,
+});
+// export const RangePickerPresetRange = PropTypes.oneOfType([TimesType, PropTypes.func])
+
+/**
+ * 预设日期项定义
+ * @typedef {Object} PresetDate
+ * @property {string|VNode} label - 显示标签
+ * @property {Array|Function} value - 预设值或返回预设值的函数
+ */
+
+/**
+ * 弹出位置类型
+ * @type {Array<string>}
+ */
+export const DatePickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'];
+
+/**
+ * 状态类型
+ * @type {Array<string>}
+ */
+export const DatePickerStatuses = ['error', 'warning', 'success', 'validating'];
+
+/**
+ * 选择器类型
+ * @type {Array<string>}
+ */
+export const PickerModes = ['date', 'week', 'month', 'quarter', 'year'];
+
+export const RangePickerProps = () => ({
+  ...PickerProps(),
+  tagPrefixCls: PropTypes.string,
+  value: TimesType,
+  defaultValue: TimesType,
+  defaultPickerValue: TimesType,
+  timePicker: PropTypes.any,
+  // onChange?: (dates: TimesType, dateStrings: [string, string]) => void;
+  // onCalendarChange?: (dates: TimesType, dateStrings: [string, string]) => void;
+  // onOk?: (selectedTime: moment.Moment) => void;
+  showTime: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
+  ranges: PropTypes.object, // 保留向后兼容
+  placeholder: PropTypes.arrayOf(String),
+  mode: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(String)]),
+  separator: PropTypes.any,
+  disabledTime: PropTypes.func,
+  showToday: PropTypes.bool,
+  renderExtraFooter: PropTypes.any,
+  // onPanelChange?: (value?: TimesType, mode?: string | string[]) => void;
+
+  /**
+   * 选择器类型 (参考 ant-design-vue 4.x)
+   * 设置后会固定选择器模式，选择完成后直接确认，无需进一步选择日期
+   * @default 'date'
+   * @example picker="year" // 年份范围选择器
+   * @example picker="month" // 月份范围选择器
+   * @example picker="week" // 周范围选择器
+   */
+  picker: PropTypes.oneOf(PickerModes),
+
+  // ============= 新增属性 (参考 ant-design-vue-main) =============
+
+  /**
+   * 预设时间范围快捷选择
+   * 替代旧的 ranges 属性，提供更灵活的配置
+   * @example
+   * presets: [
+   *   { label: '今天', value: [moment(), moment()] },
+   *   { label: '本周', value: () => [moment().startOf('week'), moment().endOf('week')] }
+   * ]
+   */
+  presets: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.any, // 支持字符串或 VNode
+      value: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
+    }),
+  ),
+
+  /**
+   * 弹出位置
+   * @default 'bottomLeft'
+   */
+  placement: PropTypes.oneOf(DatePickerPlacements),
+
+  /**
+   * 设置校验状态
+   * 用于表单验证反馈
+   */
+  status: PropTypes.oneOf(DatePickerStatuses),
+
+  /**
+   * 是否显示边框
+   * @default true
+   */
+  bordered: PropTypes.bool.def(true),
+
+  /**
+   * 允许起始项部分为空
+   * @example allowEmpty: [true, false] // 允许起始为空，结束不能为空
+   */
+  allowEmpty: PropTypes.arrayOf(PropTypes.bool),
+});
+
+export const WeekPickerProps = () => ({
+  ...PickerProps(),
+  ...SinglePickerProps(),
+  placeholder: PropTypes.string,
+});
+
+// export interface DatePickerDecorator extends React.ClassicComponentClass<DatePickerProps> {
+//   RangePicker: React.ClassicComponentClass<RangePickerProps>;
+//   MonthPicker: React.ClassicComponentClass<MonthPickerProps>;
+//   WeekPicker: React.ClassicComponentClass<WeexPickerProps>;
+// }

package/src/components/date-picker/locale/ar_EG.js

@@ -0,0 +1,23 @@
+import CalendarLocale from '../../vc-calendar/src/locale/ar_EG';
+import TimePickerLocale from '../../time-picker/locale/ar_EG';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'اختيار التاريخ',
+    rangePlaceholder: ['البداية', 'النهاية'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+  dateFormat: 'DD-MM-YYYY',
+  monthFormat: 'MM-YYYY',
+  dateTimeFormat: 'DD-MM-YYYY HH:mm:ss',
+  weekFormat: 'wo-YYYY',
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

package/src/components/date-picker/locale/bg_BG.js

@@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/bg_BG';
+import TimePickerLocale from '../../time-picker/locale/bg_BG';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Избор на дата',
+    rangePlaceholder: ['Начална', 'Крайна'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

package/src/components/date-picker/locale/ca_ES.js

@@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/ca_ES';
+import TimePickerLocale from '../../time-picker/locale/ca_ES';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Seleccionar data',
+    rangePlaceholder: ['Data inicial', 'Data final'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

package/src/components/date-picker/locale/cs_CZ.js

@@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/cs_CZ';
+import TimePickerLocale from '../../time-picker/locale/cs_CZ';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Vybrat datum',
+    rangePlaceholder: ['Od', 'Do'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

package/src/components/date-picker/locale/da_DK.js

@@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/da_DK';
+import TimePickerLocale from '../../time-picker/locale/da_DK';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Vælg dato',
+    rangePlaceholder: ['Startdato', 'Slutdato'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json
+
+export default locale;

package/src/components/date-picker/locale/de_DE.js

@@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/de_DE';
+import TimePickerLocale from '../../time-picker/locale/de_DE';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Datum auswählen',
+    rangePlaceholder: ['Startdatum', 'Enddatum'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/issues/424
+
+export default locale;

package/src/components/date-picker/locale/el_GR.js

@@ -0,0 +1,19 @@
+import CalendarLocale from '../../vc-calendar/src/locale/el_GR';
+import TimePickerLocale from '../../time-picker/locale/el_GR';
+
+// Merge into a locale object
+const locale = {
+  lang: {
+    placeholder: 'Επιλέξτε ημερομηνία',
+    rangePlaceholder: ['Αρχική ημερομηνία', 'Τελική ημερομηνία'],
+    ...CalendarLocale,
+  },
+  timePickerLocale: {
+    ...TimePickerLocale,
+  },
+};
+
+// All settings at:
+// https://github.com/ant-design/ant-design/issues/424
+
+export default locale;