Highly Customizable Date and Time Picker with Rome.js

Category: Date & Time , Javascript , Recommended | July 14, 2021
Author:bevacqua
Views Total:2,137 views
Official Page:Go to website
Last Update:July 14, 2021
License:MIT

Preview:

Highly Customizable Date and Time Picker with Rome.js

Description:

Rome.js is a simple to use JS library for appending a highly customizable date & time picker on your input field when clicked/focused on.

Requires moment.js.

See also:

Installation:

# NPM
$ npm install @bevacqua/rome --save

Basic Usage:

Load the required rome.js at the bottom of your web page.

<script src="dist/rome.js"></script>
<-- or -->
<script src="/path/to/moment.js"></script>
<script src="dist/rome.standalone.js"></script>

Load the rome.css into the head section of your page to style the date & time picker.

<link href="dist/rome.css" rel="stylesheet">

Create a regular text field that allows you to pick a date & time from a popup panel.

<input id="dt" class="input">

Initialize the date & time picker with just one line of Javascript.

rome(dt,options);

Available options:

  • appendTo: DOM element where the calendar will be appended to. Takes ‘parent’ as the parent element
  • autoClose: Closes the calendar when picking a day or a time
  • autoHideOnBlur: Hides the calendar when focusing something other than the input field
  • autoHideOnClick: Hides the calendar when clicking away
  • date: The calendar shows days and allows you to navigate between months
  • dateValidator: Function to validate that a given date is considered valid. Takes a native Date parameter.
  • dayFormat: Format string used to display days on the calendar
  • initialValue: Format string used to display days on the calendar
  • inputFormat: Format string used for the input field as well as the results of rome
  • invalidate: Ensures the date is valid when the field is blurred
  • strictParse: Compares input strictly against inputFormat, and partial matches are discarded
  • max: Disallow dates past max. Takes string, Date, moment
  • min: Disallow dates before min. Takes string, Date, moment
  • monthFormat: Format string used by the calendar to display months and their year
  • monthsInCalendar: How many months get rendered in the calendar
  • required: Is the field required or do you allow empty values?
  • styles: CSS classes applied to elements on the calendar
  • time: The calendar shows the current time and allows you to change it using a dropdown
  • timeFormat: Format string used to display the time on the calendar
  • timeInterval: Seconds between each option in the time dropdown
  • timeValidator: Function to validate that a given time is considered valid. Takes a native Date parameter.
  • weekdayFormat: Format used to display weekdays. Takes min (Mo), short (Mon), long (Monday), or an array with seven strings of your choosing.
  • weekStart: Day considered the first of the week. Range: Sunday 0 – Saturday 6
const opitons = {
  "appendTo": document.body,
  "autoClose": true,
  "autoHideOnBlur": true,
  "autoHideOnClick": true,
  "date": true,
  "dateValidator": Function.prototype,
  "dayFormat": "DD",
  "initialValue": null,
  "inputFormat": "YYYY-MM-DD HH:mm",
  "invalidate": true,
  "max": null,
  "min": null,
  "monthFormat": "MMMM YYYY",
  "monthsInCalendar": 1,
  "required": false,
  "strictParse": false,
  "styles": {
    "back": "rd-back",
    "container": "rd-container",
    "date": "rd-date",
    "dayBody": "rd-days-body",
    "dayBodyElem": "rd-day-body",
    "dayConcealed": "rd-day-concealed",
    "dayDisabled": "rd-day-disabled",
    "dayHead": "rd-days-head",
    "dayHeadElem": "rd-day-head",
    "dayRow": "rd-days-row",
    "dayTable": "rd-days",
    "month": "rd-month",
    "next": "rd-next",
    "positioned": "rd-container-attachment",
    "selectedDay": "rd-day-selected",
    "selectedTime": "rd-time-selected",
    "time": "rd-time",
    "timeList": "rd-time-list",
    "timeOption": "rd-time-option"
  },
  "time": true,
  "timeFormat": "HH:mm",
  "timeInterval": 1800,
  "timeValidator": Function.prototype,
  "weekdayFormat": "min",
  "weekStart": moment().weekday(0).day()
}

API methods.

// Shows the picker
.show()
// Hides the picker
.hide()
// Gets the current date
.getDate()
// Gets the current date string
.getDateString(format)
// Gets the moment object
.getMoment()
// Destroys the picker
.destroy()
// restores the picker
.restore(options)
// Updates options
.options(options?)
// Resets the options
.options.reset()
// Emits all values
.emitValues()
// Sets the value
.setValue(value)
// Refreshes the picker
.refresh()
// Backs to the previous month
.back()
// Goes to the next month
.next()

Changelog:

v3.0.4 (07/14/2021)

  • Update

v3.0.2 (03/20/2019)

  • Updated options, methods, events.

v2.1.22 (05/30/2018)

  • fixed bugs

You Might Be Interested In:


Leave a Reply