--
--

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Tag:

05
2016

AngularJS1で日付を複数選択可能なDatePicker

CATEGORYJavaScript
AngularJS1でカレンダーから日付を選ばせるHTML5の <input type="date"> 的な奴で複数選択したかったのだが、探したら意外と苦労したのでメモ。

ググるとjQueryとかbootstrapとか組み合わせるのもいろいろ出てきたのだが、最終的にすんなり動いて使いやすかったのは↓だった。
MultipleDatePickerは、AngularJS1用のモジュールで、CSSフレームワークとかに紐づかない、ほぼそれ単品で動作するモジュール。
Moment.js っていう日付ライブラリだけ要求してくる。)

凄くシンプルなモジュールなので、リンク先の公式サイト見てもらった方が手っ取り早いんだけど、ごくごく簡単なサンプルだとこんな感じ。
<!DOCTYPE html>
<html lang="ja" ng-app="sampleApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script type="text/javascript" src="multipleDatePicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="multiple-date-picker.css">
</head>
<body>
<script>
angular.module('sampleApp', ['multipleDatePicker']);
</script>
<multiple-date-picker ng-model="selectedDate"></multiple-date-picker>
<textarea>{{ selectedDate.join() }}</textarea>
</body>
</html>
公式見ると分かる通り、カレンダー複数選択させたい&日付範囲カスタマイズしたいとか、シンプルでも要求されがちな機能は一通り揃ってる模様。
デザインも立派ではないけど、余計なものが無い分、合わせやすいと思う。
それに何より有り難いのが、js足してcss足してモジュールを登録してHTMLにサンプル貼って…って流れだけであっさり動いたこと(涙
シンプルな奴はこういうところ強い。

モーダル的な機能はなさそうなので、そういう形で出すのには別途対応が必要だけど、シンプルに複数選択可能なカレンダー機能だけ欲しい!って時には便利そうということで。


なお、参考までに他に試した奴も。

jQuery UIのプラグインの MultiDatesPicker
これも普通に使えそうな雰囲気。
HTMLに組み込んで入力させるとこまでいけた。
っが、AngularJSのコードと組み合わせるのがちょい面倒だったり、何より今jQuery入ってないとこにこれだけのために入れるのは何だったので避ける。
試してないけど、両者を組み合わせるモジュールもあるみたい。

UI Bootstrapの拡張の gm.datepickerMultiSelect
これは、何故か手元の環境では動かず…バージョン違い?単純になんかミスってる?UI Bootstrapの素のDatePickerは動くのに(--;
まあ、そもそもbootstrap使ってないページなんで入れるのきついけど。

multi date picker とかでググるといろいろ出てくるからたぶん他にもあると思うけど、今回パッと見つかったのはこんなとこ。
スポンサーサイト

Tag: JavaScript AngularJS

0 Comments

Leave a comment

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。