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

How to make use of 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 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>'
    }
    
});

Options

Must Read: A Simple and Easy jQuery Date and Time Picker | jSunPicker

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.