Versatile Datetime Picker For Bulma – bulma-calendar

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