Hermoso selector de fecha de JavaScript puro con soporte de eventos-Datepickk. js

Vista prévia

Descripción

Datepickk. js es una biblioteca de JavaScript que le permite seleccionar un rango de fecha o fecha desde un menú emergente de selector de fecha o calendario en línea, con soporte para eventos personalizados.

Funcionamiento

Incluya la hoja de estilo datepickk. min. CSS y el archivo JavaScript datepickk. min. js en la Página Web.

<link rel="stylesheet" href="dist/datepickk.min.css">
<script src="dist/datepickk.min.js"></script>

Inicializa el selector de fecha y estamos listos para irnos.

var datepicker = new Datepickk();

Mostrar un selector de fecha predeterminado en la Página Web.

datepicker.show();

Opciones disponibles para personalizar el selector de fecha.

// Allows to select a range of two dates
datepicker.range = false;

datepicker.maxSelections = null;

// Displays the date picker into a specific container
datepicker.container = document.body;

datepicker.opened = false;

// Displays multiple months at once
datepicker.months = 1;

// If a date gets selected the datepicker will close
datepicker.closeOnSelect = false;

datepicker.button = null;
datepicker.title = null;

// Callbacks
datepicker.onClose = null;
datepicker.onConfirm = null;
datepicker.onSelect = null;

// If someone clicks outside the datepicker it closes
datepicker.closeOnClick = true;

// Inline mode
datepicker.inline = false;

// You can change the language and the day the week starts by changing the lang property.
// By default i've added 3 languages: English (en), Norwegian (no), German (de).
 // Add your own languages to the 'languages' property in the source code
datepicker.lang = 'en';

// You can disable spesific days
datepicker.disabledDates = [];
datepicker.disabledDays = [];

// Allows to mark stuff in the date picker
datepicker.highlight = [];

// Mark tooltips
datepicker.tooltips = {};

// Show/hide daynames line
datepicker.daynames = true;

datepicker.today = true;

// Show little line on todays date
datepicker.startDate = null;

datepicker.minDate = null;
datepicker.maxDate = null;

// Locks the datepicker (viewonlymode)
datepicker.locked = false;

Api.

// shows date picker
datepicker.show();

// hides date picker
datepicker.hide();

// selects a date
datepicker.selectDate(new Date());

// unselects a date
datepicker.unselectDate(new Date());

// unselect all
datepicker.unselectAll();

Registro de cambios

08/14/2018

• Fix (importación de ES6): adición de soporte para importaciones de ES6 + cambio a WebPack