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()