BulmaDatePicker

My own Bulma date and range picker calendar input since I couldn't find anyone I liked.

What it does

Choose a date or a date range from a input constructed from Bulma css elements.

Requirements

• Bulma css framework
• MDI icons

How to install

1. Clone the repo.
2. Copy BulmaDatePicker.js and BulmaDatePicker.css to your project.
3. Bulma css and mdi fonts (through iconify) are required. Include <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css"> and <script src="https://code.iconify.design/1/1.0.6/iconify.min.js"></script> in the head of your html file.
4. Include eg. <script src="BulmaDatePicker.js"></script> and <link rel="stylesheet" href="BulmaDatePicker.css"> in the head of your html file.

Usage example

See the example page! Some suggestions on how to include setters, getters and eventlisteners are included.

1. Create a div: <div id="dateControl"></div>.
2. Initialize it in js: const dateControl = new BulmaDatePicker(document.getElementById('dateControl'), options);.

Options table

Option	Type	Default	Description
range	Boolean	false	false = pick a single date. true = choose two dates, a date range.
alwaysOpen	Boolean	false	Turns the control into a permanent calendar.
static	Boolean	false	Disables input boxes, no manual entries. .setValue(value) can still be used!
rangeArrow	Boolean	true	Shows or hides an arrow between date range inputs.
inputWidth	Integer	160	Default width of input control box.

Methods

Method	Description
.getValue()	Selected dates, either as a string or an array of strings depending on range option.
.setValue(value)	Takes a string or array of two strings depending on range option. Sets the text of the input controls, and selects the date or date interval in the calendar.
.clear()	Clears the text inputs and removes calendar selections.
.activate()	Makes the control editable.
.deactivate()	Makes the control static.

Pictures