ใช้ moment.js หาอายุ จากวัน เดือนปี เกิด อย่างง่าย

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
moment เวลา javascript

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

ดูแล้ว 20,115 ครั้ง




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

BirthDay:

Age:

 
โค้ดตัวอย่าง
 
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>Age</title>
    <link rel="stylesheet" href="js/jquery.datetimepicker.css">
</head>
<body>
   
  <br><br>
  <div style="margin:auto;width:500px;">
       
      BirthDay: <input type="text" name="mydateth" id="mydateth" value="">
       
      <br><br>
       
      Age: <input type="text" name="age" id="age" value="">
       
      <br><br>
       
      <div id="mydateth3"></div>
  </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="js/moment-with-locales.min.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, 
        })               
    };
     
    $("#mydateth").datetimepicker({
        timepicker:false,  // กำหนด ไม่แสดงตัวเลือกเวลา 
        format:'d-m-Y',  // กำหนดรูปแบบวันที่ ที่ใช้ เป็น 00-00-0000 
        lang:'th',  // แสดงภาษาไทย 
        yearStart:1914,  // ช่วงเลือกปีเริ่มต้น ใช้ ค.ศ. 
        yearOffset:543,  // ใช้ปี พ.ศ. บวก 543 เพิ่มเข้าไปในปี ค.ศ      
        onShow:thaiYear,
        onChangeMonth:thaiYear,
        closeOnDateSelect:true, // ปิด ถ้าเลือกวันที่แล้ว  
    });  
     
    $("#mydateth").on("change",function(){ 
        var dayBirth=$(this).val(); 
        var getdayBirth=dayBirth.split("-"); 
        var YB=getdayBirth[2]-543; 
        var MB=getdayBirth[1]; 
        var DB=getdayBirth[0]; 
           
        var setdayBirth=moment(YB+"-"+MB+"-"+DB);   
        var setNowDate=moment(); 
        var yearData=setNowDate.diff(setdayBirth, 'years', true); // ข้อมูลปีแบบทศนิยม 
        var yearFinal=Math.round(setNowDate.diff(setdayBirth, 'years', true),0); // ปีเต็ม 
        var yearReal=setNowDate.diff(setdayBirth, 'years'); // ปีจริง 
        var monthDiff=Math.floor((yearData-yearReal)*12); // เดือน 
        var str_year_month=yearReal+" ปี "+monthDiff+" เดือน"; // ต่อวันเดือนปี 
        $("#age").val(str_year_month); 
 
    }); 
     
});
</script>   
</body>
</html>


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


เนื้อหาด้านบน จะมีปัญหาเกี่ยวกับปี พ.ศ. ให้เปลี่ยนมาใช้ตัวอย่าง จาก
คำถามตามลิ้งค์ด้านล่างนี้แทน
 


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











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





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ
มกราคม
มกราคม
กุมภาพันธ์
มีนาคม
เมษายน
พฤษภาคม
มิถุนายน
กรกฎาคม
สิงหาคม
กันยายน
ตุลาคม
พฤศจิกายน
ธันวาคม
2568
2457
2458
2459
2460
2461
2462
2463
2464
2465
2466
2467
2468
2469
2470
2471
2472
2473
2474
2475
2476
2477
2478
2479
2480
2481
2482
2483
2484
2485
2486
2487
2488
2489
2490
2491
2492
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
31
1
2
3
4
5
6
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