PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


แนะนำ DateTimePicker เรียบง่าย และสวย น่าใช้มาก

05 September 2014 By
datepicker jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ datepicker jquery



เนื้อหาส่วนนี้ ขอเป็นการแนะนำอย่างเดียว ส่วนใครสนใจ เข้าไปโหลด
และดูวิธีการใช้งาน ง่ายๆ ได้ที

http://xdsoft.net/jqplugins/datetimepicker/

สามารถใช้แทน jqueryui datepicker ได้ดีทีเดียว

ฝาก code ตัวอย่าง ที่ใช้กับการ clone อันนี้ประยุกต์แล้ว  
ใช้ไฟล์ css และ javascript จากลิ้งค์ด้านบน

ตัวอย่าง


ประเภท ยี่ห้อ ชื่อสินค้า วันที่




โค้ดไฟล์ทดสอบ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="js/jquery.datetimepicker.css">
    <style type="text/css">
    .css_more{
        display: none;
    }
    </style>
</head>
<body>
   
    <br>
    <div style="margin:auto;width:90%;">
    <form role="form" method="post" action="show.php">
      <table class="table table-striped">
          <tr class="active">
              <th class="text-center">ประเภท</th>
              <th class="text-center">ยี่ห้อ</th>
              <th class="text-center">ชื่อสินค้า</th>
              <th class="text-center">วันที่</th>
              <th width="130" class="text-center"></th>
          </tr>
          <tbody class="place-datarow">
              <tr class="datarow" >
                  <td>
                    <select name="type_product[]" class="form-control css_i_select">
                        <option value="">Select Type</option>
                        <option value="A">Type A</option>
                        <option value="B">Type B</option>
                    </select>  
                      
                  </td>
                  <td>
                    <select name="brand_product[]" class="form-control">
                        <option value="">Select Brand</option>
                        <option value="AAA">Brand AAA</option>
                        <option value="BBB">Brand BBB</option>
                    </select>                  
                  </td>
                  <td>
                  <input type="text" class="form-control" name="name_product[]" >
                  </td>
                  <td>
                  <input type="text" class="form-control css_datetime_picker" name="date_product[]" value="" id="id_datetime_picker0" >
                  </td>
                  <td>
<input type="text" class="form-control css_more" name="more_data[]">                  
                  </td>
              </tr>
          </tbody>
      </table>
      <br>
      <table class="table">
          <tr>
              <td width="50" class="tex-center">
               <button id="addRow" type="button" class="btn btn-info">+</button>      
              </td>
              <td width="50" class="tex-center">
               <button id="removeRow" type="button" class="btn btn-danger">-</button>      
              </td>
              <td class="text-right">
               <button type="submit" class="btn btn-success">Submit</button>
                  
              </td>
          </tr>
      </table>
      </form>
    </div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>  
<script src="js/jquery.datetimepicker.js"></script>
<script type="text/javascript" src="script.js"></script>         
</body>
</html>



โค้ดไฟล์ script.js

$(function () {
    
    $("#id_datetime_picker0").datetimepicker(); 
    
     $(".css_i_select").on("change",function(){  
        var i_select=$(this).val();
         if(i_select=="A"){
            $(this).parents("tr").find(".css_more").show();   
         }else{
             $(this).parents("tr").find(".css_more").hide();   
         }
    });
    
    
    $("#addRow").on("click",function(){   
        // ส่วนของการ clone ข้อมูลด้วย jquery clone() ค่า true คือ    
        // การกำหนดให้ ไม่ต้องมีการ ดึงข้อมูลจากค่าเดิมมาใช้งาน    
        // รีเซ้ตเป็นค่าว่าง ถ้ามีข้อมูลอยู่แล้ว ทั้ง select หรือ input    
      
        $(".datarow:eq(0)").clone(true)     
        .find("input").attr("value","").end()    
        .find("select").attr("value","").end()  //   
        .appendTo($(".place-datarow"));     
        var lastIndex=$(".css_datetime_picker").size()-1; // หา index ของตัว input ล่าสุด  
        var newId="id_datetime_picker"+lastIndex;
        var objID="#"+newId;
        var placeParent=$(".css_datetime_picker:eq("+lastIndex+")").parents("td");    
        // แทนด้วย input ใหม่ ทับตัวเก่าไปเลย
         $(placeParent).html("<input type=\"text\" class=\"form-control css_datetime_picker\" name=\"date_product[]\" >");     
        $(".css_datetime_picker:eq("+lastIndex+")")
        .attr("id", newId) // - กำหนด id เป็นค่าใหม่
        .unbind(); // - ยกเลิกการจัดการทั้งหมด ที่ได้มาจากตัว clone        
        $(objID).datetimepicker(); // - เรียกใช้ datetimepicker() ใหม่อีกครั้ง          
          
    }); 
    
    $("#removeRow").on("click",function(){    
        // // ส่วนสำหรับการลบ    
        if($(".place-datarow tr").size()>1){ // จะลบรายการได้ อย่างน้อย ต้องมี 1 รายการ    
            $(".place-datarow tr:last").remove(); // ลบรายการสุดท้าย    
        }else{    
            // เหลือ 1 รายการลบไม่ได้    
            alert("ต้องมีรายการข้อมูลอย่างน้อย 1 รายการ");    
        }    
    });    
});






Tags:: datepicker jquery






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


URL สำหรับอ้างอิง