[Vue] my dream datetimepicker

@lazy-copilot/datetimepicker

Demo

https://vue-datetimepicker.github.io/package/

The DateTimePicker components are designed to fit all date and time selection, including features of :

• Drop down Date&Time Picker.
• Date Range /Single Date selection.
• Time selection
• Time display in different format (Reform by vue2-timepicker)

Sub-Components

Selecting Date and Time got so many different scenario, our solution is decomposing dateTimePicker.vue to four individual sub-components.

@lazy-copilot/datetimepicker

Case study

Before we start development, having a glance of existed module is a must. In Vue world, the first library I think of is Vuetify, they got two componentes time-picker and day-picker, but we really want picking up time and date inside a UI component. There are another two very helpful components I am going to mentions next:

1- vue2-timepicker by phoenixwong

Thanks to phoenixwong creating such useful Vue component for picking up time in a format friendly way. A dropdown time picker (hour|minute|second) for Vue 2.x, with flexible time format support.

phoenixwong vue2-timepicker

The timepicker of our Vue DTPicker is a modified version of phoenixwong’s open source.

2- vue-hotel-datepicker by krystalcampioni

vue-hotel-datepicker does inspired us a lot about appearance, interaction of DTPicker. However there is only one feature we really need but they are not supported, it is selecting time.

vue-hotel-datepicker

If you are working on Room reservation project, I am sure that you would love it.

Reference:

— https://www.npmjs.com/package/@lazy-copilot/datetimepicker

— https://github.com/vue-datetimepicker/package

— https://github.com/phoenixwong/vue2-timepicker

— https://github.com/krystalcampioni/vue-hotel-datepicker