smrsan76/imrc-datetime-picker

(Improved) React component datetime picker by momentjs :calendar:

(Improved) Rc-Datetime-Picker

Imrc-Datetime-Picker is a react component for datetime picker by Moment.js.

Thanks to ~allenwu for authoring the base package rc-datetime-picker

See The ChangeLog Here

Note: Check the TODO.md file before usage. Maybe some features are still buggy 💀 since the rc-datetime-picker package or recently in the current package.

Requirements

• React
• Moment.js or Moment-jalaali
• Modern browsers (IE>=9 is required)

Installation

Install with NPM

$ npm install imrc-datetime-picker

Manual download

Besides npm package, UMD module and styles are placed under dist/ directory:

• dist/imrc-datetime-picker.js
• dist/imrc-datetime-picker-min.js
• dist/imrc-datetime-picker.css
• dist/imrc-datetime-picker.min.css

Usage

See the demo page.

Props

General Props

Name	Type	Default	Description	Version
moment	moment		Set the selected date.
onChange	Function(datetime: moment)		`onChange` will be triggered while datetime changing.
className	String		Additional css class of root dom node.
isOpen	Boolean	true	Whether to show the picker.
showCalendarPicker	Boolean	true	Whether to show the calendar picker.
showTimePicker	Boolean	true	Whether to show the time picker.
splitPanel	Boolean	false	Enable `split-panel` mode.
shortcuts	Object:{name: moment} | Object:{name: { moment, callback }}		Add shortcuts on the top `shortcuts-bar` for selecting a date. It supports callback option in v2.1.1 and above.
maxDate	moment		Max Date limit.
minDate	moment		Min Date limit.
weeks	Array	['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']	Text for weekdays.
months	Array	[Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']	Text for months.
dayFormat	String	'MMMM, YYYY'	Formatting current date of the day panel.
minPanel	String	'day'	Min panel for select.
isSolar	Boolean	'day'	Solar date mode. Notice that you should use moment-jalaali package instead of moment.	>=2.x
lang	String	undefined (or 'en')	Language name. ('en', 'fa') is supported. Notice that you should use moment-jalaali package instead of moment, if you want to use 'fa' language.	>=2.x

*Trigger Props

Name	Type	Default	Description	Version
disabled	Boolean	false	Disabled triggering.
appendToBody	Boolean	false	Whether to render the picker to `body`.
closeOnSelectDay	Boolean	false	Whether to close the picker when selecting a date on day panel.
position	String	'bottom'	The position of popup.	>= v1.0.0

*Range Props

Name	Type	Default	Description	Version
format	String	'YYYY/MM/DD HH:mm' / 'YYYY/MM/DD'	Formatting current date of each panel.
showCustomButton	Boolean	false	Whether to show the custom button.
customButtonText	String	Custom	Text for custom button.
customRange	Object: {start: moment, end: moment}	Last 30 days	Set the custom button value.
confirmButtonText	String	Confirm	Text for confirm button.
startDateText	String	Start Date:	Text for start date label.
endDateText	String	End date:	Text for end date label.
dateLimit	Object: {name: value}		Date range limt.

Contributing

We really appreciate your contributions.

You can follow the rules of Contributing guide to contribute with us.

imrc-datetime-picker's Issues

Slider for seconds

Do you accept PRs? I need this and if you will accept PRs I can sent you one.

required moment-jalaali

Hi.
v2.1.2
Mandatory addiction.

ERROR in ./node_modules/imrc-datetime-picker/dist/imrc-datetime-picker.js
Module not found: Error: Can't resolve 'moment-jalaali'

PS. Not fixed. AllenWooooo/rc-datetime-picker#61
Where can I find a solution?

react native

hi,

Is it possible to use this package in react native?

Date is not set if the input was clear before.

Describe the bug
When the input is clear, like in the example, we can't reselect a new one and make the update.
No errors triggered in the console.

To Reproduce
Steps to reproduce the behavior:

1. Go to the examples page (https://imrc-datetime-picker.js.org/)
2. Go to popup mode
3. Click on the input
4. Select the clear option
5. Select an other date.

Expected behavior
It should select the date and fill the input correctly.

Screenshots
Small video of the example.
https://take.ms/Fqgan

Please complete the following information

• OS: macOS Mojave
• Browser: Chrome Version 71.0.3578.98
• Webpack: v4
• Node.js: v10.0.0

The day of week is not correct in FA language

Describe the bug
Saturday is the starting day of Persian weeks. But the starting day of the calandar in Solar Date mode is Sunday, although the day of week is Saturday in the header.
Please take a look at the provided screenshot and compare with the calendar in time.ir.

To Reproduce

1. Visit the demo page
2. Check both "Solar Date" and "FA (language)" options

Expected behavior
It is expected to see "د" (wich represents Monday in FA) for 1397-11-1

Screenshots

the icons of both next and previous month buttons are mirrored in RTL direction

The icons of next and previous month buttons flips in RTL direction which is confusing for users.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://imrc-datetime-picker.js.org/'
2. Set the document direction to "rtl"

Screenshots

Please complete the following information

• OS: Windows 10...
• Browser: Firefox Version 64.0
• Webpack: v4.19
• Node.js: v10.14.2

Failed to compile error.

Describe the bug
Getting a failed to compile error.

./node_modules/imrc-datetime-picker/dist/assets/font-icons/font/imrc-datetime-picker-icons.svg
Module build failed: Error: Couldn't find preset "stage-0" relative to directory "/<repo>/node_modules/imrc-datetime-picker"
    at Array.map (<anonymous>)

To Reproduce
Steps to reproduce the behavior:
Not sure if its just me or something with the library.

1. Cleared out my node_module folder.
2. ran yarn install to rebuild the node_module folder.
3. yarn start to start my server where the compile happens.

Expected behavior
To not get a compile error.

Screenshots
If applicable, add screenshots to help explain your problem.

Please complete the following information

• OS: Mac OS High Sierra
• Browser: Chrome Version 70.0.3538.102
• Node.js: v10.10.0

Additional context
Not sure if its a issue on my side, or the module.

className for DatetimePickerTrigger

In case of appendToBody={true} need to add className prop for calendar popup.
Need to add z-index and override some styles.