Calender - suthikiet076/ASP.NET-jQueryLibrary GitHub Wiki

#Calender

วิธีการติดตั้ง

เพิ่ม tag สำหรับ การแสดงผลของ Calendar ในการ Pickup

   <a class="c-btn c-datepicker-btn">
    <span class="material-icon">calender</span>
  </a>

เพิ่ม tag สำหรับ การ Output ในการแสดงผลลัพธ์ให้แสดงค่าจาก Calendar

<pre id="output"></pre>

สุดท้ายเพิ่มการ Require ไฟล์ Script ของ Calendar และเพิ่มในส่วนของการเรียกใช้งาน ปิด-เปิด Calendar

<script src="[Your Path]/datepicker.standalone.js" charset="utf-8"></script>
  <script>
    const picker = new MaterialDatePicker({})
      .on('submit', (d) => {
        output.innerText = d;
      });

    const el = document.querySelector('.c-datepicker-btn');
    el.addEventListener('click', () => {
      picker.open();
    }, false);
</script>

ตัวอย่างการใช้งานเบื้องต้น

  1. กดคลิ๊กปุ่ม Calender  
  2. เลือกวันที่
  1. เลือกเวลาสามารถเลือกหน่วยว่าเป็น AM หรือ PM ได้ เมื่อเสร็จสิ้นกด OK หากจะยกเลิกกด Cancel

ผลลัพธ์

Sample Code

ตัวอย่าง Function ของการ Input ค่าของวัน เดือน

⚠️ **GitHub.com Fallback** ⚠️