1.4.1 • Published 11 months ago

@rnwonder/solid-date-picker v1.4.1

Weekly downloads
-
License
MIT
Repository
github
Last release
11 months ago

@rnwonder/solid-date-picker

A simple and reusable Datepicker component for SolidJS (Demo)

Documentation

Screenshot 2023-05-20 084944.jpg Screenshot 2023-05-20 084945.jpg Screenshot 2023-05-20 084946.jpg Screenshot 2023-05-20 084946.jpg

Installation

npm i @rnwonder/solid-date-picker
yarn add @rnwonder/solid-date-picker
pnpm add @rnwonder/solid-date-picker

This package depends on solid-js so you need to have it installed

Usage

import '@rnwonder/solid-date-picker/dist/style.css'
import DatePicker from "@rnwonder/solid-date-picker";

const App = () => {
  return (
    <DatePicker
      onChange={(data) => {
        if (data.type === "range") {
          console.log(data.startDate, data.endDate);
        }
        if (data.type === "single") {
          console.log(data.selectedDate);
        }
        if (data.type === "multiple") {
          console.log(data.multipleDates);
        }
      }}
    />
  );
};

For Solid Start, you want to use the DatePicker component as a client-side component. You can do this by using the unstable_clientOnly from solid-start.

import { clientOnly } from "@solidjs/start";
const DatePicker = clientOnly(() => import("@rnwonder/solid-date-picker"));

After importing the DatePicker component, you can use it the same way as above.

Styling With Props, Classes, or Attributes

  • You can style the datepicker using class props, color props, default css class names or data attributes.
  • Check out the documentation for more details

Themes

  • We have a growing list of themes you can use. Please check them out here

Other Datepicker Props

  • We have some other props that can be useful when working with the datepicker. Please check them out here

Formatting

  • Formatting the datepicker input label is done with the formatInputLabel, formatInputLabelRangeStart, formatInputLabelRangeEnd, localOptions and locale props
  • Check out the documentation for more details

Utility Functions

  • We have some utility functions that can be useful when working with the datepicker. Please check them out here

Other Components

  • We have some other components that you may find useful. Please check them out here

Time Picker

  • This is in beta and can be used like this
import '@rnwonder/solid-date-picker/dist/style.css'
import TimePicker from "@rnwonder/solid-date-picker/timePicker";

const App = () => {
  return <TimePicker />
};

Road Map

  • Time Picker (In progress)
  • More themes
  • More utility functions
  • Add more tests

Contributing

  • Send a message to the author on X if you have any questions or suggestions. Don't forget to follow me on twitter.
  • Feel free to open an issue here if you run into any problem while using this library.
  • You can also contribute to this project here.

1.2.8

1 year ago

1.2.81

1 year ago

1.3.9

11 months ago

1.3.8

12 months ago

1.2.71

1 year ago

1.2.72

1 year ago

1.2.73

1 year ago

1.4.1

11 months ago

1.4.0

11 months ago

1.3.7

1 year ago

1.3.6

1 year ago

1.3.5

1 year ago

1.3.4

1 year ago

1.3.3

1 year ago

1.3.2

1 year ago

1.3.1

1 year ago

1.3.0

1 year ago

1.2.7

1 year ago

1.2.6

1 year ago

1.2.5

1 year ago

1.2.4

1 year ago

1.2.3

1 year ago

1.2.2

1 year ago

1.2.1

1 year ago

1.2.0

1 year ago

1.1.1

1 year ago

1.1.0

1 year ago

1.0.9

1 year ago

1.0.8

1 year ago

1.0.7

1 year ago

1.0.6

1 year ago

1.0.5

1 year ago

1.0.2

1 year ago

1.0.4

1 year ago

1.0.3

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

0.9.5

1 year ago

0.9.0

1 year ago

0.9.2

1 year ago

0.9.1

1 year ago

0.9.4

1 year ago

0.9.3

1 year ago

0.8.5

1 year ago

0.8.7

1 year ago

0.8.6

1 year ago

0.8.4

2 years ago

0.8.1

2 years ago

0.8.3

2 years ago

0.8.2

2 years ago

0.7.8

2 years ago

0.8.0

2 years ago

0.7.7

2 years ago

0.7.6

2 years ago

0.7.5

2 years ago

0.7.4

2 years ago

0.7.3

2 years ago

0.7.2

2 years ago

0.7.10

2 years ago

0.7.0

2 years ago

0.6.9

2 years ago

0.6.8

2 years ago

0.6.7

2 years ago

0.6.6

2 years ago

0.6.5

2 years ago

0.6.4

2 years ago

0.6.3

2 years ago

0.6.2

2 years ago

0.6.1

2 years ago

0.6.0

2 years ago

0.5.9

2 years ago

0.5.8

2 years ago

0.5.7

2 years ago

0.5.6

2 years ago

0.5.5

2 years ago

0.5.4

2 years ago

0.5.3

2 years ago

0.5.2

2 years ago

0.5.1

2 years ago

0.5.0

2 years ago

0.4.9

2 years ago

0.4.8

2 years ago

0.4.7

2 years ago

0.4.6

2 years ago

0.4.5

2 years ago

0.4.4

2 years ago

0.4.3

2 years ago

0.4.2

2 years ago

0.4.1

2 years ago

0.4.0

2 years ago

0.3.7

2 years ago

0.3.6

2 years ago

0.3.5

2 years ago

0.3.4

2 years ago

0.3.3

2 years ago

0.3.2

2 years ago

0.3.1

2 years ago

0.3.0

2 years ago

0.2.9

2 years ago

0.2.8

2 years ago

0.2.7

2 years ago

0.2.6

2 years ago

0.2.5

2 years ago

0.2.4

2 years ago

0.2.3

2 years ago

0.2.2

2 years ago

0.2.1

2 years ago

0.2.0

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago

0.0.0

2 years ago