JQuery UI : DatePicker - suthikiet076/ASP.NET-jQueryLibrary GitHub Wiki

JQuery UI : DatePicker

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

ขั้นตอนที่ 1 : Download

  • สามารถเลือก Theme ที่ชอบได้
  • จากนั้นกด download ซึ่ง file ที่ได้จะเป็น file .zip

ขั้นตอนที่ 2 : Extract file

  • จะมี files ที่สำคัญอยู่ 3 ส่วน คือ

jquery-ui-1.9.2.custom.css

jquery-1.8.3.js และ jquery-ui-1.9.2.custom.js

ขั้นตอนที่ 3 : Import file

  • นำ files ทั้ง 3 ไว้ใน folder เดียวกัน (ตัวอย่าง file)
   <head>
       <!-- import file -->
       <link rel="stylesheet" href="file/jquery-ui-1.9.2.custom.css">
       <script type="text/javascript" src="file/jquery-1.8.3.js"></script>
       <script type="text/javascript" src="file/jquery-ui-1.9.2.custom.js"></script>
   </head>

ขั้นตอนที่ 4 : Coding

<head>
   <script>
       	<!-- coding -->
            $(function() {
                $(":text").datepicker({
                    dateFormat:'dd/mm/yy', 
                    showButtonPanel:true,
                    showAnim:'show', 
                    changeMonth:true, 
                    changeYear:true
                });
            });     
  </script>
</head>

<body>        
        <!-- test -->
        <input type="text" value=""> 
</body>

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

  • คลิกที่ text field ด้านล่าง จะแสดงปฏิทินขึ้นมา
  • เลือกวันที่จากตารางปฎิทิน และเลือกเดือนกับปีจาก drop box

หน้าจอการแสดงผลลัพธ์

Sample Code

  <html>
    <head>
        <title>JQuery Library</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">       
 
        <!-- import file -->
        <link rel="stylesheet" href="file/jquery-ui-1.9.2.custom.css">
        <script type="text/javascript" src="file/jquery-1.8.3.js"></script>
        <script type="text/javascript" src="file/jquery-ui-1.9.2.custom.js"></script>
        
        <!-- coding -->
        <script>
            $(function() {
                $(":text").datepicker({
                    dateFormat:'dd/mm/yy', 
                    showButtonPanel:true,
                    showAnim:'show', 
                    changeMonth:true, 
                    changeYear:true
                });
            });     
        </script>
        
    </head>
    <body>
        <div>JQuery UI : DatePicker</div>
        
        <!-- test -->
        <input type="text" value=""> 
        
    </body>
</html>
⚠️ **GitHub.com Fallback** ⚠️