Selector de fecha y hora altamente configurable con JavaScript puro

Vista prévia

Descripción

Sólo otra biblioteca de JavaScript selector de fecha y hora para seleccionar fechas y horas de una manera eficaz.

Características

• 7 temas incorporados.
• También se puede utilizar como selector de tiempo.
• AJAX habilitado.
• Elemento de alternancia personalizado.
• Formato de hora personalizado.
• Fechas mín./máx.
• Interacciones de teclado.

¿Cómo funciona?

Cargue los archivos de hoja de estilos base y tema en el documento.

<link href="css/datetimepicker.base.css" rel="stylesheet">
<link href="css/datetimepicker.themes.css" rel="stylesheet">
<-- OR -->
<link href="css/datetimepicker.css" rel="stylesheet">

Cargue el archivo JavaScript principal al final del documento.

<script src="js/datetimepicker.js"></script>

Cree un campo de entrada para el selector de fecha y hora.

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

Adjunte el selector de fecha y hora en el campo de entrada.

var dtp = new DateTimePicker('.demo');

Opciones posibles para personalizar el selector de fecha y hora.

var dtp = new DateTimePicker('.demo',{


pickerClass: 'datetimepicker',


days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],


months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],


daySuffix:["th", "st", "nd", "rd"],


nextText:'»',//>>


prevText:'&laquo;',//<<


dayShort: 2, // Length of day-abbreviations


monthShort: 3, // Length of month-abbreviations


startDay: 1, // Can be 0 (Sunday) through 6 (Saturday).


timePicker: false, // time picker mode


timePickerOnly: false,







 timePickerFormat:24,


minuteIncrement:1,


yearPicker: true,


format: 'd/m/Y',


allowEmpty: false,


allowInput: false,


startView: 'month',


 positionOffset: { x: 0, y: 0 },


minDate: null,


maxDate: null,



inputOutputFormat: 'T',


 startDate:null, // The date the picker is to start at.


 debug: false,


toggleElementsOnly:true,


toggleElements: null
});

Funciones de devolución de llamada.

var dtp = new DateTimePicker('.demo',{


beforeShow: null,


onClose: null,


onSelect: null,


onChange: null
});