Input Kalender
<input type="date" data-date-inline-picker="true" />
Thoughtless Teira
<input type="date" data-date-inline-picker="true" />
$('.datepicker').datepicker({
startDate: '-3d'
});
<mat-form-field class="example-full-width" appearance="fill">
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<button mat-raised-button (click)="picker.open()">Open</button>() => {
const [startDate, setStartDate] = useState(new Date());
const years = range(1990, getYear(new Date()) + 1, 1);
const months = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
return (
<DatePicker
renderCustomHeader={({
date,
changeYear,
changeMonth,
decreaseMonth,
increaseMonth,
prevMonthButtonDisabled,
nextMonthButtonDisabled,
}) => (
<div
style={{
margin: 10,
display: "flex",
justifyContent: "center",
}}
>
<button onClick={decreaseMonth} disabled={prevMonthButtonDisabled}>
{"<"}
</button>
<select
value={getYear(date)}
onChange={({ target: { value } }) => changeYear(value)}
>
{years.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<select
value={months[getMonth(date)]}
onChange={({ target: { value } }) =>
changeMonth(months.indexOf(value))
}
>
{months.map((option) => (
<option key={option} value={option}>
{option}
</option>
))}
</select>
<button onClick={increaseMonth} disabled={nextMonthButtonDisabled}>
{">"}
</button>
</div>
)}
selected={startDate}
onChange={(date) => setStartDate(date)}
/>
);
};Some date pickers allow you to type. In this case we can
just use sendKeys method to enter the date we want.
If that does not work, we need to write our logic
for this using java and selenium.
1. Click on the field to trigger the date picker
2. Get the displayed date on the date picker and calculate
how many times you need to click left/right
to go to the right month/year.
3. Once we go to the correct month/year, select the date.