Sélecteur de date
Sélectionnez une date dans le calendrier contextuel ou en ligne.
Pour plus de détails sur le widget datepicker, veuillez consulter la documentation de l'API Datepicker Widget.
Fonction par défaut
Datepicker est lié à un champ de saisie de formulaire standard. Déplacez le focus sur l’entrée (cliquez ou utilisez la touche de tabulation) pour ouvrir un calendrier interactif dans une petite superposition. Sélectionnez une date, cliquez n'importe où sur la page (la zone de saisie perd le focus) ou appuyez sur la touche Échap pour fermer. Si une date est sélectionnée, le feedback est affiché comme valeur d'entrée.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Animations
Utilisez différentes animations lors de l'ouverture ou de la fermeture du sélecteur de date. Sélectionnez une animation dans la liste déroulante et cliquez dans la zone de saisie pour voir son effet. Vous pouvez utiliser l'une des trois animations standard ou utiliser l'un des effets de l'interface utilisateur.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Dates dans d'autres mois
Le sélecteur de date peut afficher des dates dans d'autres mois, et ces dates peuvent également être définies pour être sélectionnables.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Afficher la barre de boutons
Passez l'option booléenne showButtonPanel pour afficher un bouton "Aujourd'hui" pour sélectionner la date du jour et un "Terminé" bouton de fermeture du calendrier "Bouton. Par défaut, chaque bouton est activé lorsque la barre de boutons est affichée, mais les boutons peuvent être désactivés via des options supplémentaires. Le texte du bouton est personnalisable.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Affichage en ligne
Le sélecteur de date est affiché imbriqué dans la page, plutôt que affiché en superposition. Appelez simplement .datepicker() sur le div au lieu de l'entrée.
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>
日期：<div id="datepicker"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Afficher le mois Menu & année
Affiche des listes déroulantes pour le mois et l'année au lieu des en-têtes mois/année statiques, ce qui facilite la navigation sur de longues périodes. Ajoutez simplement les options booléennes changeMonth et changeYear.
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({
changeMonth: true,
changeYear: true
});
});
</script>
</head>
<body>
<p>日期：<input type="text" id="datepicker"></p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Afficher plusieurs mois
Définissez l'option numberOfMonths sur un entier 2, ou un entier supérieur à 2, pour afficher plusieurs mois dans un sélecteur de date.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Formater les dates
Afficher les commentaires sur la date de différentes manières. Sélectionnez un format de date dans la liste déroulante, puis cliquez et sélectionnez une date dans la zone de saisie pour voir la date s'afficher dans le format sélectionné.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Déclencheur d'icône
Cliquez sur l'icône à côté de la zone de saisie pour afficher le sélecteur de date. Définit le sélecteur de date pour qu'il s'ouvre lors du focus (comportement par défaut), lors d'un clic sur l'icône ou lors d'un clic sur le focus/l'icône.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Calendrier localisé
Langue et format du calendrier du sélecteur de date localisé (la valeur par défaut est le format anglais/occidental). datepicker inclut la prise en charge intégrée des langues qui se lisent de droite à gauche, telles que l'arabe et l'hébreu.
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>Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Remplissez une autre zone de saisie
À l'aide des options altField et altFormat, chaque fois qu'une date est sélectionnée, une autre zone de saisie sera remplie. Une date dans un certain format. Cette fonctionnalité est ensuite traitée par des dates conviviales pour présenter une date conviviale à l'utilisateur.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Limiter la plage de dates
Limiter la plage de dates sélectionnable avec les options minDate et maxDate. Définissez les dates de début et de fin sur des dates réelles (new Date(2009, 1 - 1, 26)), ou sur un décalage numérique par rapport à aujourd'hui (-20), ou sur une chaîne de période et d'unité (« +1M +10D » ). S'il est défini sur une chaîne, utilisez « D » pour le jour, « W » pour la semaine, « M » pour le mois et « Y » pour l'année.
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({ minDate: -20, maxDate: "+1M +10D" });
});
</script>
</head>
<body>
<p>日期：<input type="text" id="datepicker"></p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Sélectionnez une plage de dates
Sélectionnez une plage de dates dans laquelle effectuer la recherche.
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>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Afficher la semaine de l'année
datepicker peut afficher la semaine de l'année. Le calcul par défaut est basé sur la définition ISO 8601 : chaque semaine commence le lundi et la première semaine de chaque année contient le premier jeudi de cette année. Cela signifie que certains jours d’une année peuvent appartenir à des semaines d’une autre année.
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({
showWeek: true,
firstDay: 1
});
});
</script>
</head>
<body>
<p>日期：<input type="text" id="datepicker"></p>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
