Hermosa fecha de diseño de material & selector de tiempo

Vista prévia

Descripción

Un hermoso componente de selector de fecha y hora con estilo de material Design que le permite seleccionar fechas y tiempo desde una ventana emergente modal. Basado en < a href = "http:/materializecss.com/" target = "_ blank" rel = "noopener" > Materialize CSS Framework.

Funcionamiento

Descargue e incluya tanto JavaScript & StyleSheet en su proyecto web como este:

<link rel="stylesheet" href="dist/css/datepicker.css">
<script src="dist/js/datepicker.standalone.js"></script>

Cargue el icono de & de fuentes web de material Design necesario.

<link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Cree un botón para alternar la fecha & selector de hora.

<a class="c-btn c-datepicker-btn">

<span class="material-icon">Click me</span>
</a>

Cree un elemento que se separará como el contenedor para el usuario seleccionado DateTime.

<pre id="output"></pre>

El código JavaScript para activar los datos & selector de tiempo.

const picker = new MaterialDatePicker({})

.on('submit', (d) => {


output.innerText = d;

});

const el = document.querySelector('.c-datepicker-btn');
el.addEventListener('click', () => {

picker.open();
}, false);

Opitons de personalización completa.

{


// element to attach the datepicker. this element will receive

 // events when the data changes. If an input element, will be

 // populated with formatted date and time chosen

el: document.querySelector('.c-datepicker-btn'),


// if `el` is set, `openedBy` is the event on `el` that will

// open the picker, eg. `click` or `focus`

openedBy: 'focus',


// if `el` is set, the format used to display the datetime in the input, // or set as a data attribute

format: 'dd/MM/YY',

 //
the default value of the picker

default: moment(),


// the container to append the picker

container: document.body,



// cosmetic classes that can be overriden

// mostly used for styling the calendar

styles: {



scrim: 'c-scrim',



back: 'c-datepicker__back',



container: 'c-datepicker__calendar',



date: 'c-datepicker__date',



dayBody: 'c-datepicker__days-body',



dayBodyElem: 'c-datepicker__day-body',



dayConcealed: 'c-datepicker__day--concealed',



dayDisabled: 'c-datepicker__day--disabled',



dayHead: 'c-datepicker__days-head',



dayHeadElem: 'c-datepicker__day-head',



dayRow: 'c-datepicker__days-row',



dayTable: 'c-datepicker__days',



month: 'c-datepicker__month',



next: 'c-datepicker__next',



positioned: 'c-datepicker--fixed',



selectedDay: 'c-datepicker__day--selected',



selectedTime: 'c-datepicker__time--selected',



time: 'c-datepicker__time',



timeList: 'c-datepicker__time-list',



timeOption: 'c-datepicker__time-option',



clockNum: 'c-datepicker__clock__num'

},


// date range to allow (see rome validator factories)

dateValidator: null





 }

Registro de cambios

v2.4.0 (08/14/2018)

• ES6