เราเคยวมีแนวทางการสร้างฟังก์ชั่นบวกวันใน javascript มาแล้วในหัวข้อ
บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย
https://www.ninenik.com/content.php?arti_id=158 via @ninenik
สำหรับเนื้อหาตอนนี้ เราจะมาประยุกต์ ให้ครอบคลุมการใช้งานมากขึ้น โดยให้ผู้ใช้
สามารถที่จะเลือกบวก วัน หรือเดือน หรือปี หรือ ใช้งานแบบรวมกัน เช่นบวกทั้ง
วัน เดือน และปี รองรับให้สามารถนำค่าใปใช้งานแสดงทันทีหรือแสดงผลใน element อื่นได้
หรือหากต้องการประยุกต์ใช้เพิ่มเติม ก็สามารถนำไปดัดแปลงปรับเพิ่มเติมได้ตามต้องการ
var date_add = function(date1,separate,format,targetObj,
addDate,addMonth,addYear
){}
date1 คือ วันที่เริ่มต้น
separate คือ ตัวแบ่ง วัน เดือน ปี ยึดตาม date1
format คือ รูปแบบวันที่ dmy ยึดตาม date1
targetObj คือ id ของ element ที่เราต้องการแสดงค่าผลบวกของวันที่ ไม่มีให้เป็น null
addDate คือ จำนวนวัน ที่ต้องการบวก ไม่มีให้เป็น null
addMonth คือ จำนวนเดือน ที่ต้องการบวก ไม่มีให้เป็น null
addYear คือ จำนวนปี ที่ต้องการบวก ไม่มีให้เป็น null
หมายเหตู: ฟังก์ชั่นต่อไปนี้ไม่ได้ใช้สำหรับแปลงรูปบบของวันที่ ดังนั้นวันที่เริ่มต้น กับวันที่ผลลัพธ์
จะมีรูปแบบวันที่เดียวกัน และการกำหนด separate กับ format ก็จะยึดตาม date1 หรือวันที่เริ่มต้น
วิธีใช้งานเบื้องต้น
<script type="text/javascript">
var date_add = function(date1,separate,format,targetObj,
addDate,addMonth,addYear
){
separate = typeof separate !== 'undefined' ? separate : '-';
format = typeof format !== 'undefined' ? format : 'dmy';
targetObj = typeof targetObj !== 'undefined' ? targetObj : null;
addDate = typeof addDate !== 'undefined' ? addDate : null;
addMonth = typeof addMonth !== 'undefined' ? addMonth : null;
addYear = typeof addYear !== 'undefined' ? addYear : null;
var s_date=date1;
var arr_s_date = s_date.split(separate);
var new_s_date = arr_s_date[format.indexOf('m')]
+'/'+arr_s_date[format.indexOf('d')]
+'/'+arr_s_date[format.indexOf('y')];
var e_date = new Date(new_s_date);
if(addDate){
e_date.setDate(e_date.getDate() + addDate);
}
if(addMonth){
e_date.setMonth(e_date.getMonth() + addMonth);
}
if(addYear){
e_date.setFullYear(e_date.getFullYear() + addYear);
}
function pad(s) { return (s < 10) ? '0' + s : s; }
var new_t_date = [];
new_t_date[0]=(format.charAt(0)=='d')?pad(e_date.getDate()):
(format.charAt(0)=='m')?pad(e_date.getMonth()+1):e_date.getFullYear();
new_t_date[1]=(format.charAt(1)=='d')?pad(e_date.getDate()):
(format.charAt(1)=='m')?pad(e_date.getMonth()+1):e_date.getFullYear();
new_t_date[2]=(format.charAt(2)=='d')?pad(e_date.getDate()):
(format.charAt(2)=='m')?pad(e_date.getMonth()+1):e_date.getFullYear();
var returnValue=[new_t_date[0],new_t_date[1],new_t_date[2]].join(separate);
if(targetObj){
document.getElementById(targetObj).value = returnValue;
}else{
return returnValue;
}
return [new_t_date[0],new_t_date[1],new_t_date[2]].join(separate);
}
var test_date='17-10-2015';
// ต้องการบวกเพิ่มวันที่ อีก 6 เดือน
var end_date1 = date_add(test_date,'-','dmy',null,null,6,null);
console.log(end_date1); // จะได้เป็น 17-04-2016
// ต้องการบวกเพิ่มวันที่ อีก 5 วัน 6 เดือน และ 2 ปี
var end_date1 = date_add(test_date,'-','dmy',null,1,6,2);
console.log(end_date1); // จะได้เป็น 18-04-2018
// ต้องการบวกเพิ่มวันที่ อีก 1 เดือน และให้ผลลัพธ์แสดงใน element ที่มี id เท่ากับ end_date
var end_date1 = date_add(test_date,'-','dmy','end_date',null,1,null);
console.log(end_date1); // จะได้เป็น 17-11-2015
</script>
ตัวอย่างโค้ดการประยุกต์กับการใช้งาน datetimepicker
เมื่อเลือกวันที่เริ่มต้น และให้แสดงวันที่สิ้นสุดตาม จำนวนเดือนที่ต้องการบวกเพิ่ม
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="js/datetimepicker/jquery.datetimepicker.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/datetimepicker/jquery.datetimepicker.full.min.js"></script>
</head>
<body>
<br>
<br>
<br>
<div class="container" style="width:750px;">
<form action="" class="form-inline" method="post">
<table class="table">
<tr>
<td>
Start::
<input type="text" name="begin_date" id="begin_date"
class="form-control input-sm" onchange="date_add(this.value,'-','dmy','end_date',null,6)">
End::
<input type="text" name="end_date" id="end_date"
class="form-control input-sm">
</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript">
var date_add = function(date1,separate,format,targetObj,
addDate,addMonth,addYear
){
separate = typeof separate !== 'undefined' ? separate : '-';
format = typeof format !== 'undefined' ? format : 'dmy';
targetObj = typeof targetObj !== 'undefined' ? targetObj : null;
addDate = typeof addDate !== 'undefined' ? addDate : null;
addMonth = typeof addMonth !== 'undefined' ? addMonth : null;
addYear = typeof addYear !== 'undefined' ? addYear : null;
var s_date=date1;
var arr_s_date = s_date.split(separate);
var new_s_date = arr_s_date[format.indexOf('m')]
+'/'+arr_s_date[format.indexOf('d')]
+'/'+arr_s_date[format.indexOf('y')];
var e_date = new Date(new_s_date);
if(addDate){
e_date.setDate(e_date.getDate() + addDate);
}
if(addMonth){
e_date.setMonth(e_date.getMonth() + addMonth);
}
if(addYear){
e_date.setFullYear(e_date.getFullYear() + addYear);
}
function pad(s) { return (s < 10) ? '0' + s : s; }
var new_t_date = [];
new_t_date[0]=(format.charAt(0)=='d')?pad(e_date.getDate()):
(format.charAt(0)=='m')?pad(e_date.getMonth()+1):e_date.getFullYear();
new_t_date[1]=(format.charAt(1)=='d')?pad(e_date.getDate()):
(format.charAt(1)=='m')?pad(e_date.getMonth()+1):e_date.getFullYear();
new_t_date[2]=(format.charAt(2)=='d')?pad(e_date.getDate()):
(format.charAt(2)=='m')?pad(e_date.getMonth()+1):e_date.getFullYear();
var returnValue=[new_t_date[0],new_t_date[1],new_t_date[2]].join(separate);
if(targetObj){
document.getElementById(targetObj).value = returnValue;
}else{
return returnValue;
}
return [new_t_date[0],new_t_date[1],new_t_date[2]].join(separate);
}
$(function(){
$("#begin_date,#end_date").datetimepicker({
format:'d-m-Y', // รูปแบบวันที่
formatDate:'d-m-Y',
timepicker:false,
closeOnDateSelect:true,
});
});
</script>
</body>
</html>
ตาวโหลดไฟล์
jquery.datetimepicker.css
jquery.datetimepicker.full.min.js
ตัวอย่างผลลัพธ์ เมื่อเลือกวันที่เริ่มต้น วันที่สิ้นสุดจะทำการบวกเพิ่มอีก 6 เดือนพร้อมกับแสดง
