ReactBootrap ตอน 3 สร้างตัวเลือกปฎิทินภาษาไทยแบบ ปี พ.ศ. ( DatePicker ) ด้วย React + Bootstrap

 
import React, {useState,useImperativeHandle,useEffect,useRef,forwardRef} from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faChevronLeft,faChevronRight,faTimes } from "@fortawesome/free-solid-svg-icons";

const DatePicker=forwardRef((props,ref)=>{

        const [show_cal,set_show_cal]=useState(false);
        const [year_arr,set_year_arr]=useState([]);

        const [date_value,set_date_value]=useState("");

        const [sel_month,set_sel_month]=useState("");
        const [sel_year,set_sel_year]=useState("");

        const [cal_row,set_cal_row]=useState([]);

        const get_value=()=>{

                return date_value;
        }

        const set_value=(date)=>{

                set_show_cal(false);
                set_date_value(date);

                date=date.trim();
                let date_arr=date.split("/");
                let m = date_arr[1].toString();
                m=m.length==1?"0"+m:m;
                let y = (parseInt(date_arr[2])-543).toString();

                set_sel_month(m);
                set_sel_year(y);

        }

        useImperativeHandle(ref ,()=>{
        
                return {
                    "get_value":get_value,
                    "set_value":set_value
                }
                
        });

        const go_next_month=()=>{

                let m=parseInt(sel_month);
                let y=parseInt(sel_year);
                m++;
                if(m==13)
                {
                        m=1;
                        y++;
                }

                m=m.toString();
                m=m.length==1?"0"+m:m;

                set_sel_month(m);
                set_sel_year(y);
        }

        const go_pre_month=()=>{

                let m=parseInt(sel_month);
                let y=parseInt(sel_year);
                m--;
                if(m==0)
                {
                        m=12;
                        y--;
                }

                m=m.toString();
                m=m.length==1?"0"+m:m;

                set_sel_month(m);
                set_sel_year(y);
        }

        const select_date=(d)=>{
                if(d=="")
                {
                    return;
                }

                d=d.toString();
                let m=sel_month.toString();
                let y=parseInt(sel_year)+543;

                d=d.length==1?"0"+d:d;
                m=m.length==1?"0"+m:m;

                set_date_value(d+"/"+m+"/"+y);
                set_show_cal(false);
        }

      
        useEffect(()=>{

                let min_year=0;
                let max_year=0;
                let year_arr=[];
                if(
                    (props.min_year!=null) && (props.max_year!=null ) &&
                    ( parseInt(props.min_year) <= parseInt(props.max_year) )
                )
                {
                        min_year=parseInt(props.min_year);
                        max_year=parseInt(props.max_year);
                }
                else
                {
                        let y=(new Date()).getFullYear();
                        min_year=y-2;
                        max_year=y+2;
                }

                do
                {
                     year_arr.push(min_year);
                     min_year++;

                }while(min_year < max_year)

                set_year_arr(year_arr);

        },[]);

        useEffect(()=>{
        
            if(show_cal)
            {
                if( sel_month=="" )
                {
                        let m=(new Date()).getMonth()+1;
                        m=m.toString();
                        m=m.length==1?"0"+m:m

                        set_sel_month(m);
                }

                if( sel_year=="" )
                {
                        let y=(new Date()).getFullYear();
                        if(y > parseInt(year_arr[year_arr.length-1]))
                        {
                                y=year_arr[year_arr.length-1];
                        }
                        y=y.toString();
                        set_sel_year(y);
                }
            }
                

        },[show_cal]);

        useEffect(()=>{
                
                if(sel_month=="" || sel_year==""){ return; }
                
                let d=new Date ( parseInt(sel_year),parseInt(sel_month)-1,1 );
                
                let arr=[];
                let temp=[];

                for(var i=0;i<d.getDay();i++)
                {
                        temp.push("");
                }

                while(d.getMonth()==(parseInt(sel_month)-1))
                {
                        let d_str=d.getDate().toString();
                        d_str=d_str.length==1?"0"+d_str:d_str;

                        temp.push(d_str);
                        if(d.getDay()==6)
                        {
                                arr.push(temp);
                                temp=[];
                        }
                        d.setDate(d.getDate() + 1);
                }

                if(temp.length!=0)
                {
                        while(temp.length!=7)
                        {
                                temp.push("");
                        }
                        arr.push(temp);
                }
               
                set_cal_row(arr);

        },[sel_year,sel_month]);

        return (<>
           
            <input  className="form-control form-control-sm"  value={date_value}
                    onClick={event=>{if(show_cal){set_show_cal(false);}else{set_show_cal(true);}}}
                    onChange={event=>{event.target.value="";}}
                    
            />
            {(show_cal)?
                <div className="mt-2 bg-white" style={{width:"100%"}} >

                        <div className="row">
                                <div className="col-3  text-end">
                                        <button type="button" className="btn btn-primary btn-sm" onClick={event=>{go_pre_month()}}>
                                                <FontAwesomeIcon icon={faChevronLeft} />
                                        </button>
                                </div>
                                <div className="col-3">
                                    <select className="form-select form-select-sm" value={sel_month} onChange={event=>set_sel_month(event.target.value)}>
                                            <option value="01">มกราคม</option>
                                            <option value="02">กุมภาพันธ์</option>
                                            <option value="03">มีนาคม</option>
                                            <option value="04">เมษายน</option>
                                            <option value="05">พฤษภาคม</option>
                                            <option value="06">มิถุนายน</option>
                                            <option value="07">กรกฎาคม</option>
                                            <option value="08">สิงหาคม</option>
                                            <option value="09">กันยายน</option>
                                            <option value="10">ตุลาคม</option>
                                            <option value="11">พฤศจิกายน</option>
                                            <option value="12">ธันวาคม</option>
                                    </select>
                                </div>
                                <div className="col-3">
                                    <select className="form-select form-select-sm" value={sel_year} onChange={event=>set_sel_year(event.target.value)}>
                                        {year_arr.map(item=>
                                                <option value={item} >{parseInt(item)+543}</option>        
                                        )}
                                    </select>
                                </div>
                                <div className="col-3">
                                        <button type="button" className="btn btn-primary btn-sm" onClick={event=>{go_next_month()}}>
                                                <FontAwesomeIcon icon={faChevronRight} />
                                        </button>
                                </div>
                        </div>

                        <table className="table table-sm mt-2" style={{width:"100%"}}>
                                <thead>
                                        <tr className="table-active text-center">
                                                <th>อา</th>
                                                <th>จ</th>
                                                <th>อ</th>
                                                <th>พ</th>
                                                <th>พฤ</th>
                                                <th>ศ</th>
                                                <th>ส</th>
                                        </tr>

                                </thead>
                                <tbody className="text-center">
                                        {cal_row.map(item=>
                                                <tr>
                                                        {item.map(item2=>
                                                                <td className="text-cenetr" style={{cursor:"pointer"}}
                                                                        onClick={event=>{select_date(item2)}}
                                                                >{item2}</td>
                                                        )}
                                                </tr>
                                        )}
                                </tbody>
                        </table>
                        
                        <div className="text-end">
                                <button className="btn btn-sm btn-danger" type="button" onClick={event=>{
                                        set_date_value("");
                                        set_show_cal(false);
                                }}>
                                        <FontAwesomeIcon icon={faTimes} />  ล้างข้อมูลปฎิทิน
                                </button>
                        </div>

                </div>
            :null}
            

        </>)

});

