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}
Related
How to select a past date in the DOB field? What Javascript function can I use in Cypress automation?
It is not a free text field, only can select from the date picker. Here is the screenshot and the HTML
<input _ngcontent-kgi-c484="" id="dob" formcontrolname="dob" readonly=""
bsdatepicker="" placeholder="Optional" class="form-control
plore-form-control ng-valid ng-touched ng-dirty" ng-reflect-name="dob"
ng-reflect-bs-config="[object Object]"
ng-reflect-max-date="Fri Apr 16 2021 00:00:00 GMT+1">
I tried this function but it didn't work
cy.get('#dob').invoke('val').then((text) => {
expect('08/05/1999').to.equal(text);
What I did was add a custom command (we have various datepickers throughout our system, each having a slightly different selector).
Cypress.Commands.add("setDateInput", (selector, value) => {
// wait for the flatpickr instance to be applied before setting the date
// 'flatpickr-input' class is added on initiation
cy.get(`${selector}.flatpickr-input`).then($el => {
$el.get(0)._flatpickr.setDate(value, true)
})
});
Here, you can pass in a changing selector and then the DD/MM/YYYY format as parameters. Hope this helps someone.
The control is a bunch of buttons, you can click them in Cypress, e.g
cy.get('button').contains('8').click(); // select the 8th day
The chevrons (left and right) you'll need to click a few times,
cy.get('button.uib-left').click().click().click().click() // keep going for MM/YY
You can click on that middle part, but I can't figure that one out exactly.
Ok, I figured it out, click "April 2021" once to choose the month
cy.get('button').contains('April 2021').click();
// now select the month
cy.get('button').contains('May').click()
OR click the "April 2021" then "2021" to select the year
cy.get('button').contains('April 2021').click();
cy.get('button').contains('2021').click();
cy.get('button.uib-left').click().click() // get decade with 1999
// now select the year
cy.get('button').contains('1999').click()
But you get the idea, interact the way a user does.
how can I get current solar year local fa (not full date) in react?
I just need to get solar year (jalali) and I'm using this:
new Date().toLocaleDateString('fa-IR');
but it return current date (24/04/1399). I just want (1399)
You can pass additional options, and transform output as you want
new Date().toLocaleDateString('fa-IR', {year: 'numeric'} );
I find that.
the answer is :
new Date().toLocaleDateString("fa-IR", {year: "numeric" });
the above code return 1399. (current jalali year (persian date))
new Date().getFullYear(); // 2020
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;
}
Hi I'm new to day pilot scheduler,
I have referred this day pilot scheduler https://code.daypilot.org/54503/angularjs-timesheet-tutorial-javascript-php to use my time sheet.
here what I want is I want to select date depend upon sidebar calender.
Here I don't know how the current date is selected.
In timesheet I want to show only the selected week.
days: new DayPilot.Date().daysInMonth(),
startDate: new DayPilot.Date().firstDayOfMonth(),
I tried to understand the code but it is little bit difficult to me.
can any one tell me how to set the selected date depends upon side calender control.
Thanks
$scope.scheduler = {
viewType: "Days",
showNonBusiness: false,
businessBeginsHour: 9,
businessEndsHour: 17,
cellWidthSpec: "Auto",
scale: "CellDuration",
cellDuration: "15",
useEventBoxes: "Never",
days: 7,
startDate: (new DayPilot.Date().firstDayOfWeek())}
after using days:7
it return 7 days only
https://forums.daypilot.org/Topic.aspx/3974/daypilot-scheduler-end-date-set-as-current
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')}
/>