Biblioteca de selector de DateTime potente-cola. Datetime

Vista prévia

Descripción

La cola. La biblioteca de JavaScript DateTime le permite crear un selector de fecha y/o tiempo de varios idiomas, compatible con dispositivos móviles, en la aplicación Web.

Funcionamiento

Descargue e inserte la cola. Archivos de la biblioteca DateTime en el archivo HTML.

<link rel="stylesheet" href="css/tail.datetime.css">
<script src="js/tail.datetime.js"></script>

Inserte el tema & los archivos de idioma en el archivo HTML (opcional).

<link rel="stylesheet" href="css/tail.datetime.white.css">
<script src="langs/tail.datetime-de.js"></script>
<script src="langs/tail.datetime-es.js"></script>

Cree un campo de entrada para mantener la fecha seleccionada & hora.

<input type="text" id="demo" class="demo">

Cree un elemento de marcador de posición para el calendario (OPTIONAL).

<div id="datetime-demo-holder" class="datetime-folder"></div>

Inicializar la cola. DateTime para adjuntar el selector de fecha al campo de entrada.

tail.DateTime("#demo");

Para mostrar siempre la interfaz de usuario del calendario.

tail.DateTime("#demo", {

position: "#datetime-demo-holder",

 startOpen: true,

stayOpen: true
});

Establezca el formato de fecha. Se establece en false para deshabilitar el selector de fecha (solo selector de tiempo).

tail.DateTime("#demo", {

dateFormat: 'YYYY-mm-dd'
});

Establezca el intervalo de fechas.

tail.DateTime("#demo", {

dateRanges: [


// Will Disable 05-JAN -> 07-JAN completely


{



start: new Date(2018, 0, 5),



end: new Date(2018, 0, 7)



/* days: true */







// This is the default


},



// Will Disable Each Sunday and Saturday in FEB


{



start: new Date(2018, 1, 1),



end: new Date(2018, 1, 28),



days: ["SUN", "SAT"]


},



// Will Disable Each Sunday and Saturday in General


{



days: ["SUN", "SAT"]


}

]
});

Establezca la posición relativa al campo de entrada.

tail.DateTime("#demo", {

// "top", "left", "right" or "bottom"

position: "bottom"
});

Establezca los formatos de fecha y hora.

tail.DateTime("#demo", {

dateFormat: "YYYY-mm-dd",

timeFormat: "HH:ii:ss"
});

Cambia el primer día de la semana.

tail.DateTime("#demo", {

weekStart: 0 // Sunday
});

Si desea establecer los segundos en 00 .

tail.DateTime("#demo", {

zeroSeconds: false
});

Establezca las fechas de inicio y finalización.

tail.DateTime("#demo", {


// string, new Date() or integer

dateStart: false,

dateEnd: false


});

Anexar información sobre herramientas al selector de fecha y hora.

tail.DateTime("#demo", {


tooltips: [


{



date: "2018-01-01",



text: "New Year",



color: "#ff0000"


}

]

});

Personalice la vista de calendario.

tail.DateTime("#demo", {


// "days" (default), "months", "years" or "decades"

viewDefault: "days",


 // allows decade/year/month/day view

viewDecades: true,

 viewYears: true,

 viewMonths: true,

viewDays: true

});

Más opciones posibles para personalizar el selector de fecha y hora.

tail.DateTime("#demo", {


// use false to use dateRanges as Whitelist:

dateBlacklist: true,



// add a close Button to the DateTime picker

closeButton: true,


// local

locale: "en",


// RTL or LTR

rtl: "auto",


// define default hours, minutes, and seconds

timeHours: null,

timeMinutes: null,

timeSeconds: 0,


// increase the next unit on loop of the previous one

timeIncrement: true,


// change the step size of the input fields

timeStepHours: 1,

timeStepMinutes: 5,

timeStepSeconds: 5,


// show a small tick (circle) above the current day, month, year and decade

today: true

});

Métodos de la API:

// switch calendar views
// "days", "months", "years" or "decades"
tail.switchView(view)

