@giliweb/datetimerangepicker NPM

@giliweb/datetimerangepicker

RWD friendly date+time picker for Vue. Supports date, datetime and time modes, and disabling dates.

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)

thumb

DateTimePicker.vue

Install

$ npm install @giliweb/datetimepicker

or 

$ yarn add @giliweb/datetimepicker

Props and @Event

Basically we initialize the dateTimePicker component by given props, the common use case is to reassign date and time to a data.

And we get the updated value by vue @event @onChange="data=$event".

Props

Name	Data Type	Example	Description
startDate	Date	`new Date()`
endDate	Date	above
singleDate	Boolean	true	Range/Single selection, default `false`

Event

Name	Data Type	Example	Description
onChange	function	`()=>{}`

Usage

<template>
  <date-time-picker
    :startDate = "startDate"          //optional
    :endDate = "endDate"              //optional
    :singleDate = "true"              //optional, default false
    @onChange = "onChange"            //optional
  />
</template>

<script>
import '@giliweb/datetimerangepicker/dist/datetimepicker.css'
import { DateTimePicker } from "@giliweb/datetimerangepicker";

export default {
  name: "app",
  components: {
    DateTimePicker
  },
  methods: {
    onChange: function(data) {
      console.log("data: ", data);
    }
  },
  data: function() {
    return {
      startDate: new Date("2018-12-13T00:03"),
      endDate: new Date("2018-12-16T23:29")
    };
  }
}
</script>

Sub-Components

Selecting Date and Time got so many different scenario, and there is no silver bullet, no such single component fullfill all usecases.

And our solution is decompositing dateTimePicker.vue to four components.

thumb

To See more example, please checkout ./demo/src/App.vue.

import { DateTimePicker } from "@giliweb/datetimerangepicker";
import { DateTimePickerModal } from "@giliweb/datetimerangepicker";
import { DatePicker } from "@giliweb/datetimerangepicker";
import { TimePicker } from "@giliweb/datetimerangepicker";