このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

TypeScript & AngularJS で日付選択フォーム作成

JavaScript

2015.07.17

この記事は最終更新日から1年以上が経過しています。

どうもです。

いやぁ。

暑いですねー。全く。

なんとなく、AngularJSの事書きたくなったので書きます。

まぁ、特別すごい事ではないのですが、何か参考になればと。

で、今回はこういった年月日の選択フォームに関して

htmlで言うと、select要素を用いて実装するのですが、

<select id="year" name="year">
    <option value="0">2015</option>
    <option value="1">2016</option>
    <option value="2">2017</option>
</select>

こんな感じですかね。

ま、AngularJS使っていると、こんなべた書きはせず、ng-options等を用いて実装します。

詳しくはこちらなど参考にしていただければと。

http://js.studio-kingdom.com/angularjs/ng_directive/select

で、ng-options用いたhtmlは

<select id="year" ng-options="y for y in yearList" ng-model="scheduleYear"></select>

こんな感じですかね。

yearListは[“2015″,”2016″,”2017”]といった年号の配列となっております。

この形で行くと、Javscript側は、

$scope.yearList = ["2015","2016","2017"]; 

といった感じで$scope.yearListを定義します。

すると、

こんな感じにできちゃうわけですね。いやー便利。

ですが、こんなベタ書きしていますと、(こんなベタ書きしないのですが)

「来年手書きで修正?」「数増やす時は?」と、色々と手動感たっぷりになり、JavaScript使っている意味ないですね。

JavaScriptは日付オブジェクトである、Dateオブジェクトが用意されていますので、こちらを使っていきましょう。

var now = new Date();

now.getFullYear();

now.getMonth() + 1;

now.getDate();

といった形で、現在の年月日を取得できます。

といったわけで、こういう日時を選択するフォームの作成を行いましょう。

日時選択フォーム作成

注意点としましては、日にちが変動するところですかね。

結論を言ってしまうと、以下のように year(年)、month(月)の値を引数として実行すれば、日にちが何日あるか取得できます。

function getDay(year, month) {
    return new Date(year, month, 0).getDate();
}

これをhtmlの方にFunctionとして登録すれば、年月を変更すれば連動して日にちも取得できます。

といったところでhtmlの方は、こんな感じで

<select id="year" ng-options="y for y in yearList" ng-model="scheduleYear"></select>
<label for="year">年</label>
<select id="month" ng-options="m for m in monthList" ng-model="scheduleMonth"></select>
<label for="month">月</label>
<select id="day" ng-options="d for d in getDayList(scheduleYear, scheduleMonth)" ng-model="scheduleDay"></select>
<label for="day">日</label>

getDayListscheduleYearとscheduleMonthを引数にする事によって日付を取得してきます。

ここから、TypeScriptで記述していきます。

日時選択フォーム作成:TypeScripe

まずmoduleはScheduleとして作成。

class ScheduleModelを作成しています。

module Schedule {
    class ScheduleModel {
        constructor() {}
    }
}

constructor(){}はScheduleModelを生成の際、呼び出され初期化が行えます。

まず、今の年数から何年表示させたいかを、ADD_SELECT_YEAR_NUMの定数とし定義。

private ADD_SELECT_YEAR_NUM: number = 3;
private select_year_list: string[] = [];
private select_month_list: string[] = [];

年と月を格納するリストも定義。

年リストをsetする、setアクセサを作成しています。

public setYearList() {
    var year = new Date().getFullYear(),
    i;
    for(i = 0; i < this.ADD_SELECT_YEAR_NUM; i++) {
        this.select_year_list.push(String(year + i));
    }
}

月リストをsetする、setアクセサを作成しています。

月は固定で1〜12月なので以下のような感じで。

public setMonthList() {
    var i: number;
    for(i = 1; i < 13; i++) {
        this.select_month_list.push(String(i));
    }
}

続いて、年、月を取得するgetアクセサの作成

public getYearList(): string[] {
    return this.select_year_list;
}
public getMonthList(): string[] {
    return this.select_month_list;
}

なんてないですね。

では、今の年、月はそのリストから何番目なのかを取得するgetアクセサを作成。

public getInitYearNum(): number {
    var year = new Date().getFullYear();
        return this.select_year_list.indexOf(String(year));
}
public getInitMonthNum(): number {
    var month = new Date().getMonth() + 1;
    return this.select_month_list.indexOf(String(month));
}

これで、とりあえず、年、月のリストは完成しましたね。

class ScheduleModel生成時にこれらを実行したいので、

constructor(
) {
    this.setYearList();
}

こんな感じで、setYearList()には、this.setMonthList();を追記します。

scope

年のリストと、月のリストのscopeの作成して、

$scope.yearList = model.getYearList();
$scope.monthList = model.getMonthList();

ng-modelの方に、今現在の年、月を代入。

$scope.scheduleYear = $scope.yearList[model.getInitYearNum()];
$scope.scheduleMonth = $scope.monthList[model.getInitMonthNum()];

で、選択された状態になります。

それらを、getDayListで引数としますので、scope側はこんな感じで。

$scope.getDayList = (year: string, month: string): string[] => {
    return model.getDayList(parseInt(year, 10), parseInt(month, 10));
};

modelの方で、yearとmonthを元に日付を返すように処理しています。

public getDayList(year: number, month: number) {
    var dayLength = new Date(year, month, 0).getDate(),
    dayList: string[] = [],
    i;
    for(i = 0; i < dayLength; i++) {
        dayList.push(String(1 + i));
    }
    return dayList;
}

初期の日付を返すgetアクセサも作成。

public getInitDay(): string {
    var nowDate = new Date(),
    dayList = this.getDayList(nowDate.getFullYear(), nowDate.getMonth() + 1),
    initNumber = dayList.indexOf(String(nowDate.getDate()));
    return dayList[initNumber];
}

scopeにgetInitDayを代入すれば完成ですね。

$scope.scheduleDay = model.getInitDay();

年、月を変更すると、日付も連動。

と、今回のソースはgistに記載しております。

https://gist.github.com/webcyou/cf4e87cece86806d0d0a

参考になればとー。

ではでは。

Comment

Related Article

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

2018.09.26

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

CATEGORY LIST

LATEST NEWS

Jenkins 認証情報「Jenkinsマスター上の~/.sshから」が表示しない

tool

2018.11.17

流れで、Raspberry Pi Zero WHを購入。気がつけばもうラズパイ4台。

RaspberryPi

2018.11.06

安く電子工作を始めるなら、電子パーツ購入は「aitendo」がおすすめ!

RaspberryPi

2018.11.06

ASUS Chromebook Flip C101PAに、Visual Studio Codeをインストール

Chromebook

2018.10.15

Chromebookに、Ubuntu (Xubuntu)をインストールしたあとの日本語入力設定

Chromebook

2018.10.14

ASUS Chromebook Flip C101PAに、Ubuntu (Linux)インストール手順

Chromebook

2018.10.10

nodeのない環境にnodeを導入(HTML5ゲームも提供)し続け、1年数ヶ月経過後、かなり開発環境が整ってきたお話。

JavaScript

2018.09.26

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US