日付ピッカー

ポップアップボックスまたはインラインカレンダーから日付を選択します。

日付ピッカーウィジェットの詳細については、API ドキュメントの日付ピッカーウィジェットをご覧ください。

デフォルト関数

Datepicker は標準フォーム入力フィールドにバインドされています。フォーカスを入力に移動すると (クリックまたはタブキーを使用)、小さなオーバーレイでインタラクティブなカレンダーが開きます。日付を選択し、ページ上の任意の場所をクリックするか (入力ボックスはフォーカスを失います)、Esc キーを押して閉じます。日付を選択した場合、フィードバックが入力値として表示されます。

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 默认功能</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

インスタンスの実行 »

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

アニメーション

日付ピッカーを開いたり閉じたりするときに、さまざまなアニメーションを使用します。ドロップダウンボックスからアニメーションを選択し、入力ボックスをクリックしてその効果を確認します。 3 つの標準アニメーションのいずれかを使用することも、UI 効果のいずれかを使用することもできます。

インスタンス

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI 日期选择器（Datepicker） - 动画</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
	<script src="//code.jquery.com/jquery-1.9.1.js"></script>
	<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
	<script>
	$(function() {
		$( "#datepicker" ).datepicker();
		$( "#anim" ).change(function() {
			$( "#datepicker" ).datepicker( "option", "showAnim", $( this ).val() );
		});
	});
	</script>
</head>
<body>

<p>日期：<input type="text" id="datepicker" size="30"></p>

<p>动画：<br>
	<select id="anim">
		<option value="show">Show (默认)</option>
		<option value="slideDown">滑下</option>
		<option value="fadeIn">淡入</option>
		<option value="blind">Blind (UI 百叶窗特效)</option>
		<option value="bounce">Bounce (UI 反弹特效)</option>
		<option value="clip">Clip (UI 剪辑特效)</option>
		<option value="drop">Drop (UI 降落特效)</option>
		<option value="fold">Fold (UI 折叠特效)</option>
		<option value="slide">Slide (UI 滑动特效)</option>
		<option value="">无</option>
	</select>
</p>


</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

他の月の日付

datepicker は他の月の日付を表示できます。日付もオプションで設定できます。

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 其他月份的日期</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showOtherMonths: true,
      selectOtherMonths: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ボタンバーを表示します

今日の日付を選択するための「今日」オプションを表示しますブール値の「」ボタンを使用して、カレンダーを閉じるための「完了」ボタンを表示します。デフォルトでは、ボタンバーが表示されているときに各ボタンが有効になりますが、追加のオプションを使用してボタンをオフにすることができます。ボタンのテキストはカスタマイズ可能です。 showButtonPanel

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 显示按钮栏</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showButtonPanel: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

インスタンスの実行»オンラインインスタンスを表示するには、[インスタンスの実行]ボタンをクリックしてください

インライン表示

日付ピッカーは、ページ内に表示されるのではなく、ページ内にネストされます。オーバーレイ内の。入力の代わりに div で .datepicker() を呼び出すだけです。

インスタンス

rreee

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

月と年のメニューを表示します

静的な月を表示する代わりに、月と年のドロップダウンボックスを表示します/年のタイトル。大きな期間をナビゲートするのに便利です。ブール値の changeMonth オプションと changeyear オプションを追加するだけです。 changeMonth 和 changeYear 选项即可。

实例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 内联显示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
  });
  </script>
</head>
<body>
 
日期：<div id="datepicker"></div>
 
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

显示多个月份

设置 numberOfMonths

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 显示月份 & 年份菜单</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      changeMonth: true,
      changeYear: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

複数の月を表示する

複数の月を表示するには、`numberOfMonths` オプションを整数 2 または 2 より大きい整数に設定します。日付ピッカーの月に。

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 显示多个月份</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      numberOfMonths: 3,
      showButtonPanel: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

インスタンスの実行 »
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

日付の形式

