material datetime picker

ตัวเลือก dateTime วัสดุ

การออกแบบวัสดุวันที่/ตัวเลือกเวลา Modal สร้างขึ้นสำหรับเว็บ ทำงานได้ดีกับรูปธรรมหรือแบบสแตนด์อโลน

https://ripjar.github.io/material-datetime-picker/

การติดตั้ง

 npm install material-datetime-picker

การพึ่งพาอาศัยกัน

ตัวเลือกขึ้นอยู่กับไอคอนการออกแบบวัสดุของ Google (บรรจุด้วยรูปธรรม) หรือรวมอยู่ใน head เอกสาร;

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

---

เพื่อผลลัพธ์ที่ดีที่สุดยังรวมถึง Roboto แบบอักษรวัสดุของ Google

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

---

หากคุณต้องการใช้โครงการนี้เป็นสแตนด์อโลน <script> คุณสามารถใช้ dist/material-datetime-picker.js คุณจะต้องรวม moment.js และ rome.js ด้วย:

 < 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 > 

การใช้งาน

คู่มือ (แนะนำ)

ตัวเลือกสามารถสร้างอินสแตนซ์และโต้ตอบกับลูกผู้ชาย;

 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 ( ) ) ;        

---

เป็นฟอร์มอินพุต

ตัวเลือกถูกแยกออกจากองค์ประกอบแบบฟอร์มเดียวเพื่อความเรียบง่าย อย่างไรก็ตามควรเชื่อมโยงตัวเลือกกับปุ่มอินพุตหรือปุ่ม ตัวอย่างเช่นเนื่องจากองค์ประกอบอินพุต <input class="c-datepicker-input" /> สามารถเขียนต่อไปนี้ได้

 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 ( ) ) ;      

ตัวเลือก

ตัวเลือกทั้งหมดเป็นทางเลือกรวมถึง 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       
} 

ใบอนุญาต

มิกซ์