Some suggestions for features

[Angelk90]

Hi @aadilhasan ,

It would be possible to implement the following features:

• When selectTime is true, give the possibility to decide for the AM-PM format or the 24-hour format.
• To be able to decide the formatting of the date, ex: dd/mm/yyyy or dd-mm-yyyy h:mm.
• Being able to decide the separator between the two dat, ex ~ or -, or other.
• Make sure that dates prior to today's date are not selectable, if required.
• Make sure that the months preceding the current month are not possible to scroll, if required.
• Make sure you can customize the colors of the calendar, for example if you want to change the background color of the calendar to have it in dark mode, or want it dark blue, or the color of the text.

Bug, looking at the following example from the first calendar which is of type disableRange:
If the Today button is selected, a range is set, but it should not be so, then if I select a different date than today, setting the time, strange things happen.

The last date I selected with the time previously set from the current date is set, from which the current date that I had previously selected with the last time I set was set.

Link: https://codesandbox.io/s/react-range-picker-8bdzy

Then take a look at:

• src/components/date-grid/index.js line 42 do not make a return false; but only false;

[aadilhasan]

@Angelk90 i already have plans of adding these features, as i am not getting enough time to work on this, it may take some time. and i have added date format support for now with the latest version.

[aadilhasan]

@Angelk90 may i know what kind of project you are using it in ?

[Angelk90]

@aadilhasan :
I've seen the thing of the date format, but the problem is that if I use a placeholder like I do?

Consider the following scenario:

<PickerWithCustomePlaceholder
onDateSelected={this.onDateChanges}
onClose={this.onDateChanges}
placeholderText="Select date range"
dateFormat="MMMM dd  YYYY @ h:mi A"
selectTime
/>

import TextField from "@material-ui/core/TextField";
import InputAdornment from "@material-ui/core/InputAdornment";
import IconButton from "@material-ui/core/IconButton";
import CalendarToday from "@material-ui/icons/EventNote";


const PickerWithCustomePlaceholder = ({ onDateSelected, onClose, placeholderText, dateFormat, selectTime }) => {
    const placeholder = ({ startDate, endDate }) => {
        let _startDate = "";
        let _endDate = "";
        if (startDate)
        _startDate = `${startDate.getDate()}/${startDate.getMonth() +
        1}/${startDate.getFullYear()}`;

        if (endDate)
        _endDate = `${endDate.getDate()}/${endDate.getMonth() +
        1}/${endDate.getFullYear()}`;

        const handleClickShow = () => {
            console.log("show");
        };

        return (
            <TextField
                id="Calendar"
                label={placeholderText}
                value={_startDate && _startDate + " - " + _endDate}
                InputProps={{
                    endAdornment: (
                        <InputAdornment position="end" className={"passwordView"}>
                            <IconButton
                                aria-label="Toggle password visibility"
                                onClick={handleClickShow}
                            >
                                <CalendarToday />
                            </IconButton>
                        </InputAdornment>
                    )
                }}
            />
        );
    };
    return (
        <DatePicker
            onDateSelected={onDateSelected}
            onClose={onClose}
            placeholder={placeholder}
            dateFormat={dateFormat}
            selectTime={selectTime}
        />
    );
};

How can I use what was passed as dateFormat if I use a placeholder?

I should use it on different projects, but as you can imagine I use a graphic from material ui for the input field.

For example in a project I need the possibility to select the range between two dates plus the time, but not to select past dates.

Have you seen the bug I reported to you?

[aadilhasan]

@Angelk90 yes i have seen the bugs you reported, i will work on them. and if you are using a custom placeholder then you will have to format the date yourself.

[Angelk90]

@aadilhasan :
There is no way we can use it in any way: import { formatDate } from './utils';

[aadilhasan]

@Angelk90
The way you have explained i can do it, but thats not the purpose of this app, normally a developer exposes some apis for the user with enough data and user have to work with it, in this case you are getting a date object and thats all you need, and now its your responsibility to format it if you don't want to use the exiting component. you have enough data to do so.

[Angelk90]

@aadilhasan :
I the placeholder as you thought I had more idea that it was a wrapper a container that only served to keep the data that is the text from the calendar.
That should not even deal with the formatting of the text if the props placeholder is activated, I don't know if I explained myself well.
Anyway, let's try to find a solution if you want.

[Angelk90]

@aadilhasan : Are there any news? #7, #8, #9

[aadilhasan]

@Angelk90 not all of them, these are mostly features, i was working on bug fixes and some must have feature, i will soon start working on remaining.

[Angelk90]

@aadilhasan : Is there any news?
Specifically for the 24 hour format?

[aadilhasan]

@Angelk90 everything is work in progress.