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: Simple Date and Time Selector Using Pure JavaScript | dtsel

Bulma Date and Time Picker Calendar Component

Post NameBulma Datepicker
Author NameWikiki
CategoryCalendar, Date & Time
Official PageClick Here
Publish DateAugust 6, 2021
Last UpdateJuly 17, 2023
DownloadLink Below

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 date picker.

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

4. Create a time picker.

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

5. Create a Datetime picker.

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

6. Create a 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: A Simple and Easy jQuery Date and Time Picker | jSunPicker

NameDescriptionTypeDefault value
typeComponent type: date|time|datetimeStringdatetime
colorPicker dominant colorStringprimary
isRangeRange capability (start and end date/time selectionBooleanfalse
allowSameDayRangePossibility to select the same date as the 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
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 monthly switchBooleantrue
enableYearSwitchEnable/disable the 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 weekdaysNumber[] | String '1,2,3,...'undefined
highlightedDatesList of highlighted datesDate[] | String[] | Function(this, day)
weekStartDefault week start 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 date picker when date selected (or range date selected) – not available for inline display style. If set to False then a validate button will be displayed in the footer section.Booleantrue
toggleOnInputClickAutomatically open the date picker when clicking on the input elementBooleantrue
onReadyCallback to trigger once picker initiatedFunction
onValidateCallback for manual validation before save()Function
formats.headerHeader format pattern month/yearStringLLLL yyyy
formats.navigationMonthMonth format pattern for the navigation barStringLLLL
formats.navigationYearYear format pattern for the navigation barStringyyyy
formats.selectMonthFormat pattern for the month’s selectionStringLLL
formats.selectYearFormat pattern for the year selectionStringyyyy
formats.weekdayFormat pattern for the weekdaysStringccc
icons.previousPrevious button iconStringSvg content
icons.nextNext button iconStringSvg content
icons.timeTime iconStringSvg content
icons.dateDate iconStringSvg content

See Demo And Download


Official Website(Wikiki): Click Here

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

Related Posts


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…


How to Create Audio Visualizations with JavaScript | Wave.js

Audio Visualizer Library – wave.js is a vanilla javascript audio visualization library that provides 20+ creative audio visualization effects to bring more engagement to your visitor. Contribute…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…

Leave a Reply

Your email address will not be published. Required fields are marked *