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

Rome

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

Instructions

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>
<html>
    <head>
        <meta charset="utf-8" />
        
        <!-- Required Stylesheet -->
        <link type="text/css" rel="stylesheet" href="/css/rome.css" />
    </head>
    <body>
        <!-- Required JavaScript -->
        <script type="text/javascript" src="/js/tome.standalone.min.js"></script>
    </body>
</html>

 

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

appendTo
DOM element where the calendar will be appended to. Takes parent as the parent element
autoClose
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.
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. Receives a native Date parameter.
dayFormat
Format string used to display days on the calendar.
initialValue
Value used to initialize calendar. Takes string, Date, or moment
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, or moment
min
Disallow dates before max. Takes string, Date, or 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
unction to validate that a given time is considered valid. Receives 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.

Leave a Reply

Top