dara-datetimepicker

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

key	Desc	Default	Option
inline	embed	false
weekStartDay	start day	0	0:Sun, 1:Mon, 2:Tue, 3:Wed, 4:Thu, 5:Fri, 6:Sat
initialDate	initial date	new Date()
mode	view mode	date	year, month, date, datetime, time
enableTodayBtn	enable today button	false	false, true
showMonthAfterYear	show month after	false	true ,false
format	date format	'YYYY-MM-DD'
zIndex	css z-index	1000
autoClose	auto close	true	true, false
minDate	minimum date	''
maxDate	maximum date	''
onLoad	load event
onSelect	date select event
beforeChangeDatepicker	date change before event
afterChangeDatepicker	date change after event
beforeDrawDate	before date draw

Language

key	Desc	Default
year	year	Year
month	Month	Month
day	Day	Day
am	AM	AM
pm	PM	PM
today	Today button	Today
ok	H:M Ok button	Ok
months	Months
	full	["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
	abbr	['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
weeks	weeks
	full	["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
	abbr	["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

License

Darainfo is under MIT License.