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>

Answer 1

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