带有 Vue 和 Moment.js 的日期范围选择器组件 - vue-time-date-range-picker

带有 Vue 和 Moment.js 的日期范围选择器组件 - vue-time-date-range-picker
插件名称 vue-time-date-range-picker
版本号 v1.4.0
发布时间 2021年6月10日
插件作者 limbara

vue-time-date-range-picker

具有预定义范围(如本月和去年)的可自定义日期和时间范围选择器组件。

它使用moment.js库进行翻译。

安装和下载:

# NPM
$ npm i vue-time-date-range-picker --save

使用

1. 导入并注册日期范围选择器组件。

import DatePicker, { CalendarDialog } from 'vue-time-date-range-picker/dist/vdprDatePicker';
export default {
  components: {
    DatePicker,
    CalendarDIalog
  }
}

2. 将组件添加到模板并定义初始日期范围。

<date-picker :dateInput="dateInput" :initialDates="dates1" />
export default {
  components: {
    DatePicker
  },
  data() {
    return {
      dateInput: {
        placeholder: "Select Date"
      },
      dates1: [new Date("2020 08 01 00:00"), new Date("2020 08 03 23:59")]
    };
  }
};

3. Datepicker 组件的可用道具。

initialDates: {
  type: Array,
  validator: PropsValidator.isValidInitialDate,
  default() {
    return [];
  },
},
inline: {
  type: Boolean,
  default: false,
},
language: {
  type: String,
  default: 'en',
},
format: {
  type: String,
  default: 'DD/MM/YYYY HH:mm',
},
sameDateFormat: {
  type: Object,
  validator: PropsValidator.isValidSameDateFormat,
  default() {
    return {
      from: 'DD/MM/YYYY, HH:mm',
      to: 'HH:mm',
    };
  },
},
dateInput: {
  type: Object,
  default() {
    return {};
  },
},
disabledDates: Object,
showHelperButtons: Boolean,
helperButtons: Array,
calendarDateInput: Object,
calendarTimeInput: Object,
switchButtonLabel: String,
switchButtonInitial: Boolean,
applyButtonLabel: String,
isMondayFirst: Boolean,

4. CalendarDialog 的可用道具。

inline: {
  type: Boolean,
  default: false,
},
initialDates: {
  type: Array,
  validator: PropsValidator.isValidInitialDate,
  default() {
    return [];
  },
},
language: {
  type: String,
  default: 'en',
},
disabledDates: {
  type: Object,
  validator: PropsValidator.isValidDisabledDates,
  default() {
    return {};
  },
},
showHelperButtons: {
  type: Boolean,
  default: true,
},
helperButtons: {
  type: Array,
  validator: PropsValidator.isValidHelperButtons,
  default() {
    return [];
  },
},
timeInput: {
  type: Object,
  default() {
    return {
      inputClass: null,
      readonly: false,
      step: 60, // in minutes
    };
  },
},
dateInput: {
  type: Object,
  default() {
    return {
      labelStarts: 'Starts',
      labelEnds: 'Ends',
      inputClass: null,
      format: 'DD/MM/YYYY',
      readonly: false,
    };
  },
},
switchButtonLabel: {
  type: String,
  default: 'All Days',
},
switchButtonInitial: {
  type: Boolean,
  default: false,
},
applyButtonLabel: {
  type: String,
  default: 'Apply',
},
isMondayFirst: {
  type: Boolean,
  default: false,
},

5. 事件处理程序。

<date-picker
  :showHelperButtons="showHelperButtons"
  :dateInput="dateInput"
  :disabledDates="disabledDates"
  @date-applied="dateApplied"
  @on-prev-calendar="onPrevCalendar"
  @on-next-calendar="onNextCalendar"
  @datepicker-opened="datepickerOpened"
  @datepicker-closed="datepickerClosed"
  @select-date="selectDate"
  @select-disabled-date="selectDisabledDate"
/>
export default {
  components: {
    DatePicker
  },
  data() {
    return {
      dateInput: {
        placeholder: "Select Date"
      },
      showHelperButtons: true,
      events: [],
      disabledDates: {
        to: new Date(new Date().setDate(1))
      }
    };
  },
  methods: {
    dateApplied(date1, date2) {
      this.events.push(
        new Event("date-applied", `${date1.toString()} - ${date2.toString()}`)
      );
    },
    onPrevCalendar() {
      this.events.push(new Event("on-prev-calendar", ""));
    },
    onNextCalendar() {
      this.events.push(new Event("on-next-calendar", ""));
    },
    datepickerOpened() {
      this.events.push(new Event("datepicker-opened", ""));
    },
    datepickerClosed() {
      this.events.push(new Event("datepicker-closed", ""));
    },
    selectDate(date1, date2) {
      this.events.push(
        new Event("select-date", `${date1.toString()} - ${date2.toString()}`)
      );
    },
    selectDisabledDate(date) {
      this.events.push(new Event("select-disabled-date", date.toString()));
    },
    clearEvents() {
      const date = new Date();
      this.events = this.events.filter(
        event => date.getTime() < event.time.getTime() + 5000
      );
    }
  },
  mounted() {
    setInterval(this.clearEvents, 1000);
  }
};

变更日志:

v1.4.0 (06/21/2021)

  • 添加功能重置按钮