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. Cet article vous apporte principalement un exemple de jQuery UI - Datepicker (Datepicker). L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html>
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.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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>
Dates dans d'autres mois
datepicker peut afficher des dates dans d'autres mois, et ces dates peuvent également être définies sur être sélectionnable.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script> $(function() { $( "#datepicker" ).datepicker({ showOtherMonths: true, selectOtherMonths: true }); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html>
Afficher la barre de boutons
Afficher un bouton "Aujourd'hui" pour sélectionner la date du jour via l'option showButtonPanel de valeur booléenne , Affiche un bouton "Terminé" pour fermer le calendrier. 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.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script> $(function() { $( "#datepicker" ).datepicker({ showButtonPanel: true }); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html>
Affichage en ligne
Le sélecteur de date est imbriqué dans la page, plutôt que affiché dans un dans le recouvrir. Appelez simplement .datepicker() sur p au lieu de input.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script> $(function() { $( "#datepicker" ).datepicker(); }); </script> </head> <body> 日期:<p id="datepicker"></p> </body> </html>
Afficher le menu mois et année
Afficher les listes déroulantes pour le mois et l'année au lieu d'afficher titres mois/année statiques pour faciliter la navigation sur de longues périodes. Ajoutez simplement les options booléennes changeMonth et 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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script> $(function() { $( "#datepicker" ).datepicker({ changeMonth: true, changeYear: true }); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html>
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.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script> $(function() { $( "#datepicker" ).datepicker({ numberOfMonths: 3, showButtonPanel: true }); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html>
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é.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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>
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), ou lors d'un clic sur l'icône, ou lors d'un clic sur le focus/l'icône.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script> $(function() { $( "#datepicker" ).datepicker({ showOn: "button", buttonImage: "images/calendar.gif", buttonImageOnly: true }); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html>
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.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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>
Remplissez une autre zone de saisie
Utilisez les options altField et altFormat chaque fois que vous sélectionnez une date, une autre entrée La boîte sera remplie d'une date dans un certain format. Cette fonctionnalité est ensuite traitée par des dates conviviales pour présenter une date conviviale à l'utilisateur.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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>
Limiter la plage de dates
Limiter la plage de dates sélectionnable via 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.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script> $(function() { $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" }); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html>
Sélectionnez une plage de dates
Sélectionnez une plage de dates dans laquelle effectuer la recherche.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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>
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.
<!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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <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" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" > <script> $(function() { $( "#datepicker" ).datepicker({ showWeek: true, firstDay: 1 }); }); </script> </head> <body> <p>日期:<input type="text" id="datepicker"></p> </body> </html>
Le datepicker de jQuery devient chinois : jquery.ui.datepicker-zh-CN.js cherche généralement ce js, j'ai sorti le code de ce js, vous plus besoin de chercher en ligne :
jQuery(function($){ $.datepicker.regional['zh-CN'] = { closeText: '关闭', prevText: '<上月', nextText: '下月>', currentText: '今天', monthNames: ['一月','二月','三月','四月','五月','六月', '七月','八月','九月','十月','十一月','十二月'], monthNamesShort: ['一','二','三','四','五','六', '七','八','九','十','十一','十二'], dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'], dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'], dayNamesMin: ['日','一','二','三','四','五','六'], weekHeader: '周', dateFormat: 'yy-mm-dd', firstDay: 1, isRTL: false, showMonthAfterYear: true, yearSuffix: '年'}; $.datepicker.setDefaults($.datepicker.regional['zh-CN']); });
Recommandations associées :
Comment développer une applet WeChat Explication détaillée du sélecteur de date
Composant de sélecteur d'heure et de date open source React Native
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!