帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

Vue日期范围选择器组件

帝国模板之家 2021-06-14 网页特效 评论

组件介绍

具有预定义范围(如本月和去年)的可自定义VUE日期和时间范围选择器组件。它使用moment.js库进行翻译。

使用方法

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);
  }
};
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言