# date-time-picker-solid > An interactive Date and Time picker for SolidJS. Latest version **1.1.2** (published 2024-08-28) · MIT license · 0 weekly downloads ## Install ```sh npm install date-time-picker-solid pnpm add date-time-picker-solid yarn add date-time-picker-solid bun add date-time-picker-solid ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.2 | | Published | 2024-08-28 | | First published | 2022-11-01 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 450.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 16 | | Author | Aximsoft India Pvt Ltd | | Maintainers | sivashankaran_axim, aximsoft_dev_team | | Keywords | solid, calendar, calendar-picker, SolidJs, solidJs calendar, date picker, date-picker, time picker, rangepicker, date time picker, solid-rangepicker, solidjs-range-picker, solidjs-date-picker, solidJs date picker, solidJs time picker, solidjs-calendar-picker, solidJs date time picker, Aximsoft | ## Links - npm: https://www.npmjs.com/package/date-time-picker-solid - Repository: https://github.com/aximsoftDevTeam/date-time-picker-solid - Issues: https://github.com/aximsoftDevTeam/date-time-picker-solid/issues - npm.io page: https://npm.io/package/date-time-picker-solid ## Dependencies (4) - [sass](https://npm.io/package/sass.md) ^1.55.0 - [dayjs](https://npm.io/package/dayjs.md) ^1.11.6 - [solid-js](https://npm.io/package/solid-js.md) ^1.5.1 - [vite-plugin-dts](https://npm.io/package/vite-plugin-dts.md) ^2.3.0 ## 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 - 1.1.2 (latest) — 2024-08-28 - 1.1.1 — 2023-06-15 - 1.1.0 — 2023-06-12 - 1.0.20 — 2023-06-08 - 1.0.19 — 2023-06-08 - 1.0.18 — 2023-06-08 - 1.0.17 — 2023-06-08 - 1.0.16 — 2023-06-08 - 1.0.15 — 2023-06-08 - 1.0.14 — 2023-06-08 - 1.0.13 — 2023-06-08 - 1.0.12 — 2023-06-07 - 1.0.11 — 2023-06-07 - 1.0.10 — 2023-06-07 - 1.0.9 — 2023-02-07 - … 9 more at https://npm.io/package/date-time-picker-solid/versions ## README ![dtps-logo 1 (1)](https://user-images.githubusercontent.com/117165113/199227886-15adf39f-829f-4268-afcf-36315cb1bee6.svg) [![License: Aximsoft(MIT)](https://img.shields.io/badge/License-MIT-orange.svg)](https://opensource.org/licenses/MIT) An interactive `Date and Time Picker` for SolidJS. # Installation __npm:__ ```sh![dtps-logo 1](https://user-images.githubusercontent.com/117165113/199227572-f05f9b19-5d69-4414-8827-f22bcb5ab425.svg) npm install date-time-picker-solid ``` __yarn:__ ```sh yarn add date-time-picker-solid ``` ## Note Include this in your **index.html** file. ```sh ``` ## Example Here is an example of a basic app using DateTimePicker component: ```sh import { DateTimePicker } from 'date-time-picker-solid' function App() { return ; } ``` View the package in action: ( Basic Example ) # Preview ![Group 4601](https://user-images.githubusercontent.com/94821587/201339717-cb44d16f-4232-4dbd-82ae-c754b9c6dfb7.png) # Properties | Props | Type | Default Value | Discription | | --------------------------------- | --------------------- | -------------------------- | ------------------------------------------------------------------- | | currentDate | `Date/string` | | Mandatory Field, default date for the calendar. | | customizeCalendar | `string` | `''` | Add a class name to customize the calendar. | | dateFormat | `string` | `DD MMM, YYYY` | Displayed date format. | | enableDateRangeSelector | `boolean` | `False` | Enables date Range Selection. | | prevDate | `Date` | `dayjs().startOf('weeks')` | Start Date of range selection. | | minDate | `Date` | `undefined` | Start Date. | | maxDate | `Date` | `undefined` | End Date. | | children | `JSXElement` | `undefined` | Add child element | | closeOnSelect | `boolean` | `False` | Closes the calendar after selection. | | calendarWidth | `number` | `26rem` | Adjust calendar toggle section. (Note: value should be in `rem`) | | __TOGGLE SECTION__ | | | | | customizeCalendarToggler | `string` | `''` | Add a class name to customize the calendar toggler. | | customizeTogglerArrowIcon | `string` | `''` | Add a class name to customize input field arrow Icon. | | customizeTogglerCalendarIcon | `string` | `''` | Add a class name to customize calendar icon. | | __BODY SECTION__ | | | | | customizeCalendarBody | `string` | `''` | Add a class name to customize calendar body. | | __NAV SECTION__ | | | | | headerMonthFormat | `string` | `MMM` | Desired month format displayed in the header. | | headerYearFormat | `string` | `YYYY` | Header year view. | | enableArrowNavigation | `boolean` | `True` | Enables/Disables the navigation. | | customizeLeftArrow | `string` | `''` | Add a class name to customize left arrow. | | customizeRightArrow | `string` | `''` | Add a class name to customize right arrow. | | customizeActiveMonth | `string` | `''` | Add a class name to customize calendar view. | | __TITLE SECTION__ | | enableDateInputField | `boolean` | `True` | Display selected date. | | enableDateInputFieldEditor | `boolean` | `True` | Makes selected date editable. | | customizeSelectedDate | `string` | `''` | Add a class name to customize selected date view. | | enableTodayNavigator | `boolean` | `False` | Enables today navigating button. | | customizeTodayNavigator | `string` | `''` | Add a class name to customize today button. | | __VIEW SECTION__ | | enableCalendarViewType | `boolean` | `False` | Enables Calendar type switching button. | | activeCalendarView | `day/month/year` | `day` | Active view | | cutomizeCalendarViewButtons | `string` | `''` | Add a class name to customize view type buttons. | | customizeRangeSelectedDates | `string` | `''` | Add a class name to customize the selected date range. | | __PICKER SECTION__ | | customizeListView | `string` | `''` | Add a class name to customize the list. | | customizeListHeader | `string` | `''` | Add a class name to customize the list header. | | customizeYearLeftNavigationArrow | `string` | `''` | Add a class name to customize the year view left arrow navigator. | | customizeYearRightNavigationArrow | `string` | `''` | Add a class name to customize the year view right arrow navigator. | | __TIME VIEW SECTION__ | | enableTimeView | `boolean` | `False` | Enables Time view in calendar. | | enableTimeEditing | `boolean` | `False` | Enables Time editing option in calendar. | | customizeTimeViewSwitch | `string` | `''` | Add a class name to customize the time view toggle button. | | customizeTimeInputField | `string` | `''` | Add a class name to customize the time input field. | | customizeTimeUpdateButton | `string` | `''` | Add a class name to customize the time update button. | | customizeConsolidateTimeView | `string` | `''` | Add a class name to customize the time day and view element. | | customizeTimeDownArrow | `string` | `''` | Add a class name to customize the time increase buttons. | | customizeTimeUpArrow | `string` | `''` | Add a class name to customize the time decrease buttons. . | | renameTimeUpdateButton | `string` | `''` | To rename the update button. | | __OUTPUT__ | | calendarResponse | `(props: type)=>void` | | | Callback to get the values | # Dependencies [typescript](https://www.solidjs.com/) [typescript](https://www.typescriptlang.org/) [typescript](https://day.js.org/en/) [typescript](https://www.w3.org/Style/CSS/Overview.en.html) # Let's get connected [typescript](https://discord.gg/S5kPs6qV) # License `MIT` --- _Source: https://npm.io/package/date-time-picker-solid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._