schafo / vue-time-date-range-picker

A component for picking date & time

vue-time-date-range-picker

Version-1.x

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/YzYmdXz sandbox demo : https://codesandbox.io/s/determined-lumiere-oli22p

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

Install

npm i vue-time-date-range-picker@version-1

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 **

Prop	Type	Default	Description
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	Default	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	Default	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	Default	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	Default	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 selection

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 selection

Translations

** available languages refer to moment **