https://github.com/acrool/acrool-react-datepicker

This is a date/time picker component developed using React + Dayjs, which can be used with TextField input.
https://github.com/acrool/acrool-react-datepicker

datepicker datetimepicker dayjs rangedatepicker react timepicker typescript

Last synced: 11 months ago
JSON representation

This is a date/time picker component developed using React + Dayjs, which can be used with TextField input.

• Host: GitHub
• URL: https://github.com/acrool/acrool-react-datepicker
• Owner: acrool
• License: mit
• Created: 2022-04-18T07:47:19.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2025-05-14T02:09:43.000Z (about 1 year ago)
• Last Synced: 2025-06-15T06:48:59.349Z (12 months ago)
• Topics: datepicker, datetimepicker, dayjs, rangedatepicker, react, timepicker, typescript
• Language: TypeScript
• Homepage: https://acrool-react-datepicker.pages.dev/
• Size: 4.69 MB
• Stars: 13
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md
  • Security: SECURITY.md

Awesome Lists containing this project

• awesome-react - Acrool React Datepicker - Datepicker (React component)

README

          
# Acrool React Datepicker



    





    This is a date/time picker component developed using React + Dayjs, which can be used with TextField input.





[![NPM](https://img.shields.io/npm/v/@acrool/react-datepicker.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-datepicker)

[![npm](https://img.shields.io/bundlejs/size/@acrool/react-datepicker?style=for-the-badge)](https://github.com/acrool/@acrool/react-datepicker/blob/main/LICENSE)

[![npm](https://img.shields.io/npm/l/@acrool/react-datepicker?style=for-the-badge)](https://github.com/acrool/react-datepicker/blob/main/LICENSE)

[![npm downloads](https://img.shields.io/npm/dm/@acrool/react-datepicker.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-datepicker)

[![npm](https://img.shields.io/npm/dt/@acrool/react-datepicker.svg?style=for-the-badge)](https://www.npmjs.com/package/@acrool/react-datepicker)



`^3.2.0 support react >=18.0.0 <20.0.0`

## Features

- Support date picker

- Support time picker

- Support date+time picker

- Support date range selector

- Support date range + time selector

## Install

```bash

yarn add dayjs @acrool/react-datepicker

```

## Usage

add in your index.tsx

```tst

import "@acrool/react-datepicker/dist/index.css";

```

then in your page

```tsx

import {Datepicker, Timepicker, DateTimepicker} from '@acrool/react-datepicker';

const BaseUsed = () => {

    const [myDate, setMyDate] = useState('2023-10-08');

    const [myTime, setMyTime] = useState('12:00:08');

    const [myDateTime, setMyDateTime] = useState('2023-10-02 12:00:08');

    const [myDateTimeNoSec, setMyDateTimeNoSec] = useState('2023-10-02 12:00');

    const [myRangeDate, setMyRangeDate] = useState({startDate: '2023-10-02', endDate: '2023-10-08'});

    const [myRangeDateTime, setMyRangeDateTime] = useState({date: '2023-10-02', startTime: '08:00:10', endTime: '10:10:00'});

    const [myRangeDateTimeNoSec, setMyRangeDateTimeNoSec] = useState({date: '2023-10-02', startTime: '08:00', endTime: '10:10'});

    

    return (

        


            


             console.log('val', timeStr)}/>

             console.log('val', timeStr)}/>

            

            

             console.log('val', timeStr)} />

            

        

    );


};

```



There is also a example that you can play with it:

[![Play react-editext-example](https://raw.githubusercontent.com/acrool/acrool-react-datepicker/main/play-in-example-button.svg)](https://acrool-react-datepicker.pages.dev)

## License

MIT © [Acrool](https://github.com/acrool) & [Imagine](https://github.com/imagine10255)