@wangxinowo/vue-datepicker-next 1.0.0

package/src/components/date-picker/style/status.less

@@ -0,0 +1,94 @@
+// Status Styles for DatePicker
+// 日期选择器状态样式
+
+// Status colors mixin - using fade for shadow color since outline variables don't exist
+.calendar-picker-status-color(@status-color) {
+  border-color: @status-color;
+
+  &:hover {
+    border-color: @status-color;
+  }
+
+  &:focus,
+  &.@{calendar-prefix-cls}-picker-focused {
+    border-color: @status-color;
+    box-shadow: 0 0 0 @outline-width fade(@status-color, 20%);
+    outline: 0;
+  }
+}
+
+.@{calendar-prefix-cls}-picker {
+  // Error status
+  &-status-error {
+    .@{calendar-prefix-cls}-picker-input {
+      .calendar-picker-status-color(@error-color);
+    }
+  }
+
+  // Warning status
+  &-status-warning {
+    .@{calendar-prefix-cls}-picker-input {
+      .calendar-picker-status-color(@warning-color);
+    }
+  }
+
+  // Success status
+  &-status-success {
+    .@{calendar-prefix-cls}-picker-input {
+      .calendar-picker-status-color(@success-color);
+    }
+  }
+
+  // Validating status
+  &-status-validating {
+    .@{calendar-prefix-cls}-picker-input {
+      .calendar-picker-status-color(@primary-color);
+    }
+  }
+
+  // Has feedback icon
+  &-has-feedback {
+    .@{calendar-prefix-cls}-picker-input {
+      padding-right: 30px;
+    }
+  }
+
+  // Borderless style
+  &-borderless {
+    .@{calendar-prefix-cls}-picker-input {
+      border-color: transparent !important;
+      background-color: transparent !important;
+      box-shadow: none !important;
+    }
+  }
+}
+
+// Range picker specific status styles
+// 范围选择器特定状态样式
+.@{calendar-prefix-cls}-range-picker {
+  &.@{calendar-prefix-cls}-picker-status-error {
+    background-color: transparent;
+
+    .@{calendar-prefix-cls}-range-picker-input {
+      border-color: @error-color;
+
+      &:focus {
+        border-color: @error-color;
+        box-shadow: 0 0 0 @outline-width fade(@error-color, 20%);
+      }
+    }
+  }
+
+  &.@{calendar-prefix-cls}-picker-status-warning {
+    background-color: transparent;
+
+    .@{calendar-prefix-cls}-range-picker-input {
+      border-color: @warning-color;
+
+      &:focus {
+        border-color: @warning-color;
+        box-shadow: 0 0 0 @outline-width fade(@warning-color, 20%);
+      }
+    }
+  }
+}

package/src/components/date-picker/style/transitions.less

