date-time-picker-solid
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

dtps-logo 1 (1)

License: Aximsoft(MIT)

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

Dependencies

typescript typescript typescript typescript

Let's get connected

typescript

License

MIT

Package Sidebar

Install

npm i date-time-picker-solid

Weekly Downloads

50

Version

1.1.1

License

MIT

Unpacked Size

463 kB

Total Files

10

Last publish

Collaborators

  • sivashankaran_axim
  • aximsoft_dev_team