날짜 선택기


팝업 상자나 인라인 달력에서 날짜를 선택하세요.

datepicker 위젯에 대한 자세한 내용은 API 문서 Datepicker 위젯을 참조하세요.

기본 기능

Datepicker는 표준 양식 입력 필드에 바인딩되어 있습니다. 작은 오버레이에서 대화형 달력을 열려면 입력으로 초점을 이동합니다(탭 키를 클릭하거나 사용). 날짜를 선택하고 페이지의 아무 곳이나 클릭하거나(입력 상자가 초점을 잃음) Esc 키를 눌러 닫습니다. 날짜를 선택하면 피드백이 입력값으로 표시됩니다.

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();
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

애니메이션

날짜 선택기를 열거나 닫을 때 다른 애니메이션을 사용하세요. 드롭다운 상자에서 애니메이션을 선택하고 입력 상자를 클릭하여 효과를 확인하세요. 세 가지 표준 애니메이션 중 하나를 사용하거나 UI 효과 중 하나를 사용할 수 있습니다.

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();
		$( "#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는 다른 달의 날짜를 표시할 수 있으며, 이는 날짜는 선택 사항이 되도록 설정할 수도 있습니다.

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({
      showOtherMonths: true,
      selectOtherMonths: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

버튼 표시줄 표시

다음을 통해 오늘 날짜를 선택하는 "오늘" 옵션 표시 부울 값 " 버튼을 사용하여 캘린더를 닫는 "완료" 버튼을 표시합니다. 기본적으로 각 버튼은 버튼바가 표시될 때 활성화되지만, 추가 옵션을 통해 버튼을 끌 수 있습니다. 버튼 텍스트를 사용자 정의할 수 있습니다. showButtonPanel

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({
      showButtonPanel: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

인라인 디스플레이

날짜 선택기는 페이지에 표시되지 않고 중첩되어 있습니다. 오버레이에 있습니다. 입력 대신 div에서 .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();
  });
  </script>
</head>
<body>
 
日期：<div id="datepicker"></div>
 
 
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

월 및 연도 메뉴 표시

정적 월/월을 표시하는 대신 월 및 연도 드롭다운 상자 표시 긴 시간 범위를 탐색하는 것이 편리합니다. 부울 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({
      changeMonth: true,
      changeYear: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

运行实例 »

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

显示多个月份

设置 numberOfMonths

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({
      numberOfMonths: 3,
      showButtonPanel: true
    });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

여러 달 표시

여러 달을 표시하려면 numberOfMonths 옵션을 정수 2 또는 2보다 큰 정수로 설정하세요. 날짜 선택 월에.

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>

인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

날짜 형식 지정

날짜 피드백을 다양한 방법으로 표시합니다. 드롭다운 상자에서 날짜 형식을 선택한 다음 입력 상자에서 날짜를 클릭하여 선택하면 선택한 형식으로 날짜가 표시됩니다.

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({
      showOn: "button",
      buttonImage: "images/calendar.gif",
      buttonImageOnly: 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>
  <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>

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

🎜🎜🎜현지화된 달력🎜🎜현지화된 날짜 선택기 달력 언어 및 형식(기본값은 영어/서양입니다. 형식). datepicker에는 아랍어 및 히브리어와 같이 오른쪽에서 왼쪽으로 읽는 언어에 대한 기본 지원이 포함되어 있습니다. 🎜🎜🎜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({
      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>
🎜🎜🎜인스턴스 실행 »🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜

다른 입력 상자 채우기

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({ minDate: -20, maxDate: "+1M +10D" });
  });
  </script>
</head>
<body>
 
<p>日期：<input type="text" id="datepicker"></p>
 
 
</body>
</html>

运行实例 »

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

限制日期范围

通过 minDate 和 maxDate

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() {
    $( "#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>

인스턴스 실행»온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

날짜 범위 제한

minDate 및 maxDate 옵션을 통해 선택 가능한 날짜 범위를 제한하세요. 시작 및 종료 날짜를 실제 날짜(새 날짜(2009, 1 - 1, 26)), 오늘의 숫자 오프셋(-20) 또는 기간 및 단위 문자열('+1M +10D ')로 설정합니다. ). 문자열로 설정하는 경우 일에는 'D', 주에는 'W', 월에는 'M', 연도에는 'Y'를 사용합니다.

Instances

<!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>

인스턴스 실행 »
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

날짜 범위 선택

검색할 날짜 범위를 선택하세요.

Instance

rrreee

인스턴스 실행»
온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

연도의 주 표시

datepicker는 연도의 숫자를 표시할 수 있습니다. 주. 기본 계산은 ISO 8601 정의를 기반으로 합니다. 각 주는 월요일에 시작되고, 매년 첫 번째 주는 해당 연도의 첫 번째 목요일을 포함합니다. 이는 한 해의 일부 날짜가 다른 해의 몇 주에 속할 수 있음을 의미합니다. 🎜🎜🎜Instance🎜🎜rrreee🎜🎜🎜인스턴스 실행 »🎜🎜온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요🎜🎜🎜🎜🎜🎜🎜
←
→