@@ -0,0 +1,176 @@
+// Transitions and Animations for DatePicker
+// 日期选择器动画和过渡效果
+
+// Animation timing functions
+@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
+@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
+
+// Picker input transitions
+.@{calendar-prefix-cls}-picker {
+  // Focus ring transition
+  &-input {
+    transition: border-color 0.3s @ease-out-quint, box-shadow 0.3s @ease-out-quint;
+  }
+
+  // Clear icon fade
+  &-clear {
+    transition: color 0.3s, opacity 0.3s;
+  }
+
+  // Icon transition
+  &-icon {
+    transition: color 0.3s;
+  }
+}
+
+// Calendar panel transitions
+.@{calendar-prefix-cls} {
+  // Date cell hover transition
+  &-date {
+    transition: background 0.2s @ease-out-quint, color 0.2s @ease-out-quint,
+      border-color 0.2s @ease-out-quint;
+  }
+
+  // Cell transitions
+  &-cell {
+    transition: background 0.2s;
+  }
+
+  // In-range highlight transition
+  &-in-range-cell {
+    &::before {
+      transition: background 0.2s @ease-out-quint;
+    }
+  }
+
+  // Header button transitions
+  &-header {
+    a {
+      transition: color 0.3s;
+    }
+  }
+
+  // Panel slide transition
+  &-body {
+    transition: opacity 0.3s;
+  }
+}
+
+// Range picker specific transitions
+.@{calendar-prefix-cls}-range {
+  // Panel transitions
+  &-part {
+    transition: opacity 0.3s;
+  }
+
+  // Time picker overlay
+  .@{calendar-timepicker-prefix-cls} {
+    transition: opacity 0.3s, visibility 0.3s;
+  }
+}
+
+// Active bar animation
+.@{calendar-prefix-cls}-range-picker-active-bar {
+  transition: left 0.3s @ease-in-out-circ, width 0.3s @ease-in-out-circ, opacity 0.2s;
+}
+
+// Input focus animations
+.@{calendar-prefix-cls}-range-picker-input {
+  transition: color 0.3s, background-color 0.3s;
+
+  &-active {
+    animation: rangePickerInputPulse 0.3s @ease-out-quint;
+  }
+}
+
+// Preset panel transitions
+.@{calendar-prefix-cls}-presets {
+  &-item {
+    transition: color 0.2s, background-color 0.2s;
+  }
+}
+
+// Status transitions
+.@{calendar-prefix-cls}-picker-status-error,
+.@{calendar-prefix-cls}-picker-status-warning,
+.@{calendar-prefix-cls}-picker-status-success {
+  .@{calendar-prefix-cls}-picker-input {
+    transition: border-color 0.3s, box-shadow 0.3s;
+  }
+}
+
+// Popup slide animations
+.@{calendar-prefix-cls}-picker-container {
+  // Slide up enter
+  &.slide-up-enter,
+  &.slide-up-appear {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    animation-timing-function: @ease-out-quint;
+    opacity: 0;
+    animation-play-state: paused;
+  }
+
+  &.slide-up-enter.slide-up-enter-active,
+  &.slide-up-appear.slide-up-appear-active {
+    animation-play-state: running;
+  }
+
+  // Slide up leave
+  &.slide-up-leave {
+    animation-duration: 0.2s;
+    animation-fill-mode: both;
+    animation-timing-function: @ease-in-out-circ;
+    animation-play-state: paused;
+  }
+
+  &.slide-up-leave.slide-up-leave-active {
+    animation-play-state: running;
+  }
+}
+
+// Keyframe animations
+@keyframes rangePickerInputPulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.02);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+// Calendar fade in
+@keyframes calendarFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+// Selected date pulse
+@keyframes selectedDatePulse {
+  0% {
+    box-shadow: 0 0 0 0 fade(@primary-color, 40%);
+  }
+  70% {
+    box-shadow: 0 0 0 6px fade(@primary-color, 0%);
+  }
+  100% {
+    box-shadow: 0 0 0 0 fade(@primary-color, 0%);
+  }
+}
+
+// Apply pulse animation to newly selected dates
+.@{calendar-prefix-cls}-selected-start-date,
+.@{calendar-prefix-cls}-selected-end-date {
+  .@{calendar-prefix-cls}-date {
+    animation: selectedDatePulse 0.4s @ease-out-quint;
+  }
+}

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

