Saya telah membuat aplikasi kalender kecil, di mana seseorang dapat menambahkan acara dengan tanggal mulai dan pengaturan untuk pengulangan. Jadi bisa harian atau mingguan atau bulanan. Dalam Cuplikan ini Anda dapat melihat Teks jika Anda memilih pengulangan harian.

Sekarang saya bertanya-tanya apakah mungkin untuk menata Datefield seperti paragraf normal yang masih memiliki dropdown-datepicker. Bagaimana saya bisa melakukan itu?

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>
1
user12146871 28 Oktober 2019, 16:35

2 jawaban

Jawaban Terbaik

Beberapa perubahan:

  • Hapus gaya terkait kotak teks (khususnya perbatasan dan padding) dan kemudian buat "mewarisi" gaya font.
  • showFullDaily dialihkan untuk menggunakan properti display alih-alih visibility karena yang terakhir, sementara menyembunyikan elemen secara terlihat, meninggalkan ruang di mana teks seharusnya berada, sementara tampilan tidak.
  • dailyText diubah dari tag p menjadi span karena 1) tag p tidak boleh bersarang satu sama lain dan 2) span adalah elemen sebaris , sehingga secara alami melanjutkan aliran tanpa gaya tambahan. Semua perubahan ini bersama-sama memungkinkan elemen input runtuh dan mengalir bersama paragraf.
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 Oktober 2019, 14:00

Pergi ke CSS dan ketik:

.row {

display: flex

}
0
Brian Nguyen 28 Oktober 2019, 13:39