Vue Baremetrics Calendar
A Vue.js wrapper for the beautiful date-range picker made by the Baremetrics team.
The Vue-Baremetrics date range picker is a simplified solution for selecting both date ranges and single dates all from a single calender view. With a revamped minimalistic redesign.
Redesigned and Wrapped for Vue.js by Divyansh Tripathi
View a demo
NPM Package
Installation
npm i --save vue2-baremetrics-calendar
Usage
Global Usage
Global Registeration via Vue.use() method.
// main.js;;;// import the plugin; VueconfigproductionTip = false; // use the pluginVue; router ;
Once registered you can use the component in its default settings with as follows:-
REMEMBER elementName is the only required prop and it should be different for each datepicker in your component
Events Emitted -
Name | Type | Output | Description |
---|---|---|---|
dateEdit |
double | [Timestamp(begin), Timestamp(end)] | Array of start date and end date |
dateEdit |
single | Timestamp | Selected date Timestamp |
Base Calendar Props
- elementName *required
[string]
- DOM object of the calendar div you're working on
- earliest_date
[date YYYY-MM-DD]
- The earliest date to show in the calendar
- latest_date
[date YYYY-MM-DD]
- The latest date to show in the calendar
- format
[object]
- Object containing formatting strings for.. you guessed it.. formatting your dates
format:input: 'MMMM D, YYYY' // Format for the input fieldsjump_month: 'MMMM' // Format for the month switcherjump_year: 'YYYY' // Format for the year switcher - days_array
[array]
- Array of the 7 strings you'd like to represent your days in the calendar
days_array: "S" "M" "T" "W" "T" "F" "S";
Single Calendar Props
- current_date
[date YYYY-MM-DD]
- The date to start the calendar on
- required
[boolean]
- Toggle if this field must have always have a valid selected date
- placeholder
[string]
- Set placeholder text (note this will only apply if the required key is set to
false
). The default will be whatever moment date format you're using. (i.e. 'M/D/YYYY')
- Set placeholder text (note this will only apply if the required key is set to
Double Calendar Props
- start_date
[date YYYY-MM-DD]
- The date to start the selection on for the calendar
- end_date
[date YYYY-MM-DD]
- The date to end the selection on for the calendar
- same_day_range
[boolean]
- Allow a range selection of a single day
- format
[preset key in format object] // see above
- The double calendar adds the
preset
key to the format object for formatting the preset dates in the preset dropdown
- The double calendar adds the
- presets
[boolean] or [object]
- If you don't want to show the preset link just set this to
false
otherwise the default is true which will just give you a basic preset of.. yep.. presets. BOOM! - Otherwise, if you want to customize it up you can include an array of preset objects. Something like:
presets:label: "Last month"start:end:label: "Last year"start:end:; - If you don't want to show the preset link just set this to