vue-time-date-range-picker

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

Version matrix

Vue.js version	Package version	Branch
2.x	1.x	version-1
3.x	2.x	`master`

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 moment

Usage

Usage within JS project

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

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

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

Usage from CDN

<head>
  <link rel="stylesheet" href="https://unpkg.com/vue-time-date-range-picker@2.1.2/dist/style.css">
</head>`
<body>
   <div id="app">
    <div>
      <div>v-model value is: {{ initialDates?.map(v => v.toString()) ?? 'empty' }}</div>
      <datepicker v-model="initialDates" @date-applied="onApply" />
    </div>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></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/vue-time-date-range-picker@2.1.2"></script>
  <script>
    const { createApp, ref } = Vue;

    createApp({
      setup() {
        const initialDates = ref(null)

        const onApply = (date1, date2) => {
          console.log(date1, date2)
        }

        return {
          initialDates,
          onApply,
        };
      },
    }).component('datepicker', vdprDatePicker.DatePicker).component('calendardialog', vdprDatePicker.CalendarDialog).mount("#app");
  </script>
</body>

Available props

Below is props that're available in DatePicker Component

** date format refer to moment **

Prop	Type	Default	Description
v-model	[Date,Date] / null		v-model binding
initial-dates	[Date, Date]		Initial value for the datepicker
inline	Boolean	false	Use datepicker inline style
language	String	en	Languange
format	String	DD/MM/YYYY HH:mm	Format for display date input
same-date-format	Object	refer below	Format for display date input if start & end date same
disabled-dates	Object	refer below	Disable certain dates
available-dates	Object	refer below	Allow only certain dates
date-input	Object		Input configuration
show-helper-buttons	Boolean		Show helper buttons
helper-buttons	[ ]Object		Custom helper button
calendar-date-input	Object	refer below	Calendar input date configuration
calendar-time-input	Object	refer below	Calendar input time configuration
switch-button-label	String		Switch Button label
switch-button-initial	Boolean		Switch Button initial value
apply-button-label	String		Apply Button Label
reset-button-label	String		Reset Button Label
is-monday-first	Boolean		Calendar start from Monday instead of Sunday

Below is props that're available in Calendar Dialog Component

Prop	Type	Default	Description
initial-dates	[Date, Date]		Initial value for the datepicker
inline	Boolean	false	Use datepicker inline style
language	String	en	Languange
disabled-dates	Object	refer below	Disable certain dates
available-dates	Object	refer below	Allow only certain dates
show-helper-buttons	Boolean	true	Show helper buttons
helper-buttons	[ ]Object	[ ]	Custom helper button
date-input	Object		Calendar input date configuration
time-input	Object		Calendar input time configuration
switch-button-label	String	All Days	Switch Button label
switch-button-initial	Boolean	false	Switch Button initial value
apply-button-label	String	Apply	Apply Button Label
reset-button-label	String	Reset	Reset Button Label
is-monday-first	Boolean	false	Calendar start from Monday (default Sunday)

Same Date Format

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

Key	Type	Default	Description
from	String	DD/MM/YYYY, HH:mm	format selected start date
to	String	HH:mm	format selected end date

Date Input

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

Key	Type	Description
inputClass	String\|Array\|Object	class for input element
refName	String	ref name for input element
name	String	attribute name
placeholder	String	attribute placeholder
id	String	atttibute id
required	Boolean	attirbute required

Disabled Dates

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

Key	Type	Description
dates	[ ]Date	disable dates matching array of Date object
from	Date	disable dates from this date
to	Date	disable dates until this date
ranges	Object	disable dates matching object of date "from" & "to"
custom	Function	disable dates with function

If accidentially both disabled dates and available dates are provided, disabled dates take priority.

Available Dates

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

Key	Type	Description
dates	[ ]Date	allow dates matching array of Date object
from	Date	allow dates from this date
to	Date	allow dates until this date
ranges	Object	allow dates matching object of date "from" & "to"
custom	Function	allow dates with function

If accidentially both disabled dates and available dates are provided, disabled dates take priority.

Helper Buttons

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

Key	Type	Description
name	String	button name
from	String	format selected start date
to	String	format selected end date

C Date Input

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

Key	Type	Default	Description
labelStarts	String	Starts	start date label
labelEnds	String	Ends	ends date label
inputClass	String\|Array\|Object		class for input element
format	String	DD/MM/YYYY	date format

C Time Input

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

Key	Type	Default	Description
inputClass	String\|Array\|Object		class for input element
readonly	Boolean	false	attribute readonly
step	Number	60	step value in minutes

Events

Below is events that're available in DatePicker Component

Event	Output	Description
date-applied	Date, Date	Dates is applied to date input. Output start & end date
on-prev-calendar		On calendar page previous
on-next-calendar		On calendar page next
datepicker-opened		Datepicker is opened
datepicker-closed		Datepicker is closed
select-date	Date, Date	A date is selected in calendar. Output start & end date
select-disabled-date	Date	A disabled date is selected in calendar
on-reset		On reset when button reset clicked

Below is events that're available in Calendar Dialog Component

Event	Output	Description
on-apply	Date, Date	Dates is applied to date input. Output start & end date
on-prev-calendar		On calendar page previous
on-next-calendar		On calendar page next
select-date	Date, Date	A date is selected in calendar. Output start & end date
select-disabled-date	Date	A disabled date is selected in calendar
on-reset		On reset when button reset clicked

Translations

** available languages refer to moment **

vue-time-date-range-picker
Release 1.0.0

Release 1.0.0

2.2.1

2.2.0

2.1.2

2.1.1

2.1.0

1.6.0

2.0.1

2.0.0

1.5.1

1.5.0

Documentation

vue-time-date-range-picker

Version matrix

Demo

Install

Usage

Available props

Same Date Format

Date Input

Disabled Dates

Available Dates

Helper Buttons

C Date Input

C Time Input

Events

Translations

Stats

Development practices

Releases

Contributors

vue-time-date-range-picker Release 1.0.0

Release 1.0.0 Toggle Dropdown 2.2.1 2.2.0 2.1.2 2.1.1 2.1.0 1.6.0 2.0.1 2.0.0 1.5.1 1.5.0

Documentation

vue-time-date-range-picker

Version matrix

Demo

Install

Usage

Available props

Same Date Format

Date Input

Disabled Dates

Available Dates

Helper Buttons

C Date Input

C Time Input

Events

Translations

Stats

Development practices

Releases

Contributors

vue-time-date-range-picker
Release 1.0.0

Release 1.0.0

2.2.1

2.2.0

2.1.2

2.1.1

2.1.0

1.6.0

2.0.1

2.0.0

1.5.1

1.5.0