如何为日期选择器输入设置段落样式？

野马95

我制作了一个小日历应用程序，可以在其中添加带有开始日期和重复设置的事件。因此，它可以每天，每周或每月发生。如果您选择每日重复，则在此摘录中可以看到文本。

现在，我想知道是否可以将Datefield样式设置为仍具有dropdown-datepicker的普通段落。我该怎么办？

function rrendClose() {
    document.getElementById('dailyText').innerText = "Takes place every day.";
    document.getElementById('dailyEnddate').style.visibility = "collapse";
    document.getElementById('dailyDismiss').style.visibility = "collapse";
    document.getElementById('showFullDaily').style.visibility = "visible";
  }

  function rrendOpen() {
    document.getElementById('dailyText').innerText = "Takes place every day, until";
    document.getElementById('dailyEnddate').style.visibility = "visible";
    document.getElementById('dailyDismiss').style.visibility = "visible";
    document.getElementById('showFullDaily').style.visibility = "collapse";
  }

<div class="row">
    <p class="pt-1"><p class="ml-3" id="dailyText">Takes place evry day, until</p>
    <a id="showFullDaily" class="link" onclick="rrendOpen();" style="visibility: collapse;" >Add enddate</a>
    <input name="rrend" class="col-5 form-control border border-dark auto-date" type="date" id="dailyEnddate" value="{{date("d.m.Y")}}">
    <button type="button" id="dailyDismiss" class="close col-1" aria-label="Close" onclick="rrendClose();">
        <span aria-hidden="true">&times;</span>
    </button></p>
</div>

广岛阮

一些变化：

删除与文本框相关的样式（特别是边框和填充），然后使其“继承”字体样式。
showFullDaily之所以切换为使用该display属性，是visibility因为后者虽然可见地隐藏了元素，但保留了文本应有的空间，而显示却没有。
dailyText之所以从p标记更改为标记，是span因为1）p标签不应相互嵌套，并且2）span是内联元素，因此它自然地继续进行流程而没有其他样式。所有这些更改一起使输入元素可以折叠并随段落一起流动。

function rrendClose() {
    document.getElementById('dailyText').innerText = "Takes place every day.";
    document.getElementById('dailyEnddate').style.visibility = "collapse";
    document.getElementById('dailyDismiss').style.visibility = "collapse";
    document.getElementById('showFullDaily').style.display = "block";
  }

  function rrendOpen() {
    document.getElementById('dailyText').innerText = "Takes place every day, until";
    document.getElementById('dailyEnddate').style.visibility = "visible";
    document.getElementById('dailyDismiss').style.visibility = "visible";
    document.getElementById('showFullDaily').style.display = "none";
  }

#dailyEnddate {
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
}

<div class="row">
    <p class="pt-1"><span class="ml-3" id="dailyText">Takes place evry day, until</span>
    <a id="showFullDaily" class="link" onclick="rrendOpen();" style="display: none;" >Add enddate</a>
    <input name="rrend" class="col-5 form-control border border-dark auto-date" type="date" id="dailyEnddate" value="{{date("d.m.Y")}}">
    <button type="button" id="dailyDismiss" class="close col-1" aria-label="Close" onclick="rrendClose();">
        <span aria-hidden="true">&times;</span>
    </button></p>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。