Pequeño selector de intervalo de fechas personalizable-TinyPicker

Vista prévia

Descripción

TinyPicker es una biblioteca de selector de fecha diminuta pero personalizable que hace que sea más fácil seleccionar rangos de fechas desde una ventana emergente de calendario limpio mínimo. Sin 3 dependencias como jQuery, Moment. js, etc.

Funcionamiento

Incluya el código JavaScript de TinyPicker en la página HTML.

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

Crear campos de entrada de fecha de inicio/fin como estos:

<input type="text" class="TinyPicker" id="startDate">
<input type="text" class="TinyPicker" id="endDate">

Inicializar el selector de intervalo de fechas.

new TinyPicker({


firstBox:document.getElementById('startDate'),


lastBox: document.getElementById('endDate'),
}).init();

Establezca las fechas de inicio/finalización iniciales.

new TinyPicker({


firstBox:document.getElementById('startDate'),


lastBox: document.getElementById('endDate'),


startDate: new Date('03/20/2020'),


endDate: new Date('07/04/2020'),
}).init();

Especifique cuántos meses se mostrarán en el calendario.

new TinyPicker({


firstBox:document.getElementById('startDate'),


lastBox: document.getElementById('endDate'),


monthsToShow: 3
}).init();

Especifique el idioma y el formato de fecha.

new TinyPicker({


firstBox:document.getElementById('startDate'),


lastBox: document.getElementById('endDate'),


local: 'es-US'
}).init();

Personaliza las abreviaturas de día.

new TinyPicker({


firstBox:document.getElementById('startDate'),


lastBox: document.getElementById('endDate'),


days: ['Su','Mo','Tu','We','Th','Fr','Sa
}).init();

Funciones de devolución de llamada disponibles.

new TinyPicker({


firstBox:document.getElementById('startDate'),


lastBox: document.getElementById('endDate'),


success: function(startDate, endDate){}


 err: function(){}
 }).init();

Registro de cambios

08/16/2018

• Agregue un método de limpieza para quitar nodos DOM, detectores de eventos y CSS