|Official Page:||Go to website|
|Last Update:||May 30, 2018|
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.
Load the required rome.js at the bottom of your web page.
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">
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
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
max: Disallow dates past max. Takes string, Date, moment
min: Disallow dates before min. Takes string, Date, moment
monthForma:t Format string used by the calendar to display months and their year
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.
weekStart: Day considered the first of the week. Range: Sunday 0 – Saturday 6
- fixed bugs