@lazy-copilot/datetimepicker

@lazy-copilot/datetimepicker

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

Demo

Install

$ npm install @lazy-copilot/datetimepicker

or 

$ yarn add @lazy-copilot/datetimepicker

Register

<template>
  <date-time-picker
    @submitHandler="submitHandler"
    @cancelHandler="cancelHandler"
    :startDate="startDate"
    :endDate="endDate"
    :startTime="startTime"
    :endTime="endTime"
  />
</template>

<script>
import '@lazy-copilot/datetimepicker/dist/datetimepicker.css'
import { DateTimePicker } from "@lazy-copilot/datetimepicker";

export default {
  name: "app",
  components: {
    DateTimePicker
  },
  methods: {
    submitHandler: function(data) {
      console.log("data: ", data);
    },
    cancelHandler: function() {
      console.log("close");
    }
  },
  data: function() {
    return {
      startTime: {
        hh: "05",
        mm: "23",
        A: "AM"
      },
      endTime: {
        hh: "11",
        mm: "21",
        A: "PM"
      },
      startDate: new Date("2018-12-13"),
      endDate: new Date("2018-12-16")
    };
  }
}
</script>

Remark

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

Reference

• vue2-timepicker