Newton's Principia Mathematica

    @giliweb/datetimerangepicker

    1.1.53 • Public • Published

    @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

    image

    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";

    Remark

    The time-picker here is a customized version of the awesome project vue2-timepicker by phoenixwong.

    Reference

    Install

    npm i @giliweb/datetimerangepicker

    DownloadsWeekly Downloads

    7

    Version

    1.1.53

    License

    ISC

    Unpacked Size

    6.97 MB

    Total Files

    37

    Last publish

    Collaborators

    • giliweb
    • ssglopes