Versatile Date and Time Picker Calendar for Bulma

Bulma extension for calendar display can be used on a page as a large calendar with appointments or as a date picker/popup window.

A responsive, customizable, and feature-rich date and time picker component of the Bulma framework.

Key Features:

  • Supports setting the date, time, and date range.
  • Supports built-in display and dialog display modes.
  • multilanguage.
  • Custom date and time formats.
  • Allows to set minimum/maximum/start/end dates.
  • Allows you to disable specific dates.
  • Also available as a Vue component.

Must Read – Date Range, Date and Time Picker JavaScript Component

How to make use of it:

1. Install and import the bulma-calendar with 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 traditional input subject on the web page.

<input class="demo" />

3. Create a primary date picker.

var myCal = bulmaCalendar.attach('.demo', {
    // options here

4. Create a primary time picker.

var myCal = bulmaCalendar.attach('.demo', {
    type: 'time'

5. Create a primary Datetime picker.

var myCal = bulmaCalendar.attach('.demo', {
    type: 'datetime'

6. Create a primary date vary 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>'

Must Read – Date and Time Picker Popup Using ngx-bootstrap Library


NameDescriptionTypeDefault value
NameDescriptionTypeDefault value
typeComponent type: date|time|datetimeStringdatetime
colorPicker dominant colorStringprimary
isRangeRange capability (start and end date/time selectionBooleanfalse
allowSameDayRangePossibility to select same date as start and end date in range modeBooleantrue
langDisplay lang (from language supported by date-fns 2.x)Stringnavigator.language || "en-US"
dateFormatDate format patternStringMM/dd/yyyy
timeFormatTime format patternStringHH:mm
displayModeDisplay mode: default|dialog|inlineStringdefault
position Stringauto
showHeaderShow/Hide header block (with current selection)Booleantrue
headerPositionHeader block position: top|bottomBooleantop
showFooterShow/Hide footer blockBooleantrue
showButtonsShow/Hide buttonsBooleantrue
showTodayButtonShow/Hide Today ButtonBooleantrue
showClearButtonShow/Hide Clear ButtonBooleantrue
cancelLabelCancel button labelStringCancel
clearLabelClear button labelStringClear
todayLabelToday button labelStringToday
nowLabelNow button labelStringNow
validateLabelValidate button labelStringValidate
enableMonthSwitchEnable/disable month switchBooleantrue
enableYearSwitchEnable/disable year switchBooleantrue
startDatePre-selected start dateDate | Stringundefined
endDatePre-selected end dateDate | Stringundefined
minDateMinimum date allowedDate | Stringnull
maxDateMaximum date allowedDate | Stringnull
disabledDatesList of disabled datesDate[] | String[] | Function(this, day)
disabledWeekDaysList of disabled week daysNumber[] | String '1,2,3,...'undefined
highlightedDatesList of highlighted datesDate[] | String[] | Function(this, day)
weekStartDefault weekstart day number (sunday by default)Integer0
startTimePre-selected start timeDate | Stringundefined
endTimePre-selected end timeDate | Stringundefined
minuteStepsSteps for minutes selectorInteger5
labelFromFrom labelString
labelToTo labelString
closeOnOverlayClickClose picker on overlay click (only for dialog display style)Booleantrue
closeOnSelectAutomatically close the datePicker when date selected (or range date selected) – not available for inline display style. If set to False then a validate button will be displayed into the footer section.Booleantrue
toggleOnInputClickAutomatically open datepicker when click into input elementBooleantrue
onReadyCallback to trigger once picker initiatedFunction
onValidateCallback for manual validation before save()Function
icons.previousPrevious button iconStringSvg content
icons.nextNext button iconStringSvg content
icons.timeTime iconStringSvg content
icons.dateDate iconStringSvg content

Versatile Datetime Picker For Bulma, bulma-calendar Plugin/Github


A Lightweight and Cross-Browser Date/Time Picker jQuery Plugin | Zebra Datepicker
Drag and Drop Scheduling Lite Support On Vue.js

See Demo And Download

Official Website(Wikiki): Click Here

This superior jQuery/javascript plugin is developed by Wikiki. For extra Advanced Usages, please go to the official website.