An interactive Date and Time Picker for SolidJS.

Installation

npm:

npm install date-time-picker-solid

yarn:

yarn add date-time-picker-solid

Note

Include this in your index.html file.

 <link rel="stylesheet" type="text/css" href="node_modules/date-time-picker-solid/dist/style.css">

Example

Here is an example of a basic app using DateTimePicker component:

import { DateTimePicker } from 'date-time-picker-solid'

function App() {
  return <DateTimePicker currentDate={new Date()} />;
}

View the package in action: ( Basic Example )

Preview

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

Let's get connected

License

MIT