Selector de fecha y hora altamente personalizable con Rome. js

Vista prévia

Descripción

Rome. js es una biblioteca de JS fácil de usar para anexar una muy personalizable fecha & selector de tiempo en el campo de entrada cuando se hace clic/centrado en.

Requiere Moment. js .

See also:

• Top 10 JavaScript & CSS fecha y componentes del selector de temporizador
• 15 mejores plugins de jQuery selector de fecha y hora

Instalación

# NPM
$ npm install @bevacqua/rome --save

Uso básico

Cargue el Rome. js requerido en la parte inferior de su página web.

<script src="dist/rome.js"></script>
<-- or -->
<script src="/path/to/moment.js"></script>
<script src="dist/rome.standalone.js"></script>

Cargue el fichero Rome. CSS en la sección Head de su página para dar estilo a la fecha & selector de hora.

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

Cree un campo de texto normal que le permita seleccionar una fecha & hora desde un panel emergente.

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

Inicializa la fecha & selector de hora con solo una línea de JavaScript.

rome(dt,options);

Available options:

• appendTo : elemento DOM al que se anexará el calendario. Toma ' Parent ' como el elemento primario
• autoClose : cierra el calendario al seleccionar un día o una hora
• autoHideOnBlur : oculta el calendario al enfocar algo que no sea el campo de entrada
• autoHideOnClick : oculta el calendario al hacer clic fuera
• fecha : el calendario muestra días y permite navegar entre meses
• dateValidator : función para validar que una fecha determinada se considera válida. Toma un parámetro de fecha nativa.
• dayFormat : cadena de formato utilizada para mostrar los días en el calendario
• initialValue : cadena de formato utilizada para mostrar los días en el calendario
• inputFormat : cadena de formato utilizada para el campo de entrada, así como los resultados de Rome
• invalidar : garantiza que la fecha es válida cuando el campo está difuminado
• strictParse : compara la entrada estrictamente con inputFormat y las coincidencias parciales se descartan
• Max : no permitir fechas pasadas máx. Toma cadena, fecha, momento
• min : no permitir fechas antes de min. toma cadena, fecha, momento
• monthFormat : cadena de formato utilizada por el calendario para mostrar los meses y su año
• monthsInCalendar : ¿cuántos meses se renderizan en el calendario
• requerido: ¿se requiere el campo o se permiten valores vacíos?
• styles : las clases CSS aplicadas a los elementos del calendario
• tiempo : el calendario muestra la hora actual y le permite cambiarla usando una lista desplegable
• timeFormat : cadena de formato utilizada para mostrar la hora en el calendario
• timeInterval : segundos entre cada opción en el menú desplegable de tiempo
• timeValidator : función para validar que un tiempo determinado se considera válido. Toma un parámetro de fecha nativa.
• weekdayFormat : formato utilizado para mostrar los días laborables. Toma min (MO), Short (Mon), Long (lunes), o una matriz con siete cuerdas de su elección.
• weekStart : día considerado el primero de la semana. Rango: Domingo 0 – sábado 6

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

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

Registro de cambios

v3.0.2 (03/20/2019)

• Opciones actualizadas, métodos, eventos.

v2.1.22 (05/30/2018)

• solucionado los errores