PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

05 September 2014 By


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

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





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