How to use this Datepicker with Puppeteer

Question

I would like to crawl flight data from the following page: https://www.airprishtina.com/de/

I managed to select the airports, but this page has a Datepicker and I don't get it how to use it programmatically. With a Click on the Startdate Input i can open the Datepicker,

await page.click('#txt_FromDateText');

But what do I need to do to select the date/date range ? I tried to wait for a day selector and click One, but this does not work.

const daySelector = '.available.flight-present';
await page.waitForSelector(daySelector);   
const elements = await page.$('.available');
const el = Array.from(elements).filter(el => {
    return el.dataset.usrDate === '2019-10-26';
})[0];
console.log(el);
await el.click();

console.log ist printing the element, but it does not get selected in the datepicker. What am I doing wrong?

Thanks for any hints.

score 6 · Answer 1 · answered Mar 22 '20 at 18:11

6

select your date
await page.focus('#txt_FromDateText');

if your date is in some other format just change it accordingly.
await page.keyboard.type('20191026');

answered Mar 22 '20 at 18:11

pranavpie

101
2
4

score 6 · Answer 2 · answered Jun 21 '20 at 20:15

6

the solution is to remove the readonly attribute from the #txt_FromDateText element.

await page.focus('#txt_FromDateText');
await page.$eval('#txt_FromDateText',(e) => e.removeAttribute("readonly"));

Then you can enter any date with "await page.type".

:)

answered Jun 21 '20 at 20:15

Fritz Sierra Tintaya

126
1
3

nice idea, but it is not working for me. – Muhammad Uzair Jul 27 '22 at 12:26
1

update: above method worked for me. – Muhammad Uzair Jul 27 '22 at 12:53

score 2 · Answer 3 · edited Mar 06 '21 at 08:26

2

If you want to select a particular date, you can do it as below:

await page.$eval('#txt_FromDateText', el => el.value = '2021-03-02');

edited Mar 06 '21 at 08:26

Pang

9,564
146
81
122

answered Mar 06 '21 at 07:48

kalyani

31
3

How to use this Datepicker with Puppeteer

3 Answers3