Author: | Wikiki |
---|---|
Views Total: | 1,655 views |
Official Page: | Go to website |
Last Update: | February 27, 2023 |
License: | MIT |
Preview:

Description:
A responsive, customizable, and feature-rich Date & Time picker component for Bulma framework.
Key Features:
- Supports date, time, and date range selection.
- Supports Dialog & Inline display modes.
- Multi-language.
- Custom Date & Time formats.
- Allows to set min/max/start/end dates.
- Allows you to disable specific dates.
- Also available as a Vue component.
How to use it:
1. Install and import the bulma-calendar with NPM.
# NPM $ npm i bulma-calendar --save
@import 'bulma.sass' @import "bulmaCalendar.sass" import bulmaCalendar from '~bulma-calendar/dist/js/bulma-calendar.min.js';
2. Create a normal input field on the page.
<input class="demo" />
3. Create a basic date picker.
var myCal = bulmaCalendar.attach('.demo', { // options here });
4. Create a basic time picker.
var myCal = bulmaCalendar.attach('.demo', { type: 'time' });
5. Create a basic Datetime picker.
var myCal = bulmaCalendar.attach('.demo', { type: 'datetime' });
6. Create a basic date range picker.
var myCal = bulmaCalendar.attach('.demo', { isRange: true });
7. Display the date picker on a dialog popup.
var myCal = bulmaCalendar.attach('.demo', { displayMode: 'dialog' });
8. Display the date picker as an inline calendar.
var myCal = bulmaCalendar.attach('.demo', { displayMode: 'inline' });
9. Set the language of the date picker. Defaults to ‘navigator.language’.
var myCal = bulmaCalendar.attach('.demo', { // date, time, or datetime type: undefined, // dominant color color: 'primary', // enables date range selection isRange: false, // allows the same day allowSameDayRange: true, // internationalization lang: navigator.language || 'en-US', // custom date/time/month/year formats here dateFormat: 'MM/dd/yyyy', timeFormat: 'HH:mm', navigationMonthFormat: 'MMMM', navigationYearFormat: 'yyyy', headerMonthYearFromat: 'MMMM yyyy', // dialog or inline displayMode: 'default', // allows to edit time manually editTimeManually: false, // position position: 'auto', // shows header showHeader: true, // top or bottom headerPosition: 'top', // shows footer showFooter: true, // shows buttons showButtons: true, showTodayButton: true, showClearButton: true, // custom labels here cancelLabel: 'Cancel', clearLabel: 'Clear', todayLabel: 'Today', nowLabel: 'Now', validateLabel: 'Validate', // allows to switch between months and years enableMonthSwitch: true, enableYearSwitch: true, // start/end dates // Date | String startDate: undefined, endDate: undefined, // min/max dates // Date | String minDate: null, maxDate: null, // disable dates // Date[] | String[] | Function(this, day) disabledDates: [], // disable week days // Number[] | String '1,2,3,...' disabledWeekDays: undefined, // highlighted dates // Date[] | String[] | Function(this, day) highlightedDates: [], // 0 = Sunday weekStart: 0, // start/end times // Date | String startTime: undefined, endTime: undefined, // step size minuteSteps: 5, // from/to labels labelFrom: '', labelTo: '', // closes the date picker by clicking the overlay closeOnOverlayClick: true, // closes the date picker after selection closeOnSelect: true, // toggles the date picker when clicking on the input toggleOnInputClick: true, // callbacks onReady: null, onValidate: null, // custom icons icons: { previous: '<svg viewBox="0 0 50 80" xml:space="preserve">\n <polyline fill="none" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="45.63,75.8 0.375,38.087 45.63,0.375 "/>\n </svg>', next: '<svg viewBox="0 0 50 80" xml:space="preserve">\n <polyline fill="none" stroke-width=".5em" stroke-linecap="round" stroke-linejoin="round" points="0.375,0.375 45.63,38.087 0.375,75.8 "/>\n </svg>', time: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve">\n <g>\n <path fill="currentcolor" d="M30,0C13.458,0,0,13.458,0,30s13.458,30,30,30s30-13.458,30-30S46.542,0,30,0z M30,58C14.561,58,2,45.439,2,30S14.561,2,30,2s28,12.561,28,28S45.439,58,30,58z"/>\n\t <path fill="currentcolor" d="M30,6c-0.552,0-1,0.447-1,1v23H14c-0.552,0-1,0.447-1,1s0.448,1,1,1h16c0.552,0,1-0.447,1-1V7C31,6.447,30.552,6,30,6z"/>\n </g>\n </svg>', date: '<svg version="1.1" x="0px" y="0px" viewBox="0 0 60 60" xml:space="preserve">\n <g>\n <path d="M57,4h-7V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H19V1c0-0.553-0.447-1-1-1h-7c-0.553,0-1,0.447-1,1v3H3C2.447,4,2,4.447,2,5v11v43c0,0.553,0.447,1,1,1h54c0.553,0,1-0.447,1-1V16V5C58,4.447,57.553,4,57,4z M43,2h5v3v3h-5V5V2z M12,2h5v3v3h-5V5V2z M4,6h6v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h22v3c0,0.553,0.447,1,1,1h7c0.553,0,1-0.447,1-1V6h6v9H4V6zM4,58V17h52v41H4z"/>\n <path d="M38,23h-7h-2h-7h-2h-9v9v2v7v2v9h9h2h7h2h7h2h9v-9v-2v-7v-2v-9h-9H38z M31,25h7v7h-7V25z M38,41h-7v-7h7V41z M22,34h7v7h-7V34z M22,25h7v7h-7V25z M13,25h7v7h-7V25z M13,34h7v7h-7V34z M20,50h-7v-7h7V50z M29,50h-7v-7h7V50z M38,50h-7v-7h7V50z M47,50h-7v-7h7V50z M47,41h-7v-7h7V41z M47,25v7h-7v-7H47z"/>\n </g>\n </svg>' } });
10. Destroy the calendar.
el.bulmaCalendar.destroy();
Changelog:
v6.1.19 (02/27/2023)
- Bugfix
v6.1.18 (04/07/2022)
- Fixed bug with disableDate function
- Minor Bugfixes
v6.1.17 (02/23/2022)
- Bugfixes
v6.1.16 (01/19/2022)
- Bugfix
v6.1.15 (12/04/2021)
- Bugfix
v6.1.14 (10/13/2021)
- Fixes deprecation warnings in 0.9.2
- Allows to change the weekday label
v6.1.13 (09/22/2021)
- fixing outdated usage of dateFns min and max functions in datePicker
- Localization to Croatian language is wrong and incomplete