Highly Customizable Date and Time Picker with Rome.js

Category: Date & Time , Javascript , Recommended | May 30, 2018
Author: bevacqua
Views Total: 4,407
Official Page: Go to website
Last Update: May 30, 2018
License: MIT


Highly Customizable Date and Time Picker with Rome.js


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.

Basic Usage:

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

<script src="dist/rome.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.


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
  • 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


v2.1.22 (05/30/2018)

  • fixed bugs

You Might Be Interested In:

Leave a Reply