dara-datetimepicker v0.2.3

DateTimePicker

An easy to use lightweight javascript calendar library.

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Installation

npm install dara-datetimepicker

OR

yarn add dara-datetimepicker

or download zip

start

npm start

build

npm run build

datetimepicker 사용방법

// language
DateTimePicker.setMessage({
    year: '년',
    month: '월',
    day: '일',
    am: "오전",
    pm: "오후",
    today: '오늘',
    ok: '선택',
    months: {
    full: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"],
    abbr: ["1월", "2월", "3월", "4월", "5월", "6월", "7월", "8월", "9월", "10월", "11월", "12월"]
    },
    weeks: {
    full: ["월요일", "화요일", "수요일", "목요일", "금요일", "토요일", "일요일"],
    abbr: ["월", "화", "수", "목", "금", "토", "일"]
    },
});

// mode=date
new DateTimePicker('#dateText', {
    initialDate: '2023-08-10' // init date
    , format: 'YYYY-MM-DD'
    , mode: 'date'
    , minDate: DateTimePicker.parser('2023-08-05')
    , maxDate: DateTimePicker.parser('2050-09-30')
    , onSelect: (dt) => {
        console.log(dt);
        //return false;
    }
    , zIndex: 1000
    },{
    ok:"Ok"
})

// mode=datetime
new DateTimePicker('#datetimeText',{initialDate:new Date(),format: 'YYYY-MM-DD HH:mm',  mode: 'datetime'});

// mode=time
new DateTimePicker('#timeText',{initialDate:new Date(),format: 'HH:mm', mode: 'time'});

// mode=month
new DateTimePicker('#monthText',{initialDate:new Date(),format: 'YYYY-MM', mode: 'month'});

// mode=year
new DateTimePicker('#yearText',{initialDate:new Date(),format: 'YYYY', mode: 'year'});

// mode=datetime embed
new DateTimePicker('#date', {
    inline: true
    , showMonthAfterYear: true
    , mode: 'datetime'
    , weekStartDay: 1
    , minDate: DateTimePicker.parser('2023-08-05')
    , maxDate: DateTimePicker.parser('2025-09-30')
    , initialDate: new Date() // 초기화 요일
    , onSelect: (dt, mode, e) => {
        console.log('select', dt, mode, e);
    }
    , beforeChangeDatepicker: (dt, callbackFn) => { 
        console.log('beforeChangeDatepicker', dt);
        callbackFn(true); // callback 을 사용하루 경우  return 은 무조건 false
        return false;
    }
    , afterChangeDatepicker: (dt, mode) => {
        console.log('afterChangeDatepicker', dt, mode);
    }
    , beforeDrawDate: (dt) => {
    //return false; 
    return {
        style: '111'
        //, tooltip: dt.date
    }
    }
    , zIndex: 1000
});

Options

Language

License

Darainfo is under MIT License.