// switch dates
tail.switchDate(year, month, day, none)

// switch months
tail..switchMonth(month, year)

// switch years
tail.switchYear(year)

// pass "prev" (or previous) or "next" to load the "next" or "previous" page of the current view.
tail.browseView(type)

// fetch the current available / selectable date and time within the respective interface
tail.fetchDate(date)

// select a datetime
tail.selectDate(year, month, date, hours, minutes, seconds)

// select a time
tail.selectTime(hours, minutes, seconds)

// open the datetime picker
tail.open()

// close the datetime picker
tail.close()

// toggle the datetime picker
tail.toggle()

// event
tail.on(event, callback, args)

// remove the instance
tail.remove()

// reload the datetime picker
tail.reload()

Events handlers.

tail.on("open", function(){

// on open
})

tail.on("close", function(){

// on close
})

tail.on("change", function(){

// on change
})

Registro de cambios

v0.4.8 (02/15/2019)

• Añadir: la nueva traducción francesa
• Corrección de errores: la información sobre herramientas no admite el intervalo de fechas

v0.4.7 (01/31/2019)

• Añadir: la nueva traducción final.

v0.4.6 (01/04/2019)

• Agregar: una regla de @import en los colores individuales, por lo que solo se debe incluir un archivo.
• Corrección de errores: cuando se muestra solo selector de tiempo, la etiqueta de calendario indica undefined.

v0.4.5 (01/01/2019)

• Añadir: la nueva traducción holandesa.
• Añadir: aumente y recorra los campos de tiempo haciendo clic en arriba y abajo.
• Agregar: la nueva opción timeIncrement, que aumenta la siguiente unidad en el bucle de la anterior.
• Agregar: la nueva opción closeButton, que agrega un botón cerrar al selector DateTime.
• Add: el nuevo método interno handleTime () que maneja los eventos de tiempo.
• Actualización: el tiempo * opciones ahora permite también false como parámetro para deshabilitar el campo.

v0.4.4 (12/26/2018)

• Agregar: el nuevo jsdelivr Key = > valor en el package. JSON archivo
• Quitar: el archivo Project. Synder hasta que finalice el nuevo formato de Synder
• Corrección de errores: hotfix de CDN/NPM

v0.4.3 (12/22/2018)

• Añadir: la nueva traducción italiana.
• Añadir: la nueva traducción portuguesa brasileña.
• Añadir: las nuevas opciones timeStep * para cambiar el tamaño del paso de los campos de entrada.
• Corrección de errores: error en la visualización de dateRanges.

v0.4.2 (11/20/2018)

• Agregar: el nuevo método Modify () en la cadena Storage para cambiar las cadenas globalmente.
• Actualización: el método . Register () comprueba ahora si locale es una cadena y un objeto.
• Actualización: el método . Register () vuelve ahora verdadero en el éxito y falsa en el fracaso!
• Corrección de errores: el método . selectTime () no usó la fecha "ya seleccionado/actual visualizado".
• Corrección de errores: el cambio de tiempo no tiene efecto.
• Corrección de errores: los cálculos son incorrectos en algunos entornos.

v0.4.1 (11/20/2018)

• Añadir: la nueva traducción árabe.
• Agregar: la nueva opción RTL, que permite mostrar el selector DateTime en un estilo RTL.
• Actualización: el nuevo RTL compatible Stylesheets.
• Actualización: el color del tick de información de herramientas predeterminado depende ahora del tema usado.
• Actualización: el agente de escucha clave "Enter/Escape" ahora también funciona cuando el cursor está dentro de un campo de entrada.
• Corrección de errores: las fechas desactivadas todavía se podían seleccionar o hacer clic.
• Corrección de errores: el agente de escucha de eventos de KeyUp se ha disparado por instancia.
• Corrección de errores: el agente de escucha clave "Enter" no nota/utiliza fechas ya seleccionadas!
• Corrección de errores: no puede retroceder más allá de febrero del año mostrado.
• Fix Language File

v0.4.0 (11/15/2018)

• Se agregaron más opciones y API