Selector de fecha de calendario en línea minimalista en Vanilla JavaScript

Vista prévia

Descripción

Una biblioteca de JavaScript Vanilla que permite al usuario seleccionar una fecha de una vista en línea mínima de < a href = "https://wikicss.com/tag/calendar/" > Calendar .

Funcionamiento

Cargue la hoja de estilos ' vanillacalendar. css ' en el encabezado y el archivo JavaScript ' vanillacalendar. js ' al final del documento.

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

Cree el código HTML para el calendario en línea.

<div class="cal">

<div class="cal__header">


<button class="btn btn-action btn-link btn-lg" data-calendar-toggle="previous"><svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">


<path d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"></path></svg></button>


<div class="cal__header__label" data-calendar-label="month">



March 2017


</div><button class="btn btn-action btn-link btn-lg" data-calendar-toggle="next"> <svg height="24" version="1.1" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">


<path d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"></path></svg></button>

</div>

<div class="cal__week">


<span>Mon</span> <span>Tue</span><span>Wed</span> <span>Thu</span> <span>Fri</span> <span>Sat</span> <span>Sun</span>

</div>

<div class="cal__body" data-calendar-area="month"></div>
</div>

Cree un contenedor para colocar la fecha escogida por los usuarios.

Date picked: <span data-calendar-label="picked"></span>

Inicializar el calendario en línea en la carga de la página.

window.addEventListener('load', function () {

vanillacalendar.init();
})

Registro de cambios

v0.0.3 (10/09/2018)

• se agregó el parámetro disablePastDays.