JqueryのDatepicer基本編
javascriptのポピュラーなライブラリ、jqueryではデザインをカスタマイズできるカレンダーを表示する事ができます。
基本概要: http://js.studio-kingdom.com/jqueryui/widgets/datepicker
表示例
基本的な使い方
jquery及びjquery-ui.jsをインクルードします。その後にカレンダーを表示したいエレメントに対して
$("#datepicker").datepicker();
と命令を行えば使う事ができます。
カスタム例
下記の様にdatapickerを発動する際に各種プロパティを設定する事で表示の仕方をカスタマイズする事ができます。
また下記サイトの様にstyle設定を変更する事も可能です。
http://d.hatena.ne.jp/m1saito/20130823/1377239006
$(function() { var months = ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]; $("#datepicker").datepicker({ prevText: '前月', nextText: '次月', changeYear: true, changeMonth: true, yearSuffix: "年", showMonthAfterYear: true, monthNames: months, monthNamesShort: months, firstDay: 0,//何曜日を一番左に置くか dayNamesMin: ["日", "月", "火", "水", "木", "金", "土"], showButtonPanel: true, currentText: '今日', closeText: '閉じる', dateFormat: "yy/m/d" }); $("#datepicker").focus(); });
使用例
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Datepicker - Default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="http://shitake-crude-production.wikidot.com/javascript:jquery-datepicer/code/1"></script> </head> <body> <p>Date: <input type="text" id="datepicker"></p> </body> </html>
カスタム例
page revision: 22, last edited: 03 Dec 2017 13:56