ปรับแต่ง DateTimePicker ให้รองรับ ปี พ.ศ. อย่างสมบูรณ์

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
datetimepicker plugin jquery ปฏิทิน

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

ดูแล้ว 91,318 ครั้ง


จากที่เคยแนะนำ DateTimePicker สำหรับใช้ในการเลือกวันที่แล้ว
จากบทความด้านล่าง แล้ว
 
แนะนำ DateTimePicker เรียบง่าย และสวย น่าใช้มาก  (แค่แนะนำ)
 
เนื้อหาในตอนนี้จะมานำเสนอวิธีการปรับแต่ง 
DateTimePicker ให้รองรับ ปี พ.ศ. อย่างสมบูรณ์
 
สำหรับการใช้งาน DateTimePicker ดาวน์โหลดได้ที่เว็บ
 
หรือคลิกขวาแล้วเลือก save ไฟล์จากลิ้งค์ด้านล่าง
 
แตกไฟล์แล้วเอาเฉพาะไฟล์ ด้านล่างนี้ไว้ใช้งาน
jquery.datetimepicker.css
jquery.datetimepicker.js
 
 
 
จากการใช้งานเราจะพบว่า DateTimePicker รองรับภาษาไทย และการ
กำหนดปี พ.ศ. ก็สามารถทำได้ แต่รูปแบบวันที่ในปฏิทินจะไม่ตรงตามวันปัจจุบัน
 
ดูตัวอย่างประกอบ
 
แบบที่ 1 
กำหนดปกติ ภาษาอังกฤษ ปี ค.ศ. 
 
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

 
 
1
2
3
4
$("#testdate1").datetimepicker({
    timepicker:false,
    inline:true
});
 
แบบที่ 2
กำหนดปกติ ภาษาไทย ปี ค.ศ. 
 
เมษายน
มกราคม
กุมภาพันธ์
มีนาคม
เมษายน
พฤษภาคม
มิถุนายน
กรกฎาคม
สิงหาคม
กันยายน
ตุลาคม
พฤศจิกายน
ธันวาคม
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
อา.จ.อ.พ.พฤ.ศ.ส.
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

 
1
2
3
4
5
$("#testdate2").datetimepicker({
    timepicker:false,
    lang:'th',  // แสดงภาษาไทย
    inline:true
});
 
แบบที่ 3
กำหนดปกติ ภาษาไทย ปี พ.ศ. 
 
เมษายน
มกราคม
กุมภาพันธ์
มีนาคม
เมษายน
พฤษภาคม
มิถุนายน
กรกฎาคม
สิงหาคม
กันยายน
ตุลาคม
พฤศจิกายน
ธันวาคม
2568
2493
2494
2495
2496
2497
2498
2499
2500
2501
2502
2503
2504
2505
2506
2507
2508
2509
2510
2511
2512
2513
2514
2515
2516
2517
2518
2519
2520
2521
2522
2523
2524
2525
2526
2527
2528
2529
2530
2531
2532
2533
2534
2535
2536
2537
2538
2539
2540
2541
2542
2543
2544
2545
2546
2547
2548
2549
2550
2551
2552
2553
2554
2555
2556
2557
2558
2559
2560
2561
2562
2563
2564
2565
2566
2567
2568
2569
2570
2571
2572
2573
2574
2575
2576
2577
2578
2579
2580
2581
2582
2583
2584
2585
2586
2587
2588
2589
2590
2591
2592
2593
อา.จ.อ.พ.พฤ.ศ.ส.
27
28
29
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
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

 
1
2
3
4
5
6
$("#testdate3").datetimepicker({
    timepicker:false,
    lang:'th',  // แสดงภาษาไทย
    yearOffset:543,  // ใช้ปี พ.ศ. บวก 543 เพิ่มเข้าไปในปี ค.ศ
    inline:true
});
 
แบบที่สามนี้เราจะพบปัญหาวันที่ไม่ตรงกับวันในสัปดาห์
เช่นแทนที่วันนี้จะเป็นวันจันทร์ กลับเป็นวันพฤหัส แบบนี้เป็นต้น
เวลานำไปใช้งาน ก็อาจจะสับสนได้ ดังนั้นจึงมีวิธีปรับแต่งพิเศษ
ตัวแบบที่ 4
 
แบบที่ 4
กำหนดปกติ ภาษาไทย ปี พ.ศ. วันในสัปดาห์ตรงตามเป็นจริง
 
