# dara-datetimepicker > Dara Datetime picker Latest version **0.2.3** (published 2024-03-14) · MIT license · 0 weekly downloads ## Install ```sh npm install dara-datetimepicker pnpm add dara-datetimepicker yarn add dara-datetimepicker bun add dara-datetimepicker ``` ## Health **Score 40/100 (D)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads; pre 1.0. Negative: abandoned. ## Facts | | | |---|---| | Version | 0.2.3 | | Published | 2024-03-14 | | First published | 2023-09-24 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 2 | | Unpacked size | 789.2 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 2 | | Author | darainfo | | Maintainers | darainfo | | Keywords | daraDatetimepicker, dara-datetimepicker, datetimepicker, pickek, darainfo, javascript | ## Links - npm: https://www.npmjs.com/package/dara-datetimepicker - Repository: https://github.com/darainfo/dara-datetimepicker - Issues: https://github.com/darainfo/dara-datetimepicker/issues - npm.io page: https://npm.io/package/dara-datetimepicker ## Dependencies (2) - [yarn](https://npm.io/package/yarn.md) ^1.22.19 - [typescript](https://npm.io/package/typescript.md) ^5.1.6 ## Alternatives - [@js-joda/timezone](https://npm.io/package/@js-joda/timezone.md) — 383.4K weekly downloads - [chartjs-adapter-moment](https://npm.io/package/chartjs-adapter-moment.md) — 210.8K weekly downloads - [strftime](https://npm.io/package/strftime.md) — 171.2K weekly downloads - [vue-flatpickr-component](https://npm.io/package/vue-flatpickr-component.md) — 115.8K weekly downloads - [timepicker](https://npm.io/package/timepicker.md) — 51.0K weekly downloads ## Recent versions - 0.2.3 (latest) — 2024-03-14 - 0.2.1 — 2024-03-14 - 0.2.0 — 2024-03-13 - 0.1.16 — 2024-01-31 - 0.1.15 — 2024-01-30 - 0.1.14 — 2024-01-30 - 0.1.13 — 2024-01-30 - 0.1.12 — 2023-10-12 - 0.1.11 — 2023-10-12 - 0.1.10 — 2023-10-12 - 0.1.9 — 2023-10-12 - 0.1.8 — 2023-10-12 - 0.1.7 — 2023-10-10 - 0.1.6 — 2023-09-25 - 0.1.4 — 2023-09-24 ## README # DateTimePicker An easy to use lightweight javascript calendar library. [![License: MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/darainfo/dara-datetimepicker/blob/main/LICENSE) [![npm version](https://badge.fury.io/js/dara-datetimepicker.svg)](https://img.shields.io/npm/v/dara-datetimepicker) ![npm](https://img.shields.io/npm/dt/dara-datetimepicker) [![minzipped size](https://img.shields.io/bundlephobia/minzip/dara-datetimepicker)](https://bundlephobia.com/package/dara-datetimepicker) ## Browser Support | ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- | | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | # Installation ```bash npm install dara-datetimepicker ``` OR ```bash yarn add dara-datetimepicker ``` or download [zip](https://github.com/darainfo/dara-datetimepicker/releases) # start ```bash npm start ``` # build ```bash 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](./LICENSE). --- _Source: https://npm.io/package/dara-datetimepicker · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._