Date Picker - Date to select --> 2 days from today

Question

I am able to pick a date from the picker with the following two steps.

$$('button[class*="MuiButtonBase-root"]')[2].click()
$$('[class*="MuiTypography-root"]')[95].click()

I have a feeling there's a cleaner way to pick a date. Also, how can pick the date to be today + days? After the first step, the DOM (below) related to the picker is displayed.

I found this function on the Web which simply does the calculation of the TO date (From Date + 3). This works fine if one can keyboard enter the date which is not an option right now. I can use the day to pass it to the DOM and pick a date/day from the Picker. The challenge is to go back/forth for the month and pick the right date if the From date falls close to the end of the month.

function getdate() {
var tt = document.getElementById('txtDate').value;

var date = new Date(tt);
var newdate = new Date(date);

newdate.setDate(newdate.getDate() + 3);

var dd = newdate.getDate();
var mm = newdate.getMonth() + 1;
var y = newdate.getFullYear();

var someFormattedDate = mm + '/' + dd + '/' + y;
document.getElementById('follow_Date').value = someFormattedDate;

}

<div class="MuiPaper-root MuiPopover-paper MuiPaper-elevation8 MuiPaper-rounded" tabindex="-1" style="opacity: 1; transform: none; transition: opacity 313ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 208ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; top: 493px; left: 200px; transform-origin: 155px 0px;"><div class="MuiPickersBasePicker-container"><div class="MuiPickersBasePicker-pickerView"><div><div class="MuiPickersCalendarHeader-switchHeader"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersCalendarHeader-iconButton Mui-disabled Mui-disabled" tabindex="-1" type="button" disabled=""><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg></span></button><div class="MuiPickersSlideTransition-transitionContainer MuiPickersCalendarHeader-transitionContainer"><p class="MuiTypography-root MuiTypography-body1 MuiTypography-alignCenter">December 2020</p></div><button class="MuiButtonBase-root MuiIconButton-root MuiPickersCalendarHeader-iconButton" tabindex="0" type="button"><span class="MuiIconButton-label"><svg class="MuiSvgIcon-root" focusable="false" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"></path><path fill="none" d="M0 0h24v24H0V0z"></path></svg></span><span class="MuiTouchRipple-root"></span></button></div><div class="MuiPickersCalendarHeader-daysHeader"><span class="MuiTypography-root MuiPickersCalendarHeader-dayLabel MuiTypography-caption">Su</span><span class="MuiTypography-root MuiPickersCalendarHeader-dayLabel MuiTypography-caption">Mo</span><span class="MuiTypography-root MuiPickersCalendarHeader-dayLabel MuiTypography-caption">Tu</span><span class="MuiTypography-root MuiPickersCalendarHeader-dayLabel MuiTypography-caption">We</span><span class="MuiTypography-root MuiPickersCalendarHeader-dayLabel MuiTypography-caption">Th</span><span class="MuiTypography-root MuiPickersCalendarHeader-dayLabel MuiTypography-caption">Fr</span><span class="MuiTypography-root MuiPickersCalendarHeader-dayLabel MuiTypography-caption">Sa</span></div></div><div class="MuiPickersSlideTransition-transitionContainer MuiPickersCalendar-transitionContainer"><div><div class="MuiPickersCalendar-week"><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-hidden MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">29</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-hidden MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">30</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">1</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">2</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">3</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">4</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">5</p></span><span class="MuiTouchRipple-root"></span></button></div></div><div class="MuiPickersCalendar-week"><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">6</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">7</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">8</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">9</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">10</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">11</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">12</p></span><span class="MuiTouchRipple-root"></span></button></div></div><div class="MuiPickersCalendar-week"><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">13</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">14</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">15</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">16</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">17</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">18</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">19</p></span><span class="MuiTouchRipple-root"></span></button></div></div><div class="MuiPickersCalendar-week"><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">20</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">21</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-dayDisabled" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">22</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-current" tabindex="0" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">23</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" tabindex="0" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">24</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" tabindex="0" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">25</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-daySelected" tabindex="0" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">26</p></span><span class="MuiTouchRipple-root"></span></button></div></div><div class="MuiPickersCalendar-week"><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" tabindex="0" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">27</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" tabindex="0" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">28</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" tabindex="0" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">29</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" tabindex="0" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">30</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day" tabindex="0" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">31</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-hidden" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">1</p></span><span class="MuiTouchRipple-root"></span></button></div><div role="presentation"><button class="MuiButtonBase-root MuiIconButton-root MuiPickersDay-day MuiPickersDay-hidden" tabindex="-1" type="button"><span class="MuiIconButton-label"><p class="MuiTypography-root MuiTypography-body2 MuiTypography-colorInherit">2</p></span><span class="MuiTouchRipple-root"></span></button></div></div></div></div></div></div></div>

The question sounds more like how to do programming... You can get current date, then add +/-2 days or whatever, get month from date and check if you need to switch the month, once you are done with the month - select day of month. The same if you need to change the year. So you need to build an abstraction layer to interact with the date picker element — Mike G., Dec 24 '20 at 08:43
Understanding how xpath selectors work should help with improving selectors you have above. — Mike G., Dec 24 '20 at 08:45
Yeah, unfortunately, there’s no easy way to pick today + 2 consistently, since you run into the end-of-month issue, where you’d need to click over to the next month for that day to be available. The most sensible thing, I think, would be to push back on the developers responsible for this part of the app to get them to allow keyboard entry instead of limiting it to click-only. It’s totally unreasonable to make one deal with simulating that complex of user interaction. — Bhoomiputra, Dec 24 '20 at 21:23
It's up to you, makes sense if the picker is not developed by your team, otherwise it should be relatively easy to deal with it. Don't be afraid trying, start from the top layer, imagine how would you like to use it, then use xpath to get elements by text. Good luck! — Mike G., Dec 24 '20 at 22:26
Does this answer your question? [Add days to JavaScript Date](https://stackoverflow.com/questions/563406/add-days-to-javascript-date) — kmoser, Dec 27 '20 at 23:59

score 0 · Answer 1 · answered Jan 19 '21 at 10:03

Let me share an example of how to interact with Element UI datepicker. The approach is similar to any other datepickers however, behavior/styling/selectors will differ.

The main goal is to create an abstraction layer over the datepicker and add some helper functions to manipulate dates easier.

  it('set current date +60 days', () => {
    browser.url('https://element.eleme.io/#/en-US/component/date-picker')

    // first date picker input on the page
    const datePickerInput = $('.el-date-editor>input')
    expect(datePickerInput).toBeClickable()

    // use date helper function to easily pass +/- days
    const dateToBeSet = currentDateShift(60) // current date + 60 days
    
    // abstraction should be easy to use
    const datePicker = new DatePickerElement(datePickerInput)
    datePicker.setValue(dateToBeSet)

    // make sure date set correctly
    expect(datePickerInput).toHaveValue(formatDate(dateToBeSet))
  })

You'll find DatePickerElement and currentDateShift implementations in the gist, as well as fully working example https://gist.github.com/mgrybyk/a2fec1b0dae7dd1ecafbc4e39817d351#file-datepicker-js

try changing `60` to `600` or `-600` to see how `DatePickerElement` handles month/year changes. — Mike G., Jan 19 '21 at 10:13

Date Picker - Date to select --> 2 days from today

1 Answers1