เมษายน
มกราคม
กุมภาพันธ์
มีนาคม
เมษายน
พฤษภาคม
มิถุนายน
กรกฎาคม
สิงหาคม
กันยายน
ตุลาคม
พฤศจิกายน
ธันวาคม
2568
2493
2494
2495
2496
2497
2498
2499
2500
2501
2502
2503
2504
2505
2506
2507
2508
2509
2510
2511
2512
2513
2514
2515
2516
2517
2518
2519
2520
2521
2522
2523
2524
2525
2526
2527
2528
2529
2530
2531
2532
2533
2534
2535
2536
2537
2538
2539
2540
2541
2542
2543
2544
2545
2546
2547
2548
2549
2550
2551
2552
2553
2554
2555
2556
2557
2558
2559
2560
2561
2562
2563
2564
2565
2566
2567
2568
2569
2570
2571
2572
2573
2574
2575
2576
2577
2578
2579
2580
2581
2582
2583
2584
2585
2586
2587
2588
2589
2590
2591
2592
2593
อา.จ.อ.พ.พฤ.ศ.ส.
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

 
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
var leap=3;
var dayWeek=["พฤ.", "ศ.", "ส.", "อา.","จ.", "อ.", "พ."];
var yearL=new Date().getFullYear()-543;
leap=(((yearL % 4 == 0) && (yearL % 100 != 0)) || (yearL % 400 == 0))?2:3;
if(leap==2){
    dayWeek=["ศ.", "ส.", "อา.", "จ.","อ.", "พ.", "พฤ."];
}       
$("#testdate4").datetimepicker({
    timepicker:false,
    lang:'th',  // แสดงภาษาไทย
    onChangeMonth:function( ct ){
        var leap=3;
        var dayWeek=["พฤ.", "ศ.", "ส.", "อา.","จ.", "อ.", "พ."];
        if(ct){
            var yearL=new Date(ct).getFullYear()-543;
            leap=(((yearL % 4 == 0) && (yearL % 100 != 0)) || (yearL % 400 == 0))?2:3;
            if(leap==2){
                dayWeek=["ศ.", "ส.", "อา.", "จ.","อ.", "พ.", "พฤ."];
            }
        }           
        this.setOptions({
            i18n:{ th:{dayOfWeek:dayWeek}},dayOfWeekStart:leap,
        })       
    },         
    i18n:{ th:{dayOfWeek:dayWeek}},dayOfWeekStart:leap,              
    yearOffset:543,  // ใช้ปี พ.ศ. บวก 543 เพิ่มเข้าไปในปี ค.ศ
    inline:true
});        
 
สี่ตัวอย่างข้างต้นเป็นการใช้งานแบบ inline ใช้กับ div แสดงปฏิทิน
ต่อต่อไปจะแสดงตัวอย่างการใช้งานกับ input text
 
ตัวอย่าง
 

 
โค้ดตัวอย่าง test_datetimepicker.html
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="js/jquery.datetimepicker.css">
</head>
<body>
     
 <div style="margin:auto;width:400px;">
 
      <br>
      <input type="text" name="testdate5" id="testdate5" value="" style="width:100px;">    
 
</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">  
$(function(){
 
    var thaiYear = function (ct) {
        var leap=3; 
        var dayWeek=["พฤ.", "ศ.", "ส.", "อา.","จ.", "อ.", "พ."]; 
        if(ct){ 
            var yearL=new Date(ct).getFullYear()-543; 
            leap=(((yearL % 4 == 0) && (yearL % 100 != 0)) || (yearL % 400 == 0))?2:3; 
            if(leap==2){ 
                dayWeek=["ศ.", "ส.", "อา.", "จ.","อ.", "พ.", "พฤ."]; 
            } 
        }             
        this.setOptions({ 
            i18n:{ th:{dayOfWeek:dayWeek}},dayOfWeekStart:leap, 
        })               
    };   
     
    $("#testdate5").datetimepicker({
        timepicker:false,
        format:'d-m-Y',  // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000           
        lang:'th',  // แสดงภาษาไทย
        onChangeMonth:thaiYear,         
        onShow:thaiYear,                 
        yearOffset:543,  // ใช้ปี พ.ศ. บวก 543 เพิ่มเข้าไปในปี ค.ศ
        closeOnDateSelect:true,
    });      
 
     
     
});
</script>
 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 17-03-2017



03/02/2559 รูปแบบใช้ปี พ.ศ. ยังไม่สมบุณ์ อยู้ในขั้นตอนหาวิธีการแก้ไข

อัพเดท datetimepicker รองรับภาษาไทยและปี พ.ศ. 04/03/2559

