Customizable DateTime Picker JS Library | Rome.js

Rome.js is an easy-to-use JS library to append a highly customizable date and time picker to an input field when clicked/focused.

time picker jquery, custom datepicker, bootstrap datetimepicker, datetime picker jquery free download, date time picker javascript, custom datepicker jquery


The API in Rome exposes a few properties.


If a calendar is associated with the provided Elem, then that calendar is returned, otherwise returns null. DOM elements can only have one associated calendar.

rome(elem, options={})

This method creates a calendar instance and associates it to the provided Elem. This association can’t be undone even by .destroy()ing the rome instance, because it can be .restore()d later. Subsequent calls to rome(elem) will return the associated calendar, instead of creating a new one (see rome.find(elem)). Think of this as a “caching feature“.

How to make use of it:


$ npm install @bevacqua/rome --save

Load the required rome.js on the bottom of your net 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 pinnacle part of your web page to model the date & time picker.

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

Create an everyday text discipline that lets you decide a date & time from a popup panel.

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

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

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 strategies.

// Shows the picker

// Hides the picker

// Gets the current date

// Gets the current date string

// Gets the moment object

// Destroys the picker

// restores the picker

// Updates options

// Resets the options

// Emits all values

// Sets the value

// Refreshes the picker

// Backs to the previous month

// Goes to the next month
appendToDOM element where the calendar will be appended to. Takes 'parent' as the parent element
autoCloseWhen 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.
autoHideOnBlurHides the calendar when focusing something other than the input field
autoHideOnClickHides the calendar when clicking away
dateThe calendar shows days and allows you to navigate between months
dateValidatorFunction to validate that a given date is considered valid. Receives a native Date parameter.
dayFormatFormat string used to display days on the calendar
initialValueValue used to initialize calendar. Takes stringDate, or moment
inputFormatFormat string used for the input field as well as the results of rome
invalidateEnsures the date is valid when the field is blurred
strictParseCompares input strictly against inputFormat, and partial matches are discarded
maxDisallow dates past max. Takes stringDate, or moment
minDisallow dates before min. Takes stringDate, or moment
monthFormatFormat string used by the calendar to display months and their year
monthsInCalendarHow many months get rendered in the calendar
requiredIs the field required or do you allow empty values?
stylesCSS classes applied to elements on the calendar
timeThe calendar shows the current time and allows you to change it using a dropdown
timeFormatFormat string used to display the time on the calendar
timeIntervalSeconds between each option in the time dropdown
timeValidatorFunction to validate that a given time is considered valid. Receives a native Date parameter.
weekdayFormatFormat used to display weekdays. Takes min (Mo)short (Mon)long (Monday), or an array with seven strings of your choosing.
weekStartDay considered the first of the week. Range: Sunday 0 – Saturday 6


Rome calendars also provide a few events you can subscribe to. These events are published through an event emitter created using contra. These events are listed below.

ready[options]The calendar has been .restored
destroyed[]The calendar has been .destroyed
data[value]The date may have been updated by the calendar. Value of .getDateString() is provided
year[year]The year may have been updated by the calendar. Value of moment.year() is provided
month[month]The month may have been updated by the calendar. Value of moment.month() is provided
day[day]The day may have been updated by the calendar. Value of is provided
time[time]The time may have been updated by the calendar. Formatted time string is provided
show[]The calendar has been displayed
hide[]The calendar has been hidden
back[month]The calendar view has been moved back a month to the value moment.month()
next[month]The calendar view has been moved forward a month to the value moment.month()

Highly Customizable Date and Time Picker, rome Plugin/Github, date time picker npm

See Demo And Download

Official Website(bevacqua): Click Here

This superior jQuery/javascript plugin is developed by bevacqua. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…