JavaScript + Ajax 実践サンプル集 - Datepicker Format Date (日付の書式を設定)

Datepicker Format Date (日付の書式を設定)　《プログラマーがネットで副収入を得る方法とは》

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

このサンプルは、jQueryのdatepickerプラグインを使用してカレンダーを表示します。テキストボックスにフォーカスを移動するとカレンダーが表示されますのでマウスで日付を選択します。選択した日付はテキストボックスに表示されます。日付の書式はドロップダウンリストから選択することができます。デフォルト値は「yyyy/mm/dd」です。カレンダーのテーマはアイコンをクリックして選択します。

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

日付の書式は、datepickerの引数にoptionを追加して指定します。

$("#format").change(function() {
  $('#datepicker').datepicker('option', {
    dateFormat: $(this).val()
  });
});

<!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 Format Date</title>
<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;
  }

#themes
  {
    position: relative;
    top: 10px;
    left: 10px;
    width: 45px;
    background-color: #fff;
    z-index: 100;
  }
  #themes a img
  {
    width: 35px;
    border: 0;
  }
  #themes a.active img
  {
    width: 45px;
    border: 0;
  }    
  #themes a.p1, #themes a.p1:visited
  {
    display: inline;
    width: 45px;
    height: 45px;
    text-decoration: none;
    background: #fff;
    top: 0;
    left: 0;
    border: 0;
  }

#themes a.p1:hover
  {
    text-decoration: none;
    background-color: #8c97a3; 
    color: #000;
  }
  #themes a .large
  {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border: 0;
    top: 0;
    left: 0;
  }
  #themes a.p1:hover .large
  {
    display: block;
    position: absolute;
    top: 30px;
    left: 140px;      
    width: 90px; 
    height: 80px;      
    border: 3px solid #ccc;
  }
</style>

$("#datepicker").datepicker();
    $("#format").change(function() {
      $('#datepicker').datepicker('option', {
        dateFormat: $(this).val()
      });
    });

$('#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>
  <div>
    <div id="themes">
      <a id="UIdarkness" class="p1" href="#nogo">
        <img src="jQuery/UI/images/theme_ui_dark.png" alt="" />
        <img class="large" src="jQuery/UI/images/theme_ui_dark.png" alt="UI darkness" />
      </a>
      <a id="UIlightness" class="p1" href="#nogo">
        <img src="jQuery/UI/images/theme_ui_light.png.gif" alt="" />
        <img class="large" src="jQuery/UI/images/theme_ui_light.png.gif" alt="UI lightness" />
      </a>
      <a id="Smoothness" class="p1" href="#nogo">
        <img src="jQuery/UI/images/theme_smoothness.png" alt="" />
        <img class="large" src="jQuery/UI/images/theme_smoothness.png" alt="Smoothness" />
      </a>
      <a id="Start" class="p1" href="#nogo">
        <img src="jQuery/UI/images/theme_start_menu.png" alt="" />
        <img class="large" src="jQuery/UI/images/theme_start_menu.png" alt="Start" />
      </a>
    </div>
    <p>
      Date:
      <input type="text" id="datepicker" size="30" /></p>
    <p>
      Format options:<br />
      <select id="format">
        <option value="yy/mm/dd">Default - yyyy/mm/dd</option>
        <option value="yy-mm-dd">ISO 8601 - yyyy-mm-dd</option>
        <option value="yymmdd">Short - yyyymmdd</option>
        <option value="yy'年'mm'月'dd'日'">With text - 'yyyy年mm月dd日'</option>
        <option value="yy'年'm'月'd'日'">With text - 'yyyy年m月d日'</option>
      </select>
    </p>
  </div>
</body>
</html>

外部スクリプトCSS部HEAD部BODY部

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

            
$(function() {

  $("#datepicker").datepicker();
  $("#format").change(function() {
    $('#datepicker').datepicker('option', {
      dateFormat: $(this).val()
    });
  });

  $('#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');
  }

});

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

            
body
{
  font: 62.5% Verdana, sans-serif;
}

#themes
{
  position: relative;
  top: 10px;
  left: 10px;
  width: 45px;
  background-color: #fff;
  z-index: 100;
}
#themes a img
{
  width: 35px;
  border: 0;
}
#themes a.active img
{
  width: 45px;
  border: 0;
}    
#themes a.p1, #themes a.p1:visited
{
  display: inline;
  width: 45px;
  height: 45px;
  text-decoration: none;
  background: #fff;
  top: 0;
  left: 0;
  border: 0;
}

#themes a.p1:hover
{
  text-decoration: none;
  background-color: #8c97a3; 
  color: #000;
}
#themes a .large
{
  display: block;
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  top: 0;
  left: 0;
}
#themes a.p1:hover .large
{
  display: block;
  position: absolute;
  top: 30px;
  left: 140px;      
  width: 90px; 
  height: 80px;      
  border: 3px solid #ccc;
}

ボックス内のコードを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" size="30"/></p>
  <p>Format options:<br />
    <select id="format">
      <option value="yy/mm/dd">Default - yyyy/mm/dd</option>
      <option value="yy-mm-dd">ISO 8601 - yyyy-mm-dd</option>
      <option value="yymmdd">Short - yyyymmdd</option>
      <option value="yy'年'mm'月'dd'日'">With text - 'yyyy年mm月dd日'</option>	
      <option value="yy'年'm'月'd'日'">With text - 'yyyy年m月d日'</option>		  	  	  
    </select>
  </p>
</div>

コメント・提案の投稿！

名前
メール
件名
本文

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

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

Datepicker Format Date (日付の書式を設定)　《プログラマーがネットで副収入を得る方法とは》

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

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

Datepicker Format Date (日付の書式を設定) 《プログラマーがネットで副収入を得る方法とは》

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

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

Datepicker Format Date (日付の書式を設定)　《プログラマーがネットで副収入を得る方法とは》