カスタムカレンダーコンポーネントのVUE

<テンプレート> 
    の<div> 
        <行タイプ= "フレックス"正当化=クラス"space-の間に" = "オペレーション・バー"> 
            <コル> <P @ = "previousEvent"をクリック>上一月</ P> </コル> 
            <コル> <P> {{datestrを}} </ P> </コル> 
            <コル> <p個の@クリック= "nextEvent">下一月</ P> </コル> 
        </ ROW> 
        <！ - -星期- > 
        <行タイプ= "フレックス"> 
            <コルクラス= "テキスト中心のTD-境界日付ヘッダ">日</コル> 
            <コルクラス= "テキスト中心TDボーダー日付ヘッダ">一</コル> 
            <コルクラス= "テキスト中心のTD-境界日付ヘッダ">二</コル> 
            <コルクラス= "テキスト中心TDボーダー日付ヘッダ">三</コル> 
            <コルクラス= "テキスト中心のTD-境界日付ヘッダ">四</コル>
            <コルクラス= "テキスト中心のTD-ボーダー日付ヘッダ">五</コル> 
            <コルクラス= "テキスト中心のTD-ボーダー日付ヘッダ">六</コル> 
        </ ROW> 
        <！ -日期- > 
        <行タイプ= "フレックス"> 
            <コルV- ための = "（アイテム、インデックス）allDaysで"クラス= "テキスト中央TD-ボーダー"> 
                <P：クラス= "item.noToMonth「ノー？ -to-月」： 'である対月' "> {{item.dayVal}}、{{item.isToMonth}} </ P> 
            </コル> 
        </ ROW> 
    </ div> 
