Is there a property to change to months index to start at 1 instead of zero, ie march = 3 but the output on the calendar is april, I can manually do this but its very hacky
Anyone know if there a property I can set on this library react-calendar
The library
you need to do few things.
1- set Min and max date value
const startDate = new Date(new Date().getFullYear(), new Date().getMonth(), 1)
const endDate = new Date(new Date().getFullYear(), new Date().getMonth(), 31)
then you need to specify those values within the calendar
<Calendar
data-name="yourselectionName"
data-value={hooksVariable}
onChange={hooksUpdateMethod}
value={currentDate}
minDate={startDate}
maxDate={endDate}
name={name}
/>
by then only dates in range will be selectable but you still need to hide date that are not within range using css by this:
.react-calendar__month-view__days__day--neighboringMonth {
display: none !important;
}
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.
Expected behavior
I want a user to be able to select all years in the year range in the date picker in hijri.
Actual behavior
A user can only choose 15 in the range. Say the range goes from 1436 - 1417, the user would first have to click on 1417, and then he would click the list again and could now select down to 1416. How to I modify the code so a user can scroll from all years and don't have to click multiple times to get to the right year?
All you have to do is to set minDate and maxDate like that:
<input class="form-control" (click)="d.toggle()" placeholder="yyyy-mm-dd"
[maxDate]="maxDate" [minDate]="minDate" [startDate]="startDate"
placement="bottom"
name="dp" [(ngModel)]="model" ngbDatepicker #d="ngbDatepicker">
and in typescript code :
maxDate ={year: new Date().getUTCFullYear()-16,month: 12, day: 31}
minDate ={year: new Date().getUTCFullYear()-100,month: 12, day: 31}
startDate={year: new Date().getUTCFullYear()-20,month: new Date().getUTCMonth(), day: 1}
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 need to do Validation for both Start Time And End Time, if start time is greater then end Time Throw and error.
How Can i achieve this.
Which Events do i need to use to get the validation done onselect, onclose??
Please Help me out
Thanks
You can do this using onSelect event making changes to the mobiscroll.
Here is an example i tried.. you might find useful
onSelect: function (dateText, inst) {
var newMinDate, newMaxDate;
endDate = new Date(dateText);
var newEndDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 5);
$endCal.mobiscroll('setDate', newEndDate);
newMinDate = new Date(endDate.getFullYear(), endDate.getMonth(), endDate.getDate() + 1),
$endCal.mobiscroll('option', {
minDate: newMinDate
});
}
https://jsfiddle.net/sarvesh310/742Lqagk/2/
You can dynamically set the minDate and maxDate options in the onSelect event, e.g.:
$('#end_time').scroller('option', 'minDate', $('#start_time').scroller('getDate'));
A working example (does not allow to select a start date > end date):
http://jsfiddle.net/dioslaska/2MVv6/1/
This works with date and datetimepickers as well.