Selector de intervalo de fechas flexible con momento. js-lightPick. js

Vista prévia

Descripción

lightPick. js es una biblioteca de JavaScript que le permite crear un componente de selector de intervalo de fechas flexible, personalizable, multilingüe y fácil de usar con Moment. js .

Más características

• También se puede utilizar como un selector de fecha.
• Formato de fecha personalizado.
• Le permite establecer las fechas min/max.
• Controladores de eventos y métodos de API útiles.

Funcionamiento

Incluya las bibliotecas de momento. js y jQuery lightPick. js necesarias en la parte inferior de la Página Web.

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment-with-locales.min.js"></script>
<script src="lightpick.js"></script>

Cree un campo de entrada estándar al que se debe adjuntar el selector de intervalo de fechas.

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

Inicialice el selector de intervalo de fechas en el campo de entrada y listo.

const myPicker = new lightPick({



field: document.getElementById('demo'),



singleDate: false
});

Para inicializar la biblioteca como un único selector de fecha, establezca las opciones singleDate en true.

const myPicker = new lightPick({



field: document.getElementById('demo'),



singleDate: true // default: true
});

A veces es posible que necesite mostrar el intervalo de fechas con 2 campos de entrada:

<input type="text" id="start">
<input type="text" id="end">

const myPicker = new lightPick({



field: document.getElementById('start'),



secondField: document.getElementById('end')
});

Especifique el idioma que desea utilizar. Por defecto, el plugin detectará y usará el idioma basado en el idioma de su navegador.

const myPicker = new lightPick({



field: document.getElementById('demo'),



singleDate: false,



lang: 'en',
});

Más opciones de configuración con valores predeterminados.

const myPicker = new lightPick({




// target form field



field: null,




// end of date range will set here



secondField: null,




// first day of the week



// 1 = Monday



firstDay: 1,




// parent element



parentEl: 'body',




// language



lang: 'auto',




// date format



format: 'DD/MM/YYYY',




// separator character



separator: ' - ',




// number of months to display



numberOfMonths: 1,




// number of columns to display



numberOfColumns: 2,




// single date mode



singleDate: true,







// auto close after selection



autoclose: true,




// Repick start/end instead of new range.



 repick: false,




// start/end dates



startDate: null,



endDate: null,




// min/max dates



minDate: null,



maxDate: null,




// an array of disabled dates



disableDates: null,




// selects second date before/after the first selected date



selectForward: false,



selectBackward: false,




// min/max days



minDays: null,



maxDays: null,




// shows tooltip



hoveringTooltip: true,




// hide on click



hideOnBodyClick: true,




// shows footer



footer: false,




// disabled dates in the range



disabledDatesInRange: true,




// 'left' or 'right', 'top' or 'bottom', and 'auto'



orientation: 'auto',




// disable Saturday and Sunday.



disableWeekends: false,




// inline mode



inline: false,




dropdowns: {




years: {





min: 1900,





max: null,




},




months: true,



},




// localization



locale: {




buttons: {





prev: '←',





next: '→',





close: '×',





reset: 'Reset',





apply: 'Apply',




},




tooltip: {





one: 'day',





other: 'days',




},




tooltipOnDisabled: null,



},




// callbacks



onSelect: null,



onOpen: null,



onClose: null

});

Available event handlers.

const myPicker = new lightPick({




onSelect: function(start, end){




// ...



},




onOpen:
function(start, end){




// ...



},




onClose: function(start, end){




// ...



},




onError: function(start, end){




// ...



}

});

API methods.

// sets a date
myPicker.setDate(date)

// gets current date
myPicker.getDate()

// gets current start of date range
myPicker.getStartDate()

// gets current end of date range
myPicker.getEndDate()

// shows date range picker
myPicker.show()

// hides date range picker
myPicker.hide()

// destroys date range picker
myPicker.destroy()

Registro de cambios

v1.3.4 (03/30/2019)

• Corregido ' setDate ' no funciona con ' inline = true '

v1.3.3 (03/29/2019)

• fijar setDate con opción inline

v1.3.2 (03/25/2019)

• Nueva opción: listas desplegables

v1.3.1 (03/22/2019)

• Nueva opción: inline (el valor predeterminado es false)
• Lista desplegable meses, años

v1.2.10 (02/13/2019)

• Bugfix
• mejorar la sincronización

v1.2.9 (01/15/2019)

• Bugfix

v1.2.8 (12/18/2018)

• mejor orientación de la opción (comprobando el espacio disponible en la parte superior cuando el valor es automático)

v1.2.7 (12/10/2018)

• corregir bug cuando se utiliza las opciones repick y minDays (en la fecha de repicking se ignoró minDays)

v1.2.6 (11/08/2018)

• nueva opción: orientación
• nueva opción: Disablefines de semana
• Solucionado bug

v1.2.5 (09/11/2018)

• Mejorar la pluralización.

v1.2.4 (08/27/2018)

• Descripción de los días discapacitados.

v1.2.3 (08/24/2018)

• Eliminado los días div adicionales en el próximo mes.
• nueva devolución de llamada: onError al llamar cuando disabledDatesInRange se establece en false y el usuario es el rango seleccionado incluye las fechas de deshabilitado.
• correcciones de errores menores

v1.2.2 (08/23/2018)

• nuevas opciones: disabledDatesInRange, tooltipNights

v1.1.2 (08/22/2018)

• nueva opción: pie de página

v1.1.1 (08/16/2018)

• Se corrigió: en el método Select invocado cuando se crea la instancia de Lightpick

v1.1.0 (07/20/2018)

• soltar soporte IE
• ahora encabezado (nombre del mes) se puede hacer clic para el mes de cambio rápido

v1.0.9 (07/19/2018)

• Solucionado bug

v1.0.6 (07/12/2018)

• Mejora el peinado

v1.0.5 (07/12/2018)

• Corrección de errores: cuando se proporciona un parentEl en opciones, la posición es incorrecta

v1.0.4 (07/12/2018)

• Mejora CSS

v1.0.3 (07/09/2018)

• Corregido: siempre se puede elegir un rango de un día

v1.0.0 (06/22/2018)

• Nombre del constructor para comenzar con una letra mayúscula: lightPick para Lightpick

v0.0.6 (06/20/2018)

• nueva opción: repick

v0.0.5 (06/19/2018)

• oculto al inicio

v0.0.4 (06/18/2018)

• Añadida información sobre herramientas
• Los botones de opción se mueven a locale