</テンプレート> 
<スクリプト> 
    輸出デフォルト{ 
        名：'SH-日付ピッカー' 、
        データ（）{ 
            リターン{ 
                関数datestrを： '' 、
                allDays：[]、 
                dayWeek： 0 、
                monthdays： 0 
            ;} 
        }、
        メソッド：{ 
            getPreMonth（DATE）{ 
                のlet ARR = date.split（ '/' ）; 
                LET年 = ARR [0]; //は、現在の日付の年を取得 
                月ARR =のlet [1]; //は、月の現在の日付を取得 
                ; LET日のARRは= [2] //は現在の日付を取得し、日付がされ 
                たlet日= 新しい新しい日付（年、月、0 ）; 
                日 = days.getDate（） ; //取得します月の日付で日現在の数 
                のlet YEAR2 =年; 
                MONTH2ましょう =のparseInt（月） - 1 ;
                もし（MONTH2 === 0 ）{ 
                    YEAR2 =のparseInt（YEAR2） - 1 。
                    MONTH2 = 12 。
                } 
                であれば（MONTH2 <10 ）{ 
                    MONTH2 = '0' + MONTH2。
                } 
                T2せ - '' + = YEAR2 + ; MONTH2を
                リターンT2; 
            }、 
            getNextMonth（DATE）{
                ARRせ = date.split（ '/' ）。
                聞かせて年 = ARR [0]; // 年には現在の日付を取得し 
                たlet月ARR = [1]; // 月の現在の日付を取得 
                しましょうデイARR = [2]; // 取得し、現在の日付月 
                のlet日= 新しい新しい日付（年、月、0 ）; 
                日 ; = days.getDate（）// の月に現在の日付を取得する日数 
                のlet YEAR2 = 年、
                LET、MONTH2 =のparseInt（月）+ 1 ;
                 IF（、MONTH2 13 ===ある）{ 
                    YEAR2 =のparseInt（YEAR2）+ 1 ;
                    MONTH2 = 1 。
                }
                 IF（MONTH2 <10 ）{ 
                    MONTH2 = '0' + MONTH2。
                } 
                T2せ - '' + = YEAR2 + ; MONTH2を
                リターンT2; 
            } 
            // 上一月
            previousEvent（）{
                 この .dateStr = この .getPreMonth（この.dateStr）。
                この.calDate（）; 
            } 
            // 下一月
            nextEvent（）{
                 この .dateStr = この .getNextMonth（この.dateStr）。
                この.calDate（）; 
            }、
            calDate（）{ 
                この .allDays = [];
                 // 現在の年、月、日を取得 
                LET dを= これ？.dateStrが新しい新しい日付（この .dateStr ）：新しい新しい日付（）; 
                LET年 = d.getFullYear（）; 
                のlet月。= d.getMonth（）+ 1 ;
                 この .dateStr `$ = {}年/月$ {`};
                 // 現在の最初の月を取得曜日
                この .dayWeek =新新を DATE（年、月- 1 ,. 1。）.getDay（）;
                // 毎月の最初の前のギャップを埋める 
                LET firstNum =を7 - 。この.dayWeek;
                 のために（;私は<7 - firstNum;私は= 0 LET私は++。）{
                     この.allDays.unshift（{ 
                        dayVal：この .getDay（$ `年} { - } $ {月-1`、 - I）.dayVal、
                        dateVal：この .getDay（ `$年} { - } $ {月-1`、 - I）.dateVal、
                        noToMonth：trueに
                    }）; 
                } 
                // 現在の月の日数を取得
                この= .monthDays 新しい新しい日付（年、月ザ・、0 ）.getDate（）;
                 // 実際の
                IF（この.monthDays）{
                     のため（LET J = 0; J < この .monthDays; J ++ ）{
                         この.allDays.push（ { 
                            TIMEVAL： `$ {}年 {$} / {J $ + 1 /月。}`、
                            dayVal：J。+ 1 
                        }）; 
                    } 
                }; 
                // 週の月の最終日を取得
                この .lastDayWeek = 新しい新しい日付を（年月- 1、この.monthDays）.getDay（）;
                //塗りつぶしブランクの各月の最後の日 
                lastNum = 7を聞かせて- この .lastDayWeekを- 1 。
                用（聞かせてK = 1; K <= lastNum; ++ k個）{
                     この.allDays.push（{ 
                        dayVal：この .getDay（ `$ {年} - $ {月} - $ { この.monthDays}`、K）。 dayVal、
                        dateVal：この .getDay（ `$ {年} - $ {月} - $ { この.monthDays}`、K）.dateVal、
                        noToMonth：真
                    }）; 
                } 
            }、
            // N日前及び取得日後（日：往路負、正バックパス）
            getDay（日付、曜日）{
                今日ましょう = 新しい日付（日付）; 
                聞かせてtargetday_milliseconds = today.getTime（）+ 1000年* 60 * 60 * 24 * 日。
                today.setTime（targetday_milliseconds）。
                聞かせてtYear = today.getFullYear（）; 
                聞かせてtMonth = today.getMonth（）; 
                聞かせてtDate = today.getDate（）;
                リターン{ 
                    dateVal：tYear + ' - ' + tMonth + ' - ' + tDate、
                    dayVal：tDate 
                }。 
            }
        }、 
        （）{ 搭載
            この.calDate（）。
        } 
    }。
</ SCRIPT> 
<スタイルLANG = "少ない"> 
    @font_color：#FFF; 
    @font_size：18px; 
    .td - ボーダー{ 
        幅： 14.28571428571429% 。
        / * 幅：40ピクセル; * / 
        国境：固体1pxのグレー。
        国境 - 右：なし。
        行 - 高さ：36px; 
        背景：オレンジ; 
        色：@font_color。
        フォント - サイズ：16pxに; 
    } 
    .td -border：直前に入って子{ 
        ボーダー -月{右：固体1pxのグレー。
    } 
    .date - ヘッダ{ 
        フォント - サイズ：28px; 
        フォント - 重さ：太字; 
        行 - 高さ：42px; 
        背景：deepskyblue。
    } 
    .operation - バー{ 
        幅： 100％ 。
        背景：deeppink。
        色：@font_color。
        フォント - サイズ：@font_size。
        フォント - 重さ：太字; 
    } 
    .NO -to- 
        色：グレー。
    } 
    .is-to- 月{ 
        色：@font_color。
    }
 </スタイル>