vue-time-date-range-picker

A Vue Component to pick a ranged datetime in calendar. Built alongside Vue 2.x . This datepicker utilize moment for translations.

• Demo
• Install
• Usage
• Props
• Events
• Translations

Demo

codepen demo : https://codepen.io/limbara/pen/ZEQxoZZ sandbox demo : https://codesandbox.io/s/example-vue-time-date-range-picker-byw7g

Clone the repo and run 'npm install && npm run serve' for local demo

Install

npm i vue-time-date-range-picker

Usage

Usage within JS project

import DatePicker, { CalendarDialog } from 'vue-time-date-range-picker/dist/vdprDatePicker'

export default {
  //...
  components: {
    DatePicker,
    CalendarDIalog
  }
  //...
}

You can use CalendarDialog Component if you want to implement your own input element

Usage from CDN

<div id="app">
  <datepicker>datepicker>
div>
<script src="https://unpkg.com/vue">script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.27.0/moment-with-locales.min.js">script>
<script src="https://unpkg.com/[email protected]/dist/vdprDatePicker.js">script>
<script>
const app = new Vue({
  el: '#app',
  components: {
    'datepicker' : vdprDatePicker.default,
    'calendar-dialog' : vdprDatePicker.CalendarDialog
  }
})
script>

Available props

Below is props that're available in DatePicker Component

** date format refer to moment **

Below is props that're available in Calendar Dialog Component

Same Date Format

Below is values that're available for props "same-date-format"

Date Input

Below is values that're available for props "date-input"

Disabled Dates

Below is values that're available for props "disabled-dates"

Helper Buttons

Below is values that're available for props "helper-buttons"

C Date Input

Below is values that're available for props "calendar-date-input" or "date-input" for Calendar Dialog component

C Time Input

Below is values that're available for props "calendar-time-input" or "time-input" for Calendar Dialog component

Events

Below is events that're available in DatePicker Component

Below is events that're available in Calendar Dialog Component

Translations

** available languages refer to moment **