さまざまな方法で日付フィードバックを表示します。ドロップダウンボックスから日付形式を選択し、入力ボックスで日付をクリックして選択すると、選択した形式で日付が表示されます。 Instance

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 格式化日期</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker();
    $( "#format" ).change(function() {
      $( "#datepicker" ).datepicker( "option", "dateFormat", $( this ).val() );
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker" size="30"></p>
 
<p>格式选项：<br>
  <select id="format">
    <option value="mm/dd/yy">Default - mm/dd/yy</option>
    <option value="yy-mm-dd">ISO 8601 - yy-mm-dd</option>
    <option value="d M, y">Short - d M, y</option>
    <option value="d MM, y">Medium - d MM, y</option>
    <option value="DD, d MM, yy">Full - DD, d MM, yy</option>
    <option value="'day' d 'of' MM 'in the year' yy">With text - 'day' d 'of' MM 'in the year' yy</option>
  </select>
</p>
 
 
</body>
</html>

runインスタンス»slick "[実行]ボタンをクリックしてオンラインインスタンスインスタンスを表示します。入力ボックスの横にあるアイコンをクリックする。フォーカス (デフォルトの動作)、アイコンのクリック、またはフォーカス/アイコンのクリックで日付ピッカーが開くように設定します。

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 图标触发器</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

インスタンスの実行»

「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

ローカライズされたカレンダー

ローカライズされた日付ピッカーカレンダーの言語と形式 (デフォルトは英語) / 西洋料理フォーマット）。 datepicker には、アラビア語やヘブライ語など、右から左に読む言語のサポートが組み込まれています。

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 本地化日历</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-ar.js"></script>
  <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-fr.js"></script>
  <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-he.js"></script>
  <script src="http://jqueryui.com/resources/demos/datepicker/jquery.ui.datepicker-zh-TW.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker( $.datepicker.regional[ "fr" ] );
    $( "#locale" ).change(function() {
      $( "#datepicker" ).datepicker( "option",
        $.datepicker.regional[ $( this ).val() ] );
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"> 
  <select id="locale">
    <option value="ar">Arabic (‫(العربية</option>
    <option value="zh-TW">Chinese Traditional (繁體中文)</option>
    <option value="">English</option>
    <option value="fr" selected="selected">French (Français)</option>
    <option value="he">Hebrew (‫(עברית</option>
  </select></p>
 
 
</body>
</html>

インスタンスの実行 »

🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜

別の入力ボックスに入力します

altField オプションと altFormat オプションを使用すると、日付が選択されるたびに、別の入力ボックスに特定の形式の日付が入力されます。この機能は、コンピューターに適した日付によってさらに処理され、ユーザーにわかりやすい日付が表示されます。 altField 和 altFormat 选项，无论何时选择日期，会在另一个输入框中填充带有一定格式的日期。这个功能通过对电脑友好性的日期进一步加工后，向用户呈现一个用户友好性的日期。

实例

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 填充另一个输入框</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      altField: "#alternate",
      altFormat: "DD, d MM, yy"
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"> <input type="text" id="alternate" size="30"></p>
 
 
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

限制日期范围

通过 minDate 和 maxDate

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 限制日期范围</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

インスタンスの実行»「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

日付範囲を制限する

`minDate` オプションと `maxDate` オプションを使用して、選択可能な日付範囲を制限します。開始日と終了日を実際の日付 (new Date(2009, 1 - 1, 26))、今日からの数値オフセット (-20)、または期間と単位の文字列 ('+1M +10D ') に設定します。）。文字列に設定する場合は、日には「D」、週には「W」、月には「M」、年には「Y」を使用します。

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 选择一个日期范围</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#from" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#to" ).datepicker( "option", "minDate", selectedDate );
      }
    });
    $( "#to" ).datepicker({
      defaultDate: "+1w",
      changeMonth: true,
      numberOfMonths: 3,
      onClose: function( selectedDate ) {
        $( "#from" ).datepicker( "option", "maxDate", selectedDate );
      }
    });
  });
  </script>
</head>
<body>
 
<label for="from">从</label>
<input type="text" id="from" name="from">
<label for="to">到</label>
<input type="text" id="to" name="to">
 
 
</body>
</html>

インスタンスの実行 »
オンラインインスタンスを表示するには、「インスタンスの実行」ボタンをクリックしてください

日付範囲を選択してください

検索する日付範囲を選択してください。

インスタンス

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI 日期选择器（Datepicker） - 显示一年中的第几周</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <script>
  $(function() {
    $( "#datepicker" ).datepicker({
      showWeek: true,
      firstDay: 1
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

インスタンスの実行»
「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します

その年の週を表示します

datepickerは年の番号を表示できます週。デフォルトの計算は ISO 8601 の定義に基づいています。つまり、各週は月曜日に始まり、各年の第 1 週にはその年の第 1 木曜日が含まれます。これは、ある年の一部の日が別の年の週に属する可能性があることを意味します。 🎜🎜🎜インスタンス🎜🎜rrreee🎜🎜🎜インスタンスの実行 »🎜🎜「インスタンスの実行」ボタンをクリックしてオンラインインスタンスを表示します🎜🎜🎜🎜🎜🎜🎜

← ボタン

ダイアログ →

日付ピッカー

デフォルト関数

インスタンス

アニメーション

インスタンス

他の月の日付

インスタンス

ボタンバーを表示します

月と年のメニューを表示します

实例

显示多个月份

複数の月を表示するには、numberOfMonths オプションを整数 2 または 2 より大きい整数に設定します。日付ピッカーの月に。

さまざまな方法で日付フィードバックを表示します。ドロップダウン ボックスから日付形式を選択し、入力ボックスで日付をクリックして選択すると、選択した形式で日付が表示されます。 Instance

ローカライズされた日付ピッカーカレンダーの言語と形式 (デフォルトは英語) / 西洋料理フォーマット ）。 datepicker には、アラビア語やヘブライ語など、右から左に読む言語のサポートが組み込まれています。

別の入力ボックスに入力します

实例

限制日期范围

検索する日付範囲を選択してください。

PHP中国語ウェブサイト

複数の月を表示するには、`numberOfMonths` オプションを整数 2 または 2 より大きい整数に設定します。日付ピッカーの月に。

さまざまな方法で日付フィードバックを表示します。ドロップダウンボックスから日付形式を選択し、入力ボックスで日付をクリックして選択すると、選択した形式で日付が表示されます。 Instance

ローカライズされた日付ピッカーカレンダーの言語と形式 (デフォルトは英語) / 西洋料理フォーマット）。 datepicker には、アラビア語やヘブライ語など、右から左に読む言語のサポートが組み込まれています。