VueRangedatePicker
Date picker with range selection
Demo
https://bliblidotcom.github.io/vue-rangedate-picker/demo/
Installation
npm install --save vue-rangedate-picker
Usage
Bundler (Webpack, Rollup)
Vue
Browser
<!-- Include after Vue --><!-- Local files --> <!-- From CDN -->
Available Events
You can catch these below Events to <rangedate-picker @events="events"></rangedate-picker>
template :
-
selected
Description : function that will
$emit
when datepicker set value, this function will get parameter response :start: dateObjectStartend: dateObjectEnd
Available Props
You can pass these below props to <rangedate-picker :props="props"></rangedate-picker>
template :
-
configs
Description : -
Type : Object
Default Value :
{}
-
i18n
Description : For text translation (currently: ID/EN)
Type : String
Default Value :
'ID'
-
months
Description : Array of months name
Type : Array
Default Value :
'Januari' 'Februari' 'Maret' 'April' 'Mei' 'Juni' 'Juli''Agustus' 'September' 'Oktober' 'November' 'Desember' -
shortDays
Description : Array of days name in short
Type : Array
Default Value :
'Min' 'Sen' 'Sel' 'Rab' 'Kam' 'Jum' 'Sab' -
captions
Description : Object for text title and OK button
Type : Object
Default Value :
'title': 'Choose Dates''ok_button': 'Apply' -
format
Description : Date format
Type : String
Default Value :
'DD MMM YYYY'
-
styles
Description : -
Type : Object
Default Value :
daysWeeks: 'calendar_weeks'days: 'calendar_days'daysSelected: 'calendar_days_selected'daysInRange: 'calendar_days_in-range'firstDate: 'calendar_month_left'secondDate: 'calendar_month_right'presetRanges: 'calendar_preset-ranges' -
initRange
Description : -
Type : Object
Default Value :
null
-
startActiveMonth
Description : Month will be shown in first launch
Type : Number
Default Value :
new Date().getMonth()
-
startActiveYear
Description : Year will be shown in first launch
Type : Number
Default Value :
new Date().getFullYear()
-
presetRanges
Description : Set of objects that will shown as quick selection of daterange
Type : Object
Example Object :
{const n =const startToday = n n n + 1 0 0const endToday = n n n + 1 23 59returnlabel: presetRangeLabeli18ntodayactive: falsedateRange:start: startTodayend: endToday}Default Value :
{return// label: 'string', active: 'boolean', dateRange: {start: date, end: end}}{}{}{}{} -
compact
Description : Set to
'true'
if you want to make datepicker always shown in compact modeType : String
Default Value :
'false'
-
righttoleft
Description : Set to
'true'
if you want datepicker shown align toright
Type : String
Default Value :
'false'
Development
Launch visual tests
npm run dev
Launch Karma with coverage
npm run dev:coverage
Build
Bundle the js and css of to the dist
folder:
npm run build
Publishing
The prepublish
hook will ensure dist files are created before publishing. This
way you don't need to commit them in your repository.
# Bump the version first # It'll also commit it and create a tag npm version# Push the bumped package and tags git push --follow-tags# Ship it 🚀 npm publish