Question

我有一个范围amp-date-picker，内部有2个输入（一个用于开始日期，一个用于结束日期）在台式机版本上，一切正常。但是在移动设备上，输入被编译为只读，因此即使未选择日期，表单仍有效（尽管它们是必需的，因为它们也被编译为只读，因此您可以在未选择日期的情况下提交）

我试图获取有关只读的信息，但到目前为止，我发现只有不指定它，才不会发生这种情况。我还尝试在脚本中将元素的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设置为“”。请注意，我在所有项目中都没有readonly属性（我什至进行了全局搜索以查看是否错过了某些内容）。

编辑：如果我删除了为amp-date-picker的input-selector道具指定的属性，则只读道具似乎消失了。但是在桌面版本上，该属性是起作用的，为了使日期选择器正常工作，我也需要该属性。我也无法在他们的文档中找到有关如何制作日历的信息。

编辑2：找到一种解决方法：当我打开带有日历的框时，我通常将脚本中的readOnly属性设置为false。据我了解，amp日历将输入设置为只读（找不到信息，但已设置，并且我看不到任何其他说明）。

如果有人可以向我解释为什么台式机版本可以运行但移动设备无法运行，我仍然会非常感激（可能必须对移动设备最初是隐藏的，以便该属性在之后以某种方式进行编译？）进行。

如果有人可以帮助我提供更好的解决方案，我也将非常感激（我认为这有点怪异）

输入被编译为只读甚至很难，我没有将其指定为只读

0 个答案: