material datetime picker
v2.4.0
Ein Material Design Datum/Zeit -Picker -Modal, das für das Web erstellt wurde. Funktioniert gut mit Materialise oder eigenständiger.
https://ripjar.github.io/material-datetime-picker/
npm install material-datetime-picker
Der Auswahl ist auf die Materialdesign -Symbole von Google (mit Materialise verpackt) oder im head des Dokuments enthalten.
< link href =" https://fonts.googleapis.com/icon?family=Material+Icons " rel =" stylesheet " > Zu den besten Ergebnissen gehören auch das materielle Font Roboto von Google.
< link href =' https://fonts.googleapis.com/css?family=Roboto ' rel =' stylesheet ' type =' text/css ' > Wenn Sie dieses Projekt als eigenständiges <script> verwenden möchten, können Sie dist/material-datetime-picker.js verwenden. Sie müssen auch moment.js und rome.js einbeziehen:
< script src =" https://cdnjs.cloudflare.com/ajax/libs/rome/2.1.22/rome.js " > </ script >
< script src =" https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.js " > </ script >
< script src =" material-datetime-picker.js " charset =" utf-8 " > </ script > Der Picker kann so ausgeleitet und mit manalem interagiert werden;
import MaterialDateTimePicker from 'material-datetime-picker' ;
const picker = new MaterialDateTimePicker ( )
. on ( 'submit' , ( val ) => console . log ( `data: ${ val } ` ) )
. on ( 'open' , ( ) => console . log ( 'opened' ) )
. on ( 'close' , ( ) => console . log ( 'closed' ) ) ;
document . querySelector ( '.c-datepicker-btn' )
. on ( 'click' , ( ) => picker . open ( ) ) ; Der Picker ist ein einfacher Element aus einem einzelnen Formelement entkoppelt. Es sollte jedoch einfach sein, die Auswahl mit einem Formulareingang oder einer Schaltfläche zu verknüpfen. Zum Beispiel könnte bei der Eingabeelement <input class="c-datepicker-input" /> Folgendes geschrieben werden.
import MaterialDateTimePicker from 'material-datetime-picker' ;
const input = document . querySelector ( '.c-datepicker-input' ) ;
const picker = new MaterialDateTimePicker ( )
. on ( 'submit' , ( val ) => {
input . value = val . format ( "DD/MM/YYYY" ) ;
} ) ;
input . addEventListener ( 'focus' , ( ) => picker . open ( ) ) ; Alle Optionen sind optional, einschließlich der el .
{
// DOM 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` must be a DOM Element object. Selectpr strings or wrappers
// like a jQuery selection are not supported.
el : document . querySelector ( '.c-datepicker-btn' ) ,
// if `el` is set, the format used to display the datetime in the input,
format : 'DD/MM/YY' ,
// the default value of the picker
default : moment ( ) ,
// the container to append the picker. If you change this, you need to make
// sure your element has a z-index > 0 so that it displays in front of the scrim.
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
} MIT