@@ -0,0 +1,209 @@
+/**
+ * DatePicker 工具函数
+ * 支持日期库适配器模式
+ */
+
+import { getGenerateConfig, setGenerateConfig } from './generate';
+import momentGenerateConfig from './generate/moment';
+
+// 导出适配器管理函数
+export { getGenerateConfig, setGenerateConfig };
+
+// 默认使用 moment 适配器
+setGenerateConfig(momentGenerateConfig);
+
+/**
+ * 格式化日期
+ * @param {any} value - 日期值
+ * @param {string|string[]|function} format - 格式字符串或格式化函数
+ * @returns {string} 格式化后的日期字符串
+ */
+export function formatDate(value, format) {
+  if (!value) {
+    return '';
+  }
+  if (Array.isArray(format)) {
+    format = format[0];
+  }
+  if (typeof format === 'function') {
+    const result = format(value);
+    if (typeof result === 'string') {
+      return result;
+    } else {
+      throw new Error('The function of format does not return a string');
+    }
+  }
+
+  const config = getGenerateConfig();
+  return config.toString(value, format);
+}
+
+/**
+ * 解析日期字符串
+ * @param {string} text - 日期字符串
+ * @param {string|string[]} format - 格式字符串
+ * @returns {any} 解析后的日期对象
+ */
+export function parseDate(text, format) {
+  if (!text) {
+    return null;
+  }
+  const config = getGenerateConfig();
+  const formats = Array.isArray(format) ? format : [format];
+  return config.locale.parse('en', text, formats);
+}
+
+/**
+ * 检查值是否为有效的日期类型
+ * @param {any} value - 待检查的值
+ * @returns {boolean} 是否为日期类型
+ */
+export function isDateType(value) {
+  const config = getGenerateConfig();
+  return config.isDateType(value);
+}
+
+/**
+ * 检查日期是否有效
+ * @param {any} value - 日期值
+ * @returns {boolean} 是否有效
+ */
+export function isValidDate(value) {
+  if (!value) {
+    return false;
+  }
+  const config = getGenerateConfig();
+  return config.isValidate(value);
+}
+
+/**
+ * 获取当前日期
+ * @returns {any} 当前日期
+ */
+export function getNow() {
+  const config = getGenerateConfig();
+  return config.getNow();
+}
+
+/**
+ * 克隆日期
+ * @param {any} date - 日期值
+ * @returns {any} 克隆后的日期
+ */
+export function cloneDate(date) {
+  if (!date) {
+    return null;
+  }
+  const config = getGenerateConfig();
+  return config.clone(date);
+}
+
+/**
+ * 比较两个日期是否相同
+ * @param {any} date1 - 日期1
+ * @param {any} date2 - 日期2
+ * @param {string} type - 比较类型 (year/month/day/hour/minute/second)
+ * @returns {boolean} 是否相同
+ */
+export function isSameDate(date1, date2, type = 'day') {
+  if (!date1 || !date2) {
+    return false;
+  }
+  const config = getGenerateConfig();
+  return config.isSame(date1, date2, type);
+}
+
+/**
+ * 判断日期1是否在日期2之后
+ * @param {any} date1 - 日期1
+ * @param {any} date2 - 日期2
+ * @returns {boolean}
+ */
+export function isAfterDate(date1, date2) {
+  if (!date1 || !date2) {
+    return false;
+  }
+  const config = getGenerateConfig();
+  return config.isAfter(date1, date2);
+}
+
+/**
+ * 判断日期1是否在日期2之前
+ * @param {any} date1 - 日期1
+ * @param {any} date2 - 日期2
+ * @returns {boolean}
+ */
+export function isBeforeDate(date1, date2) {
+  if (!date1 || !date2) {
+    return false;
+  }
+  const config = getGenerateConfig();
+  return config.isBefore(date1, date2);
+}
+
+/**
+ * 转换为日期对象
+ * @param {any} value - 输入值
+ * @param {string} format - 格式字符串
+ * @returns {any} 日期对象
+ */
+export function toDate(value, format) {
+  if (!value) {
+    return null;
+  }
+  const config = getGenerateConfig();
+  return config.toDate(value, format);
+}
+
+/**
+ * 获取月份的开始日期
+ * @param {any} date - 日期
+ * @returns {any} 月份开始日期
+ */
+export function getStartOfMonth(date) {
+  const config = getGenerateConfig();
+  return config.getStartOfMonth(date);
+}
+
+/**
+ * 获取月份的结束日期
+ * @param {any} date - 日期
+ * @returns {any} 月份结束日期
+ */
+export function getEndOfMonth(date) {
+  const config = getGenerateConfig();
+  return config.getEndOfMonth(date);
+}
+
+/**
+ * 增加天数
+ * @param {any} date - 日期
+ * @param {number} days - 天数
+ * @returns {any} 新日期
+ */
+export function addDays(date, days) {
+  const config = getGenerateConfig();
+  return config.addDate(date, days);
+}
+
+/**
+ * 增加月份
+ * @param {any} date - 日期
+ * @param {number} months - 月份数
+ * @returns {any} 新日期
+ */
+export function addMonths(date, months) {
+  const config = getGenerateConfig();
+  return config.addMonth(date, months);
+}
+
+/**
+ * 增加年份
+ * @param {any} date - 日期
+ * @param {number} years - 年份数
+ * @returns {any} 新日期
+ */
+export function addYears(date, years) {
+  const config = getGenerateConfig();
+  return config.addYear(date, years);
+}