Date-time-picker-solid NPM

dtps-logo 1 (1)

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

Group 4601

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