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.
Related
I want to modify the visible range showed in the agenda view so it includes all the days from the current month only, so far this is my attempt:
const Scheduler = () => {
const [currentDate, setCurrentDate] = useState(new Date())
const onNavigate = newDate => {
const d = new Date(newDate.getFullYear(), newDate.getMonth(), 1);
setCurrentDate(d)
}
return (
<Calendar
onNavigate={onNavigate}
date={currentDate}
/>
)
}
So because per default the length prop is set to 30 to accomplish my goal I just need to set the day of date prop to always be first one, this is why inside onNavigate function I create a new Date object (called d in my code) in which I basically copy the Date object being received by the function but set its day to 1.
This works only the first time I click the next button, if I attempt to go to future months nothing happens and when I log the Date object received by the function(newDate in the code) it changes only the first time the function is called but after that the Date it receives is always the same one.
This happens only for the agenda view and only when going to future months.
I can go just fine to past months in the agenda view and in the calendar view I can go to future and past months without problems.
PD: I omited unnecessary props like events, localizer... etc because I think they are not relevant as the calendar works fine is just this functionality I'm trying to change that is not working as expected.
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.
Does mobiscroll have a method to get the day of week in given language (set from 'lang' option). I could not find in the docs.
Bellow is a snippet code what I want to achieve.
$('#mobiscroll').mobiscroll().calendar({
onSet: function (event, inst) {
var DayOfWeek = event. // ex: Saturday
var Day = event. // ex: 20
var Year = event. // ex: 2020
}
});
You could get it from the dayNames array, but I'm not sure how does that help you?
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 || ""
});
}