Material Design fecha hora selector en Vanilla JavaScript

Vista prévia

Descripción

Una biblioteca de JavaScript vainilla que utiliza Moment. js para crear hermosos, selectores de estilo de material Design para una fácil selección de fecha y hora.

Funcionamiento

Cargue el archivo CSS Component. CSS requerido en la sección head del documento.

<link rel="stylesheet" href="css/component.css">

Compile el cuadro de diálogo del selector de fecha.

<div id="md-picker__date" class="md-picker md-picker-date md-picker--inactive animated">

<div id="md-date__header" class="md-picker__header">


<h4 id="md-date__subtitle" class="md-picker__subtitle"></h4>


<h2 id="md-date__title" class="md-picker__title">



<span id="md-date__titleDay"></span>



<span id="md-date__titleMonth"></span>


</h2>

</div>

<div class="md-picker__body">


<div id="md-date__viewHolder" class="md-picker__viewHolder animated">



<ul class="md-picker__views">




<li id="md-date__previous" class="md-picker__view">





<div class="md-picker__month"></div>





<div class="md-picker__grid">






<div class="md-picker__th">







<span>








S







</span>







<span>








M







</span>







<span>








T







</span>







<span>








W







</span>







<span>








T







</span>







<span>








F







</span>







<span>








S







</span>






</div>






<div class="md-picker__tr"></div>





</div>




</li>




<li id="md-date__current" class="md-picker__view">





<div class="md-picker__month"></div>





<div class="md-picker__grid">






<div class="md-picker__th">







<span>








S







</span>







<span>








M







</span>







<span>








T







</span>







<span>








W







</span>







<span>








T







</span>







<span>








F







</span>







<span>








S







</span>






</div>






<div class="md-picker__tr"></div>





</div>




</li>




<li id="md-date__next" class="md-picker__view">





<div class="md-picker__month"></div>





<div class="md-picker__grid">






<div class="md-picker__th">







<span>








S







</span>







<span>








M







</span>







<span>








T







</span>







<span>








W







</span>







<span>








T







</span>







<span>








F







</span>







<span>








S







</span>






</div>






<div class="md-picker__tr"></div>





</div>




</li>



</ul>



<button id="md-date__left" class="md-button md-picker__left" type="button"></button>



<button id="md-date__right" class="md-button md-picker__right" type="button"></button>


</div>


<ul id="md-date__years" class="md-picker__years md-picker__years--invisible animated"></ul>


<div class="md-picker__action">



<button id="md-date__cancel" class="md-button" type="button">cancel</button>



<button id="md-date__ok" class="md-button" type="button">ok</button>


</div>

</div>
</div>

Cargue Moment. js y MD-Date-Time-Picker. js al final del documento.

<script src="js/moment.js"></script>
<script src="js/md-date-time-picker.js"></script>

Inicializar el selector de fecha.

var myDatepicker = new mdDateTimePicker('date');

Alternar el selector de fecha con un desencadenador personalizado.

document.getElementById('trigger').addEventListener('click', function() {

myDatepicker.toggle();
});

Parámetros disponibles para la función mdDateTimePicker ().

• tipo: [tipo de diálogo] [' fecha ', ' hora ']
• init = Moment (): [valor inicial para la fecha o la hora del cuadro de diálogo, de manera predeterminada hoy] [@default valor de hoy]
• pasado = momento (): [el último momento hasta el que el calendario debe rendir] [@default valor de hace exactamente 21 años desde init]
• futuro = momento (): [el momento futuro hasta el que el calendario debe rendir] [@default valor de init]
• mode = false: [este valor indica si el cuadro de diálogo de hora tendrá el modo de 24 horas (true) o el modo de 12 horas (false)] [@default modo de 12 horas – falso]
• Orientation = "LANDSCAPE" o "PORTRAIT": [forzar la orientación del selector @default = ' LANDSCAPE ']
• Trigger: [elemento en el que se enviarán todos los eventos, por ejemplo var foo = Document. getElementById (' bar '), aquí Element = foo]
• OK = ' OK ': [texto del botón OK]
• Cancel = ' CANCEL ': [cancelar texto del botón]
• colon = true: [Añadir una opción para habilitar la cotización en el modo de 24 horas]
• autoClose = false: [cerrar diálogo en la selección de fecha/hora]
• inner24 = false: [si el modo de 24 horas y (verdadero), las horas PM se muestra en un dial interior]
• prevHandle = < div class = "mddtp-Prev-Handle" > </div >: [El contenido HTML del identificador para ir al mes anterior]
• nextHandle = < div class = "mddtp-Next-Handle" > </div >: [El contenido HTML del identificador para ir al mes siguiente]

Registro de cambios

08/14/2018

• v2.3.0