และดูวิธีการใช้งาน ง่ายๆ ได้ที
http://xdsoft.net/jqplugins/datetimepicker/
สามารถใช้แทน jqueryui datepicker ได้ดีทีเดียว
ฝาก code ตัวอย่าง ที่ใช้กับการ clone อันนี้ประยุกต์แล้ว
ใช้ไฟล์ css และ javascript จากลิ้งค์ด้านบน
ตัวอย่าง
โค้ดไฟล์ทดสอบ
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | $(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 รายการ"); } }); }); |
