Входные данные скомпилированы как доступные только для чтения, даже если я не указал их только для чтения - PullRequest
Новая
       5

Входные данные скомпилированы как доступные только для чтения, даже если я не указал их только для чтения

0 голосов
/ 12 июня 2019

У меня есть амперметр для выбора диапазона, и внутри у меня есть 2 входа (один для даты начала и один для даты окончания). В настольной версии все работает нормально.Но на мобильном устройстве входные данные скомпилированы как доступные только для чтения, поэтому форма оказывается действительной, даже если дата не выбрана (несмотря на то, что они требуются, поскольку они также скомпилированы как доступные только для чтения, которые можно отправить, если дата не выбрана)

Я пытался найти информацию о readonly, но пока я узнал только, что, если я не укажу это, этого не произойдет.Я также попытался установить для атрибута readOnly элемента значение false в скрипте.Но не работает.Если я удаляю атрибут из консоли работает.Также, если я установил атрибут readOnly из консоли.Но я не могу найти правильное решение в своем приложении.

это мой сборщик дат: 

      <amp-date-picker
              id="book-date-picker"
              type="range"
              mode="overlay"
              layout="container"
              format="DD / MM / YYYY"
              locale="{{lng}}"
              first-day-of-week="1"
              min="{{dateFormat today format="YYYY-MM-DD" }}"
              start-input-selector="[name=start-date]"
              end-input-selector="[name=end-date]"
              on="activate: AMP.setState({opened: true});
                                deactivate: AMP.setState({opened: true});
                        select: AMP.setState({opened: false});"
      >
        <div class="input">
          <input required id="start-date" name="start-date" placeholder="{{text "select date"}}">
          <label for="start-date">
            <i class="right-icon material-icons">today</i>
          </label>
        </div>

        <div class="input">
          <input required id="end-date" name="end-date" placeholder="{{text "select date"}}">
          <label for="end-date">
            <i class="right-icon material-icons">today</i>
          </label>
        </div>
      </amp-date-picker>

и это то, что скомпилировано в браузере: 

<amp-date-picker id="book-date-picker" type="range" mode="overlay" layout="container" format="DD / MM / YYYY" locale="es" first-day-of-week="1" min="2019-06-12" start-input-selector="[name=start-date]" end-input-selector="[name=end-date]" on="activate: AMP.setState({opened: true});
                                deactivate: AMP.setState({opened: true});
                        select: AMP.setState({opened: false});" class="i-amphtml-element i-amphtml-layout-container i-amphtml-default-week-day-format i-amphtml-layout" i-amphtml-layout="container">
        <div class="input">
          <input required="" id="start-date" name="start-date" placeholder="Selecciona una fecha" readonly="">
          <label for="start-date">
            <i class="right-icon material-icons">today</i>
          </label>
        </div>

        <div class="input">
          <input required="" id="end-date" name="end-date" placeholder="Selecciona una fecha" readonly="">
          <label for="end-date">
            <i class="right-icon material-icons">today</i>
          </label>
        </div>
      <div class="i-amphtml-date-picker-container amp-date-picker-calendar-container amp-date-picker-resize-bug"></div></amp-date-picker>

Я ожидаю, что ни один из входов не будет доступен только для чтения.Вместо этого readonly устанавливается на "" на обоих входах.Обратите внимание, что у меня нет атрибута «только для чтения» во всех моих проектах (я даже провел поиск по всему миру, чтобы посмотреть, пропустил ли я что-то).

РЕДАКТИРОВАТЬ: если я удалю атрибут, указанный для реквизита селектора ввода amp-date-сборщик только для чтения, кажется, ушел.Но на десктопной версии работает с этим атрибутом, и мне это тоже нужно для правильной работы выбора даты.Я также не смог найти в их документации информацию о том, как сделать календарь обязательным.

РЕДАКТИРОВАТЬ 2: нашел обходной путь: когда я открываю окно с календарем, я вручную устанавливаю для readOnly propetry значение false в сценарии.Из того, что я понимаю, календарь amp устанавливает вход только для чтения (не нашел информацию, но они установлены, и я не вижу никаких других объяснений).мне почему настольная версия работает, а мобильная нет (вероятно, что-то связано с тем, что мобильный изначально спрятан, так что свойство как-то компилируется после?).

Я также был бы очень признателен, если бы кто-то мог помочь мне с лучшими исправлениями, если таковые имеются (я думаю, что это отчасти хаки)

...