Selector de hora & fecha de JavaScript puro-MTR DatePicker

Vista prévia

Descripción

Un selector de fecha de JavaScript puro que permite al usuario seleccionar una fecha & tiempo mediante el uso de flechas arriba/abajo o la rueda del ratón.

¿Cómo funciona?

Añada la hoja de estilo principal a la sección Head de la Página Web.

<link rel="stylesheet" href="dist/mtr-datepicker.min.css">

Agregue un tema CSS de su elección a la Página Web.

<link rel="stylesheet" href="dist/mtr-datepicker.default-theme.min.css>
<!-- OR -->
<link rel="stylesheet" href="dist/mtr-datepicker.clutterboard-theme.min.css>

Cargue el plugin de selector de zona horaria si es necesario.

<script src="mtr-datepicker-timezones.min.js"></script>

Cree un elemento DIV que se servirá como contenedor para el selector de fecha.

<div id="demo"></div>

Inicializar el selector de fecha.

datepickerDefault = new MtrDatepicker({

target: "demo",
});

Las principales propiedades de configuración. Todos ellos pueden ser overided por el método ini.

targetElement: null,
defaultValues: {

hours:



[],

minutes:


[],

dates:



[],

datesNames:
 [],

months:


 [],

years:



[],
},
hours: {

min: 1,

max: 12,

step: 1,

maxlength: 2
},
minutes: {

min: 0,

max: 50,

step: 10,

maxlength: 2
},
months: {

min: 0,

max: 11,

step: 1,

maxlength: 2
},
years: {

min: 2000,

max: 2030,

step: 1,

maxlength: 4
},
animations: true,


 // Responsible for the transition of the sliders - animated or static
smartHours: false,


// Make auto swicth between AM/PM when moving from 11AM to 12PM or backwards
future: false,




// Validate the date to be only in the future
disableAmPm: false,

 // Disable the 12 hours time format and go to a full 24 hours experience
validateAfter: true,

// perform the future validation after the date change
utcTimezone: 0,



 // change the local timezone to a specific one

transitionDelay: 100,
transitionValidationDelay: 500,
references: { // Used to store references to the main elements

hours: null
},

monthsNames: {

0: "Jan",

1: "Feb",

2: "Mar",

3: "Apr",

4: "May",

5: "Jun",

6: "Jul",

7: "Aug",

8: "Sep",

9: "Oct",

10: "Nov",

11: "Dec",
},

daysNames: {

0: "Sun",

1: "Mon",

2: "Tue",

3: "Wed",

4: "Thu",

5: "Fri",

6: "Sat",
},

timezones: null

Registro de cambios

08/03/2018

• v0.2.8: added timezones plugin