สร้างตัวเลือกปฎิทินสำหรับปี พศ แบบ Mobile ( โดยไม่ต้องใช้ jquery date picker )

จาก ฺBlog แก้ปัญหา Jquery Datepicker ให้เป็นรูปแบบ ปี พ.ศ. นั้น ปัญหาคือ JQuery Datepicker นั้นอาจมีปัญหากับการใช้งานบน โทรศัพท์มือถือ ในฺ Blog นี้จะนำเสนอวิธีการ สร้างตัวเลือกปฎิทินสำหรับ input ข้อมูลที่เป็นวันที่โดยจะรองรับ ปี พ.ศ. ซึ่งจะไม่ใช้ JQuery Datepicker ( ใช้ ิbootstrap jquery และ fontawesome ) สำหรับทำ input ตัวเลือกปฎิทิน ที่รองรับมือถือ

ตัวอย่างการสร้าง ตัวเลือกปฎิทิน บนเว็บ


<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--  เรียกใช้ Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"  >
   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"  ></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"  ></script>

    <!--  เรียกใช้ JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"  ></script>
   
    <!--  เรียกใช้ Font Awesome-->
    <script src="https://use.fontawesome.com/releases/v5.7.2/js/all.js"></script>

    <!--  เรียกใช้  picker_date.js สำหรับสร้างตัวเลือก ปฎิทิน -->
    <script src="https://รับเขียนโปรแกรม.net/picker_date/picker_date.js"></script>

    <title>ตัวอย่าง ตัวเลือกปฎิทิน</title>
  </head>
  <body>

        <div class="container" >
                <div class="form-group">
                        <label>เลือกวันที่</label>
                         <!--  สร้าง textbox สำหรับสร้างตัวเลือก ปฎิทิน โดยมี id มีค่าเป็น my_date  -->
                        <input id="my_date"   class="form-control"  />
                </div>
        </div>
  
    <script>
       //กำหนดให้ textbox ที่มี id เท่ากับ my_date เป็นตัวเลือกแบบ ปฎิทิน
        picker_date(document.getElementById("my_date"),{year_range:"-12:+10"});
        /*{year_range:"-12:+10"} คือ กำหนดตัวเลือกปฎิทินให้ แสดงปี ย้อนหลัง 12 ปี และ ไปข้างหน้า 10 ปี*/
    </script>

   
  </body>
</html>

ผลลัพธ์ที่ได้คือ