Skip to content

SivashankaranK/date-time-picker-solid

 
 

Repository files navigation

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

Example

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

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

function App() {
  return <DateTimePicker currentDate={moment().toDate()} />;
}

Preview

Group 4601

Demo

View the package in action: Basic Example

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 moment().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.
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
enableSelectedDate boolean True Display selected date.
enableSelectedDateEditor 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

About

An interactive Date and Time Picker for SolidJS.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 79.7%
  • SCSS 19.1%
  • HTML 1.2%