และดูวิธีการใช้งาน ง่ายๆ ได้ที
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 รายการ");
}
});
});
