[AngularJS] カレンダーにおける日付 (Date) のお世話サンプル | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） 今回は日付 (Date) オブジェクトをお世話するときに気を付けておくと良い点をまとめてみました。 ui.bootstrap.datepicker のサンプル Datepicker を用いたサンプルを用意しました。 「開始日 (fromDate) 」「終了日 (toDate)」という 2 つの日付を選択できるものとお考えください。 このサンプルを元に話を続けます。 複数モデルの世話 出力 わざわざ説明する必要ないかもしれませんが、データバインディング機能を使えば可能です。フィルタ機能で任意の文字列に変換しています。 <h2>Date : {{fromDate|date:'yyyy/M/d'}} ~ {{toDate|date:'yyyy/M/d'}}</h2> 監視 「開始日」「終了日」の各モデルを $scope.$watch() で監視す
![[AngularJS] カレンダーにおける日付 (Date) のお世話サンプル | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/648e11f84f388126ccfdea056ad86ba379173295/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fangularjs.png)
AngularJS: UI Bootstrap の datepicker-popup の使い方 - Qiita
UI Bootstrap の datepicker-popup は、クリックしたら Datepicker を表示するようにするためのディレクティブです。日付選択のためのカレンダーですね。 こんなやつです。 まずはコード 以下のような感じで利用することができます。 <div class="input-group" ng-controller="DatePickerController"> <input type="text" class="form-control" ng-model="date" datepicker-popup is-open="datePickerOpen"> <div class="input-group-addon" ng-click="toggleDatePicker($event)"> <i class="glyphicon glyphicon-calendar
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
