浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

Date.prototype.getDate()と動的な日付候補を持つプルダウン

Date.prototype.getDate() | MDN
 Date.prototype.getDate()はDateオブジェクトの日を返します。これだけならば便利な関数で終わるのですがJavaScriptのDateオブジェクトの持つ月日の形式の特徴によりもっと便利な使い方が出来ます。
 JavaScriptのDateオブジェクトは月日を循環する形で持ちます。これは下の画像の様に最終日、最終月をまたぐとまた1から始まるというものです。

 この循環を用いると次の様に1の一つ前である0を指定することで月ごとの最終日を取得できます。

 この最終日を取得する方法によって次の様に任意の日付のリストを取得できます。

    /**
     * 現状態の年月のselect用日付リストをゲット
     * @return {{day: *, selected: boolean}[]}
     */
    getDays: function() {
      const days = [null]; // 未選択状態を定義
      // 最終日、転じてその月の日数
      const daysNumberOfMonth = new Date(this.selectedYear, this.selectedMonth, 0).getDate();
      // 選択候補の配列を作成
      for (let i = 1; i < daysNumberOfMonth + 1; i++) {
        days.push(i);
      }

      // select用に{day: *, selected: boolean}の形に加工
      // 現状態で選択されている日が新たな年月でも選べるならば選択状態を維持
      return days.map((day) => {
        return {day, selected: days === this.selectedDay};
      });
    },

 このコードと現状態に合わせて描画を変更するイベントを用いることで次のプログラムの様に選択された年月によって日の選択範囲を動的に変更するプルダウンが作れます。

  • この記事いいね! (0)