JavaScript + Ajax 実践サンプル集 - Datepicker Display Month and Year Menu (年月のドロップダウンリストを表示)

Datepicker Display Month and Year Menu (年月のドロップダウンリストを表示)

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、jQueryのdatepickerプラグインを使用してカレンダーを表示します。テキストボックスにフォーカスを移動するとカレンダーが表示されます。カレンダーの左右のボタンをクリックすると「月」を切り替えることができます。また、ドロップダウンリストから「年」「月」を選択して切り替えることもできます。

このサンプルを編集して試してみる

カレンダーに年月のドロップダウンリストを表示するには、datepickerの引数に changeMonthとchangeYearを追加します。

$('#datepicker').datepicker({
  changeMonth: true,
  changeYear: true
});

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Plugin UI Widgets - Datepicker Display Year/Month</title>

$('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    showMonthAfterYear: false
  });

$('#themes a').click(function() {
    var theme = this.id;
    switchStylestyle(theme);
    $('#themes a').removeClass('active');
    $(this).addClass('active');
    $('input:text').focus();
    return false;
  });

var theme = readCookie('style');
  if (theme) {
    switchStylestyle(theme);
    $('#themes a').removeClass('active');
    $('#' + theme).addClass('active');
  }

});
</script>

</head>
<body>

外部スクリプトHEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
$(function() {

  $('#datepicker').datepicker({
    changeMonth: true,
    changeYear: true
  });

  $('#themes a').click(function() {
    var theme = this.id;
    switchStylestyle(theme);
    $('#themes a').removeClass('active');
    $(this).addClass('active');
    $('input:text').focus();
    return false;
  });

  var theme = readCookie('style');
  if (theme) {
    switchStylestyle(theme);
    $('#themes a').removeClass('active');
    $('#' + theme).addClass('active');
  }

});

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<link href="jQuery/UI/theme-ui-darkness/ui.all.css" rel="stylesheet" title="UIdarkness" type="text/css" />
<link href="jQuery/UI/theme-ui-lightness/ui.all.css" rel="alternate stylesheet" title="UIlightness" type="text/css" />
<link href="jQuery/UI/theme-ui-smoothness/ui.all.css" rel="alternate stylesheet" title="Smoothness" type="text/css" />
<link href="jQuery/UI/theme-ui-start/ui.all.css" rel="alternate stylesheet" title="Start" type="text/css" />
<style type="text/css">		  
  body{ font: 62.5% Verdana, sans-serif; }	
  div#themes a img { width: 35px; border: 0; }
  div#themes a.active img { width: 45px; border: 0; }
</style>  
<script src="jQuery/jquery-1.3.1.js" type="text/javascript"></script>
<script src="jQuery/UI/jquery.ui.all.js" type="text/javascript"></script>
<script src="jQuery/UI/ui.datepicker-ja.js" type="text/javascript"></script>
<script src="jQuery/UI/switchstyle.js" type="text/javascript"></script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div>
  <div id="themes">
    <a id="UIdarkness" href="#nogo"><img src="jQuery/UI/images/theme_ui_dark.png" alt="UI darkness" /></a>
    <a id="UIlightness" href="#nogo"><img src="jQuery/UI/images/theme_ui_light.png.gif" alt="UI lightness" /></a>
    <a id="Smoothness" href="#nogo"><img src="jQuery/UI/images/theme_smoothness.png" alt="Smoothness" /></a>
    <a id="Start" href="#nogo"><img src="jQuery/UI/images/theme_start_menu.png" alt="Start" /></a>
  </div>
  <p>Date: <input type="text" id="datepicker" /></p>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Datepicker Display Month and Year Menu (年月のドロップダウンリストを表示)

JavaScript + Ajax 実践サンプル集 (1276本以上) ◇編集して実行可能◇

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5

Datepicker Display Month and Year Menu (年月のドロップダウンリストを表示)

JavaScript + Ajax 実践サンプル集 (1276本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... powered by asp.net 3.5