Как оформить ввод даты в виде абзаца?

Question

Я сделал небольшое приложение-календарь, в которое можно добавлять события с начальной датой и настройками повтора. Так что это может происходить ежедневно, еженедельно или ежемесячно. В этом фрагменте вы можете увидеть текст, если вы выбрали ежедневное повторение.

Теперь я задаюсь вопросом, возможно ли стилизовать поле даты как обычный абзац, у которого все еще есть выпадающий список. Как я мог это сделать?

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>

javascript html css datepicker

2

Bronco95 28 Окт 2019 в 16:35

Answer 1

Некоторые изменения:

Удалите стили, связанные с текстовым полем (особенно границы и отступы), а затем заставьте его «наследовать» стили шрифта.
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>

1

Quangdao Nguyen 28 Окт 2019 в 14:00

Answer 2

Перейти к CSS и введите:

.row {

display: flex

}

0

Brian Nguyen 28 Окт 2019 в 13:39

Как оформить ввод даты в виде абзаца?

2 ответа

Похожие вопросы

Новые вопросы

javascript