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>

カスタム例

JqueryのDatepicerカスタム例

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License