日期选择器 - 要选择的日期 --> 从今天起 2 天

Question

我可以通过以下两个步骤从选择器中选择一个日期。

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

我觉得有一种更简洁的方式来选择约会对象。另外，如何选择今天+天的日期？第一步完成后，显示的是picker相关的DOM（下图）。

我在网上找到了这个函数，它只是计算 TO 日期（从日期 + 3）。如果可以通过键盘输入目前不是选项的日期，则此方法可以正常工作。我可以使用 day 将其传递给 DOM 并从选择器中选择日期/天。挑战在于如果 From 日期接近月底，则返回/返回该月并选择正确的日期。

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

让我分享一个如何与 Element UI 日期选择器交互的示例。该方法类似于任何其他日期选择器，但是，行为/样式/选择器会有所不同。

主要目标是在日期选择器上创建一个抽象层，并添加一些辅助函数来更轻松地操作日期。

  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))
  })

您会在要点中找到 DatePickerElement 和 currentDateShift 实现，以及完整的示例 https://gist.github.com/mgrybyk/a2fec1b0dae7dd1ecafbc4e39817d351#file-datepicker-js