I am using Ant Design Calendar in my React project and I want to disable all the dates before today so that the user cannot select it.
The Calendar component looks like -
<Calendar
fullscreen={false}
onPanelChange={this._onPanelChange}
onSelect={this._onDateSelect}
disabledDate={() => }
/>
The Calendar API says we need to add disabledDate (which returns a boolean) in order to specify that using momentjs.
What should the query look like in moment.js?
Thanks in advance.
I use disabledDate in rangePicker .
disabledDate={(current) => {
return
current && current && current < moment().subtract(1, "days") ||
current >= moment(Date.now()).add(rangepickerlimitmonth, 'month');
}}
tell me to delete this answer if doesn't work.
rangepickerlimitmonthis a number I used to limit date in future which user can't select.
Related
I am using the html input type date on a form in react. Previously when encountering issues with the javascript date object and getting it to display correctly, I used the method of .replace(/-/g, "/") and the day passed in would be displayed correctly.
I am making a new app and trying the same thing and receiving the following error basically copying and pasting lines of code.
The specified value "2021/07/06" does not conform to the required format, "yyyy-MM-dd".
So apparently you are required to do a timezone offset to get the date object to correctly display in react?
Here is what i am trying to do to get a proper date to display in the value of the date picker:
<input
type='date'
name='startDate'
value={startDisplay != null && startDisplay}
id=''
onChange={(e) => {
setStartDate(e.target.value);
setStartDisplay(
Intl.DateTimeFormat({
year: "numeric",
month: "numeric",
day: "numeric",
})
.format(new Date(startDate))
.replace(/-/, "/")
.replace(/-/, "/")
);
}}
/>
I'm wondering if there is a fix that allows the replace method to work, or if someone can help me write a function for setDisplayDate that properly uses timezoneoffset.
or should I just suck it up and add the date picker library?
I have date-picker component (DayPickerSingleDateController).
There is "
isoutsiderange
property (available only +4 (from to day) days. )
But because of this an error occurs. Event if current month don't have available dates it still shows current month onClick.
Now i trying to add initialMonth property in which I would like to check if there are not dates available in this month, then () => moment().add(1, 'month').
initialVisibleMonth={.... () => moment().add(1, 'month')}
isOutsideRange={(day) => isInclusivelyBeforeDay(day, moment().add(4, 'days'))}
How can i do that?
I got the following solution for my problem.
I declared the isAvailableDaysInCurrentMonth variable like this.
const firstAvailableDay = moment().add(3, 'days') // in my situation, i need "not earlier then 3 days"
const isCurrentMonthExcludeAvailableDate = (moment().month() !== firstAvailableDay.month());
Now i can set initial month in singleDatePicker.
So if there are not available dates in current month, then set next month for show.
<DayPickerSingleDateController
...
initialVisibleMonth={isCurrentMonthExcludeAvailableDate ? () => moment().add(1, 'month') : null}
>
I found this answer myself, maybe there is a more elegant solution, but still it may be useful for someone.
How can I make that ReactJS Datepicker should only display days starting from this month and on (no back dates).
This is not exactly what I was trying to do but its a quick fix.
I use the includeDates={this.state.includeDates} from ReactJS Datepicker
and I made a custom function to print out the days starting from today and i save it in an array that i then pass to the react state excludeDates: [''],
and only those days will be clickable.
let fromDate = moment();
let toDate = moment().add(24, 'months'); //including only days starting from today untill 2 year
for (let i = 0; i < moment(toDate).diff(fromDate, 'days') + 1; i++) {
state.includeDates.push(moment(fromDate).add(i, 'days'));
}
Thanl you! hope it helps someone.
You can use moment startOf using 'month' parameter to get the first day of the month and pass it to minDate option to make the datepicker enable only dates from the start of the current month:
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
minDate={moment().startOf('month')}
/>
If you want to enable only future dates, simply remove maxDate option from the linked example, you can use the following code:
<DatePicker
selected={this.state.startDate}
onChange={this.handleChange}
minDate={moment().startOf('day')}
/>
I'm using Moment.js with react-datepicker. It works as intended in terms of the date transformation to ISO-8601, but I can't get it compliant with the time.
Here's my component:
Stated initially:
this.state = {
from: moment().subtract(7, "days"), // Default 1 week back
to: moment(), // Current date
};
The component itself:
<DatePicker
dateFormat="DD-MMM HH:mm"
dropdownMode="select"
selected={this.state.from}
onChange={this.handleFromChange}
/>
And the onchange trigger:
handleFromChange(date) {
this.setState({
from : date
});
}
I think my issue is the dateFormat; The DD-MMM are easily transformed to ISO-8601 by calling using the ECMAScript function toISOString() before posting it to some backend services. But how do I get the time to go with it?
The user(myself, testing) can chance the time on the datepicker itself, but it won't register in the state. Simply it will just pick the current time, or current time 1 week ago(as per the moment from/to initial states). The date, i can change also, but the time remains the same(current time).
How do I change the dateFormat so it takes the time input from the user? How do I make it ISO 8601 compliant per default in the dateFormat attribute?
Edit: I just tested with setting "from" to subtract 5 minutes at such:
this.state = {
from: moment().subtract(5, "minutes"),
to: moment(), // Current date
};
And it formats it correctly when I post it. Seems strange. It must be related to the onChange function then?
Try using dateFormat="dd-MMM hh:mm" and change onChange function to this to avoid error.
handleFromChange(date) {
this.setState({
from : date || ""
});
}
I've added the calendar from http://www.dynarch.com/projects/calendar/old/ onto my wordpress site. It loads fine but I don't want people to select dates in the past which I've managed to do but want to add a strikethrough but don't know how. Please help.
Thanks
http://www.dynarch.com/static/jscalendar-1.0/doc/html/reference.html#node_sec_5.3.7
You need your own disabled date handler
For example
function disallowDate(date) {
// date is a JS Date object
var d=new Date();
if ( date.getTime() < d.getTime()) {
return true; // disable anything less than today
}
return false; // enable other dates
};
calendar.setDisabledHandler(disallowDate);