[javascript] month picker sample code

허접한 - month picker sample code

 

        <div id="monthPicker" style="display:none;">

            <div style="border:0px solid red; padding: 10px 25px 0px 25px;">
                <div class="div_length_opt_02" id="btn_pre_year">
                    <button class="btn_length_02" type="button" data-value="pre_year"><img src="./img/m-left.svg" alt=""></button>
                    <p class="selected_year">-----</p>
                    <button class="btn_length_02" type="button" data-value="next_year"><img src="./img/m-right.svg" alt=""></button>
                </div>
            </div>
            <div style="border:0px solid red; padding: 10px 25px 0px 25px;">
                <div class="div_length_opt_03">
                    <button class="btn_length_03" type="button" data-value="1">1월</button>
                    <button class="btn_length_03" type="button" data-value="2">2월</button>
                    <button class="btn_length_03" type="button" data-value="3">3월</button>
                </div>
                <div class="div_length_opt_03">
                    <button class="btn_length_03" type="button" data-value="4">4월</button>
                    <button class="btn_length_03" type="button" data-value="5">5월</button>
                    <button class="btn_length_03" type="button" data-value="6">6월</button>
                </div>
                <div class="div_length_opt_03">
                    <button class="btn_length_03" type="button" data-value="7">7월</button>
                    <button class="btn_length_03" type="button" data-value="8">8월</button>
                    <button class="btn_length_03" type="button" data-value="9">9월</button>
                </div>
                <div class="div_length_opt_03">
                    <button class="btn_length_03" type="button" data-value="10">10월</button>
                    <button class="btn_length_03" type="button" data-value="11">11월</button>
                    <button class="btn_length_03" type="button" data-value="12">12월</button>
                </div>
            </div>

        </div>
        
        
<script>

    class ym_month_picker
        {
            constructor () {
                this.resultWriteObj      =  null
                this.obj_divmonthPicker  =  document.querySelectorAll('div#monthPicker');
                this.set_btn_year        =  document.querySelectorAll('div#monthPicker div div#btn_pre_year.div_length_opt_02 button.btn_length_02');
                this.set_btn_month       =  document.querySelectorAll('div#monthPicker div div.div_length_opt_03 button.btn_length_03');

                this.#set_btn_pre_year( this.set_btn_year[0] );
                this.#set_btn_next_year( this.set_btn_year[1] );
                this.#set_btn_month( this.set_btn_month );
            }

            month_picker( obj )
            {
                console.log( obj );
                this.resultWriteObj =   obj;
                this.obj_divmonthPicker[0].style.display = "none";
                this.obj_divmonthPicker[0].style.display = "block";
            }// end function

            #set_btn_pre_year( obj_btn_pre_year )
            {
                console.log( obj_btn_pre_year );
                obj_btn_pre_year.addEventListener(
                    "click",function (){
                        let temp_01             =   null;
                        let temp_02             =   null;
                        let obj_nowYearValue        =   document.querySelectorAll('div#rightTopMenu_slide div#monthPicker div div#btn_pre_year.div_length_opt_02 p.selected_year');
                        let nowYearValue        =   obj_nowYearValue[0].innerText;
                        temp_01             =   new Date( nowYearValue );
                        temp_02             =   new Date( temp_01.setFullYear( temp_01.getFullYear() - 1 ) );
                        console.log( temp_02.getFullYear() );
                        obj_nowYearValue[0].innerText   =   temp_02.getFullYear();
                    });

            }// end function

            #set_btn_next_year( obj_btn_next_year ){
                console.log( obj_btn_next_year );
                obj_btn_next_year.addEventListener(
                    "click",function (){
                        let temp_01             =   null;
                        let temp_02             =   null;
                        let obj_nowYearValue    =   document.querySelectorAll('div#rightTopMenu_slide div#monthPicker div div#btn_pre_year.div_length_opt_02 p.selected_year');
                        let nowYearValue        =   obj_nowYearValue[0].innerText;
                        temp_01             =   new Date( nowYearValue );
                        temp_02             =   new Date( temp_01.setFullYear( temp_01.getFullYear() + 1 ) );
                        console.log( temp_02.getFullYear() );
                        obj_nowYearValue[0].innerText   =   temp_02.getFullYear();
                    });
            }// end function

            #set_btn_month(obj_btn_months){
                console.log( obj_btn_months );
                obj_btn_months.forEach(
                    function(obj_btn_month){

                        obj_btn_month.addEventListener(
                            "click",function (){

                                let obj_nowYearValue    =   document.querySelectorAll('div#rightTopMenu_slide div#monthPicker div div#btn_pre_year.div_length_opt_02 p.selected_year');
                                let nowYearValue        =   obj_nowYearValue[0].innerText;
                                console.log( nowYearValue );
                                console.log( obj_btn_month.getAttribute("data-value"));

                                let rtnString   =   nowYearValue + "-" + obj_btn_month.getAttribute("data-value");
                                obj_month_picker.func_rtn_result( rtnString )
                            });
                    }
                );

            }// end function

            func_rtn_result( str )
            {
                console.log(this.resultWriteObj);
                console.log(str);
                this.resultWriteObj.value = str;
            }
        }// end class

    let obj_month_picker =  new ym_month_picker();

    jQuery("#from_yearMonth").on("click", function(){
        console.log( "click" );
        obj_month_picker.month_picker(this)
    });
    jQuery("#to_yearMonth").on("click", function(){
        console.log( "click" );
        obj_month_picker.month_picker(this)
    });
    //--------------------------------------------------------------

</script>