Press "Enter" to skip to content

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

API

The API in Rome exposes a few properties.

rome.find(elem)

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:

Installation:

# NPM
$ 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.

rome(dt,options);
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
.show()

// Hides the picker
.hide()

// Gets the current date
.getDate()

// Gets the current date string
.getDateString(format)

// Gets the moment object
.getMoment()

// Destroys the picker
.destroy()

// restores the picker
.restore(options)

// Updates options
.options(options?)

// Resets the options
.options.reset()

// Emits all values
.emitValues()

// Sets the value
.setValue(value)

// Refreshes the picker
.refresh()

// Backs to the previous month
.back()

// Goes to the next month
.next()
OptionDescription
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

Events

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.

EventArgumentsDescription
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 moment.date() 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.

Be First to Comment

    Leave a Reply

    Your email address will not be published.