สร้างฟังก์ชั่น javascript บวกวัน เดือน หรือปี อย่างง่าย

เขียนเมื่อ 9 ปีก่อน โดย Ninenik Narkdee
javascript บวกเดือน บวกปี บวกวัน datetimepicker

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

ดูแล้ว 13,388 ครั้ง


เราเคยวมีแนวทางการสร้างฟังก์ชั่นบวกวันใน javascript มาแล้วในหัวข้อ
 
บวกวันใน javascript ด้วยฟังก์ชัน day add อย่างง่าย 
 
สำหรับเนื้อหาตอนนี้ เราจะมาประยุกต์ ให้ครอบคลุมการใช้งานมากขึ้น โดยให้ผู้ใช้
สามารถที่จะเลือกบวก วัน หรือเดือน หรือปี หรือ ใช้งานแบบรวมกัน เช่นบวกทั้ง
วัน เดือน และปี รองรับให้สามารถนำค่าใปใช้งานแสดงทันทีหรือแสดงผลใน element อื่นได้
หรือหากต้องการประยุกต์ใช้เพิ่มเติม ก็สามารถนำไปดัดแปลงปรับเพิ่มเติมได้ตามต้องการ
 
1
2
3
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 หรือวันที่เริ่มต้น
 

วิธีใช้งานเบื้องต้น

 
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
<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 

เมื่อเลือกวันที่เริ่มต้น และให้แสดงวันที่สิ้นสุดตาม จำนวนเดือนที่ต้องการบวกเพิ่ม
 
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
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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 เดือนพร้อมกับแสดง
 

Start:: End::


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











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










เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ
April
January
February
March
April
May
June
July
August
September
October
November
December
2025
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
SunMonTueWedThuFriSat
30
31
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
1
2
3
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
April
January
February
March
April
May
June
July
August
September
October
November
December
2025
1950
1951
1952
1953
1954
1955
1956
1957
1958
1959
1960
1961
1962
1963
1964
1965
1966
1967
1968
1969
1970
1971
1972
1973
1974
1975
1976
1977
1978
1979
1980
1981
1982
1983
1984
1985
1986
1987
1988
1989
1990
1991
1992
1993
1994
1995
1996
1997
1998
1999
2000
2001
2002
2003
2004
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2029
2030
2031
2032
2033
2034
2035
2036
2037
2038
2039
2040
2041
2042
2043
2044
2045
2046
2047
2048
2049
2050
SunMonTueWedThuFriSat
30
31
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
1
2
3
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00