DateTimePicker

An easy to use lightweight javascript calendar library.

Browser Support

Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔

Installation

npm install @daracl/datetimepicker

OR

yarn add @daracl/datetimepicker

or download zip

start

npm start

build

npm run build

datetimepicker 사용방법

// 언어 설정
Daracl.dateTimePicker.setDefaultFormat({
    date: 'YYYY.MM.DD'
    , datetime: "YYYY.MM.DD HH:mm"
})

Daracl.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: ["일", "월", "화", "수", "목", "금", "토"]
    },
});

Daracl.dateTimePicker.create('#dateText', {
    //initialDate: '2023-08-10' // 초기화 요일
    aaa: 11
    , mode: 'date'
    , minDate: Daracl.dateTimePicker.parser('2023.08.05')
    , maxDate: Daracl.dateTimePicker.parser('2050.09.30')

    , onSelect: (dt) => {
    console.log(dt);
    //return false; 
    }
    , onClose: (dt) => {
    console.log(dt);
    //return false;
    }

    , zIndex: 1000
}, {
    ok: "Ok"
})

Daracl.dateTimePicker.create('#datetimeText', { initialDate: new Date(), mode: 'datetime' });

Daracl.dateTimePicker.create('#timeText', { initialDate: new Date(), mode: 'time' });

Daracl.dateTimePicker.create('#monthText', {
    initialDate: new Date(), format: 'YYYY-MM-DD', mode: 'month', afterChangeDatepicker: (dt, mode) => {
    console.log('monthText afterChangeDatepicker', dt, mode);
    }
});

Daracl.dateTimePicker.create('#yearText', {
    initialDate: new Date(), format: 'YYYY', mode: 'year', afterChangeDatepicker: (dt, mode) => {
    console.log('yearText afterChangeDatepicker', dt, mode);
    }
});


var aaa = Daracl.dateTimePicker.create('#date', {
    inline: true
    , showMonthAfterYear: true
    , mode: 'datetime'
    //, weekStartDay: 1
    , minDate: Daracl.dateTimePicker.parser('2023-08-05')
    , maxDate: Daracl.dateTimePicker.parser('2025-09-30')
    //, isRTL: true
    , initialDate: new Date() // 초기화 요일
    , onSelect: (dt, mode, e) => {
    console.log('select', dt, mode, e);
    }
    , beforeChangeDatepicker: (dt, callbackFn) => {
    console.log('beforeChangeDatepicker', dt);

    setTimeout(function () {
        callbackFn(true);
    }, 10)

    return false;
    }
    , afterChangeDatepicker: (dt, mode) => {
    console.log('afterChangeDatepicker', dt, mode);
    }
    , beforeDrawDate: (dt) => {
    //return false; 
    return {
        style: '111',
        //check: true,
        //, 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
isPositionFixed	position fixed	false

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

Theme

색상 값은 @daracl/ui-style 의 테마 변수(--dui-*)를 사용합니다. light 값이 기본값으로 들어 있어 별도 설정 없이도 표시되지만, dark 테마를 쓰려면 테마 변수 CSS 를 함께 로드해야 합니다.

import '@daracl/ui-style/theme-vars.css';

// dark 로 전환
document.documentElement.setAttribute('data-daracl-theme', 'dark');

OS 설정(prefers-color-scheme: dark)도 따르며, data-daracl-theme 속성이 있으면 그 값이 우선합니다.

이전 버전의 body.dark / .daracl-datetime-wrapper.dark 클래스 방식은 지원하지 않습니다.

License

Darainfo is under MIT License.