Rome – The DateTime Picker, which wasn’t built in a day


Rome wasn’t built in a day, neither the City nor this plain vanilla JavaScript. A script which creates a configur- and designable DateTime Picker, which is compatible in all modern browsers, including 7+. It doesn’t depend on any DOM library, but still requires the DateTime function library Moments.js.

The last release is about 3 years ago, but the script still works as it should. However, it may still contains some bugs or strange behaviors. Therefore, it is more recommended to create an own DateTime Picker script with Rome as base fork.

Download the latest version of Rome as .ZIP or as .TAR package!

npm i rome --save

yarn add rome --save

bower install rome --save


The package itself contains the main JavaScript as well as a demonstration Stylesheet. There is also a standalone edition, which contains a working Moment.js version too. All JavaScripts and Stylesheets are also available in a minified version.


Load Rome

It’s recommended to load the packaged, or your own, stylesheet within your HTML Header. The JavaScript file can theoretically located wherever you want, we recommend to link this file after the opened <body> tag. Don’t forget to use either the standalone version or to include moments.js BEFORE you include Rome!

<!DOCTYPE html>
        <meta charset="utf-8" />
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/rome.css" />
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/tome.standalone.min.js"></script>


Configure Rome

The Script has 24 options which configure the behavior and design of the DateTime Picker. You can also easily change each single class name, used by Rome. Important: The first parameter of the Rome contructor does only accept a single Element object.

document.addEventListener("DOMContentLoaded", {
    rome(document.querySelector("input.rome-datetime"), {
        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:          0


Configure: Options

DOM element where the calendar will be appended to. Takes parent as the parent element
When set to true, the calendar is auto-closed when picking a day (or a time if time: true and date: false). A value of time will only auto-close the calendar when a time is picked.
Hides the calendar when focusing something other than the input field.
Hides the calendar when clicking away.
The calendar shows days and allows you to navigate between months.
Function to validate that a given date is considered valid. Receives a native Date parameter.
Format string used to display days on the calendar.
Value used to initialize calendar. Takes string, Date, or moment
Format string used for the input field as well as the results of rome.
Ensures the date is valid when the field is blurred.
Compares input strictly against inputFormat, and partial matches are discarded
Disallow dates past max. Takes string, Date, or moment
Disallow dates before max. Takes string, Date, or moment
Format string used by the calendar to display months and their year.
How many months get rendered in the calendar.
Is the field required or do you allow empty values?
CSS classes applied to elements on the calendar.
The calendar shows the current time and allows you to change it using a dropdown.
Format string used to display the time on the calendar.
Seconds between each option in the time dropdown
unction to validate that a given time is considered valid. Receives a native Date parameter.
Format used to display weekdays. Takes min (Mo), short (Mon), long (Monday), or an array with seven strings of your choosing.
Day considered the first of the week. Range: Sunday 0 – Saturday 6.

Leave a Reply