datepickerを使う最近、Bootstrapというものを使い始めました。CSSを細かく書かなくてもclassなどを指定するだけでいい感じの見栄えにしてくれるすぐれものです。プロトタイプなど、そこまで見栄えを気にしなくてもいいけど、でもやっぱカッコイイほうがいいなあ、というときにぴったり。Bootstrapは周辺UIパーツが充実しています。今回は、日付をカレンダー的なUIで取得するDatePickerを使用したのでその設定方法をメモ。サンプルページはこちらです。Bootstrapをテンプレートから導入BootstrapはHTMLのテンプレートがあるので、コピってきます。バージョンが2から3になって色々変更があったようです。テンプレートはここにありますので、コピペしましょう。バージョンに合わせて最新のテンプレートにしたほうが良さげです。src="js/bootstrap.min.js"></script></body></html>[/html]Bootstrap本体を設置まずBootstrap本体をサイトからダウンロードします。ダウンロードすると以下の様なファイル一式が入ったZIPが確認できると思うので、とりあえず解凍します。glyphicons-halflings-regular.woff[/bash]この解凍してできたフォルダ自体を「bootstrap」という名前にして今書いているHTMLと同じディレクトリに設置しました。いうわけでbootstrap.jsや.cssのソースのパスもテンプレートから変更してます。src="bootstrap/js/bootstrap.min.js"></script>[/html]Datepickerの設置こちらからソースをダウンロードします。こちらも解凍すると「js」「css」「less」という3つのフォルダの入ったフォルダが出来上がるので、「datepicker」というフォルダ名にして先ほど作った「bootstrap」のフォルダに入れます。Bootstrap.jsや.css同様にHTMLにタグを追記します。出来上がったテンプレートが以下。src="bootstrap/datepicker/js/bootstrap-datepicker.js"></script></body></html>[/html]DatePicker用のJavascriptを書くここはDatePickerのサイトからコピペしました。トップページのソースを見るとサンプルが全て明確に書いてあるので、欲しい機能の部分だけコピーします。‘mm-dd-yyyy’});});[/javascript]これをscriptタグで囲んでさきほどのHTMLにコピペします。Bootstrap3向けにHTMLを書くdatepickerのサイトはbootstrap2向けっぽいので、微妙に変える必要があります。サンプルページはこちらです。フォームをクリックするとカレンダーが出てきます。‘mm-dd-yyyy’});});</script></body></html>[/html]サンプルページはこちらです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。UltimatelySocial。