เนื่องจากการใช้งาน datetimepicker จากเนื้อหาด้านบนมีความไม่สมบูรณ์ กรณีต้องการให้รองรับ
ปี พ.ศ. จึงทำการปรับไฟล์ javascript เพิ่มเติม เพื่อให้สามารถใช้งานได้ในระดับที่น่าพอใจ 
รองรับการใช้งานแบบ inline อย่างสมบูรณ์ และสำหรับกรณ๊ื ใช้สำหรับ input ใช้งานได้ในระดับที่น่าพอใจ
ความผิดพลาดลดลง  สามารถดูตัวอย่าง รายการแก้ไขล่าสุดได้ที่ลิ้งค์ด้านล่างนี้

https://www.ninenik.com/demo/datetimepicker_th.php

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../js/jquery.datetimepicker.css">
</head>
<body>
     
 <div style="margin:auto;width:400px;">
 
      <br>
      <input type="text" name="testdate5" id="testdate5" value="" style="width:100px;">
<br>
<br>
 
 
<div id="testdate4"></div>
</div>   
     
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script src="../js/jquery.datetimepicker.full.js"></script>
<script type="text/javascript">  
$(function(){
     
    $.datetimepicker.setLocale('th'); // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ.
     
    // กรณีใช้แบบ inline
    $("#testdate4").datetimepicker({
        timepicker:false,
        format:'d-m-Y',  // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000           
        lang:'th',  // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ.
        inline:true 
    });      
     
     
    // กรณีใช้แบบ input
    $("#testdate5").datetimepicker({
        timepicker:false,
        format:'d-m-Y',  // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000           
        lang:'th',  // ต้องกำหนดเสมอถ้าใช้ภาษาไทย และ เป็นปี พ.ศ.
        onSelectDate:function(dp,$input){
            var yearT=new Date(dp).getFullYear()-0; 
            var yearTH=yearT+543;
            var fulldate=$input.val();
            var fulldateTH=fulldate.replace(yearT,yearTH);
            $input.val(fulldateTH);
        },
    });      
    // กรณีใช้กับ input ต้องกำหนดส่วนนี้ด้วยเสมอ เพื่อปรับปีให้เป็น ค.ศ. ก่อนแสดงปฏิทิน
    $("#testdate5").on("mouseenter mouseleave",function(e){
        var dateValue=$(this).val();
        if(dateValue!=""){
                var arr_date=dateValue.split("-"); // ถ้าใช้ตัวแบ่งรูปแบบอื่น ให้เปลี่ยนเป็นตามรูปแบบนั้น
                // ในที่นี้อยู่ในรูปแบบ 00-00-0000 เป็น d-m-Y  แบ่งด่วย - ดังนั้น ตัวแปรที่เป็นปี จะอยู่ใน array
                //  ตัวที่สอง arr_date[2] โดยเริ่มนับจาก 0
                if(e.type=="mouseenter"){
                    var yearT=arr_date[2]-543;
                }      
                if(e.type=="mouseleave"){
                    var yearT=parseInt(arr_date[2])+543;
                }  
                dateValue=dateValue.replace(arr_date[2],yearT);
                $(this).val(dateValue);                                                
        }      
    });
     
     
});
</script>

วิธีการใช้งาน ให้ทำการคลิกขวาที่ไฟล์ดังกล่าว แล้ว view source ดูวิธีการใช้ 
โหลดไฟล์ css และ js ได้ในลิ้งค์นั้น โดยคลิกขวาที่ลิ้งค์ แล้วกด save

ตัวอย่าง


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





Tags:: datetimepicker jquery plugin ปฏิทิน







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ
เมษายน
มกราคม
กุมภาพันธ์
มีนาคม
เมษายน
พฤษภาคม
มิถุนายน
กรกฎาคม
สิงหาคม
กันยายน
ตุลาคม
พฤศจิกายน
ธันวาคม
2568
2493
2494
2495
2496
2497
2498
2499
2500
2501
2502
2503
2504
2505
2506
2507
2508
2509
2510
2511
2512
2513
2514
2515
2516
2517
2518
2519
2520
2521
2522
2523
2524
2525
2526
2527
2528
2529
2530
2531
2532
2533
2534
2535
2536
2537
2538
2539
2540
2541
2542
2543
2544
2545
2546
2547
2548
2549
2550
2551
2552
2553
2554
2555
2556
2557
2558
2559
2560
2561
2562
2563
2564
2565
2566
2567
2568
2569
2570
2571
2572
2573
2574
2575
2576
2577
2578
2579
2580
2581
2582
2583
2584
2585
2586
2587
2588
2589
2590
2591
2592
2593
อา.จ.อ.พ.พฤ.ศ.ส.
27
28
29
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
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