export default DatePicker;

import 'bootstrap/dist/css/bootstrap.min.css';
import {useRef} from "react";
//นำเข้า Component DatePicker
import DatePicker from './date_picker';

function App() {

  //สร้างตัวแปรอ้างอิงค์ Component DatePicker โดยใช้ชื่อว่า DatePicker
  const date_picker=useRef();

  return (
    <div>
        <div className="container mt-5" >
          <div className="mb-3">
              <label  className="form-label">วันที่</label>
              {/* ----สร้าง Component DatePicker--- */}
              <DatePicker ref={date_picker} label="วันที่"  />
          </div>
          <div className="mb-3">
              <button className="btn btn-primary" type="button" onClick={event=>{
                date_picker.current.set_value("01/01/2565");
                //.set_value("วัน/เดือน/ปี พ.ศ. ")
              }} >
                Set Date Picker
              </button>
              &nbsp;
              <button className="btn btn-primary" type="button" onClick={event=>{
                alert(date_picker.current.get_value());
                //.get_value() สำหรับรับค่าวันที่ที่เลือกซึ่งจะ return ค่าเป็น string รูปแบบ "วัน/เดือน/ปี พ.ศ. "
              }} >
                Get Date Picker
              </button>
          </div>
        </div>
    </div>
  );

}

export default App;