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

Dependencies

Let's get connected

License

MIT