JavaScript + Ajax 実践サンプル集 - Datepicker Restrict Date Range (日付の範囲を設定)

Datepicker Restrict Date Range (日付の範囲を設定)

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

このサンプルは、jQueryのdatepickerプラグインを使用してカレンダーから日付を選択することができます。テキストボックスにフォーカスを移動するとカレンダーがポップアップされます。カレンダーから選択する日付は、範囲を設定して制約することも可能です。ここでは、当日の日付を基準に前後３日分の範囲から選択できるようにしています。

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

datepickerの日付を制約するには、以下のような方法があります。「+5」などのように指定したときは、当日からの相対日付になります。「+1Y, +1M, +10D」のように指定したときは、当日の年月日からの相対になります。

$("#datepicker").datepicker({
  minDate: (new Date(2009, 2 - 1, 5)), // 年月日指定
  maxDate: (new Date(2009, 2 - 1, 20)) // 年月日指定
});

$("#datepicker").datepicker({
  minDate: -5, maxDate: +5 // 今日からの相対日付 
});

$("#datepicker").datepicker({
  minDate: -20, maxDate: '+1M +10D' // +1M(当月+1), +10D(当日+10) 
});

<!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 Restrict Date Range</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" />
  <link href="jQuery/UI/theme-ui-blitzer/ui.all.css" rel="alternate stylesheet" title="Blitzer"
    type="text/css" />
  <link href="jQuery/UI/theme-ui-mintchoc/ui.all.css" rel="alternate stylesheet" title="MintChoc"
    type="text/css" />
  <link href="jQuery/UI/theme-ui-trontastic/ui.all.css" rel="alternate stylesheet"
    title="Trontastic" type="text/css" />
  <style type="text/css">
    body
    {
      font: 62.5% Verdana, sans-serif;
    }
    div#themes a img
    {
      width: 60px;
      border: 0;
    }
    #themes
    {
      position: relative;
      margin: 2em auto;
    }
    #themes a:visited, #themes a
    {
      text-decoration: none;
      color: #d00;
      font-weight: bold;
    }
    #themes a:visited img, #themes a img
    {
      filter: alpha(opacity=40);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
      -moz-opacity: 0.40;
      opacity: 0.4;
    }
    #themesa:hover
    {
      background-color: transparent;
      color: #06a;
    }
    #themes a span
    {
      display: none;
    }
    #themes a:hover span
    {
      display: block;
      position: absolute;
      top: 55px;
      left: 0;
      font-size: 12px;
      height: 18px;
      padding: 2px;
      font-weight: normal;
      color: #a40;
    }
    #themes a:hover img, #themes a.active img
    {
      filter: alpha(opacity=100);
      filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
      -moz-opacity: 1.00;
      opacity: 1;
    }
  </style>

$("#datepicker").datepicker({
        minDate: -3, maxDate: +3
      });

//  $("#datepicker").datepicker({
      //    minDate: (new Date(2009, 2 - 1, 5)),
      //    maxDate: (new Date(2009, 2 - 1, 20))
      //  });

//  $("#datepicker").datepicker({
      //    minDate: -5, maxDate: +5 
      //  });

//  $("#datepicker").datepicker({
      //    minDate: -20, maxDate: '+1M +10D'
      //  });

$('#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" href="#nogo">
        <img src="jQuery/UI/images/theme_ui_dark.png" alt="" title="" /><span>UI darkness</span></a>
      <a id="UIlightness" href="#nogo">
        <img src="jQuery/UI/images/theme_ui_light.png" alt="" title="" /><span>UI lightness</span></a>
      <a id="Smoothness" href="#nogo">
        <img src="jQuery/UI/images/theme_smoothness.png" alt="" title="" /><span>Smoothness</span></a>
      <a id="Start" href="#nogo">
        <img src="jQuery/UI/images/theme_start_menu.png" alt="" title="" /><span>Start</span></a>
      <a id="Blitzer" href="#nogo">
        <img src="jQuery/UI/images/theme_blitzer.png" alt="" title="" /><span>Blitzer</span></a>
      <a id="MintChoc" href="#nogo">
        <img src="jQuery/UI/images/theme_mint_choco.png" alt="" title="" /><span>Mint Choc</span></a>
      <a id="Trontastic" href="#nogo">
        <img src="jQuery/UI/images/theme_trontastic.png" alt="" title="" /><span>Trontastic</span></a>
    </div>
    <p>
      Date:
      <input type="text" id="datepicker" /></p>
  </div>
</body>
</html>

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

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

            
$(function() {

  $("#datepicker").datepicker({
    minDate: -3, maxDate: +3 
  });

  $('#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;
}
div#themes a img
{
  width: 60px;
  border: 0;
}
#themes
{
  position: relative;
  margin: 2em auto;
}
#themes a:visited, #themes a
{
  text-decoration: none;
  color: #d00;
  font-weight: bold;
}
#themes a:visited img, #themes a img
{
  filter: alpha(opacity=40);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
  -moz-opacity: 0.40;
  opacity: 0.4;
}
#themesa:hover
{
  background-color: transparent;
  color: #06a;
}
#themes a span
{
  display: none;
}
#themes a:hover span
{
  display: block;
  position: absolute;
  top: 55px;
  left: 0;
  font-size: 12px;
  height: 18px;
  padding: 2px;
  font-weight: normal;
  color: #a40;
}
#themes a:hover img, #themes a.active img
{
  filter: alpha(opacity=100);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
  -moz-opacity: 1.00;
  opacity: 1;
}

ボックス内のコードを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" />
<link href="jQuery/UI/theme-ui-blitzer/ui.all.css" rel="alternate stylesheet" title="Blitzer" type="text/css" />
<link href="jQuery/UI/theme-ui-mintchoc/ui.all.css" rel="alternate stylesheet" title="MintChoc" type="text/css" />
<link href="jQuery/UI/theme-ui-trontastic/ui.all.css" rel="alternate stylesheet" title="Trontastic" type="text/css" />

<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 実践サンプル集 (1496本以上)　◇編集して実行可能◇

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

Datepicker Restrict Date Range (日付の範囲を設定)

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

jQueryを使い倒せ! jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!

Datepicker Restrict Date Range (日付の範囲を設定)

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

jQueryを使い倒せ!　jQueryでAjaxを実装するための基礎知識と実践サンプルを一挙公開中... jQueryテンプレート42選!