Maison >interface Web >js tutoriel >Comment utiliser le contrôle de date jquery
Comment utiliser le contrôle de date jquery
- (*-*)浩original
- 2019-06-01 16:12:253166parcourir
JQuery est un très excellent framework de script. Ses contrôles riches sont également très simples à utiliser et la configuration est très flexible. Vous trouverez ci-dessous un exemple d’utilisation du datapicker du plug-in de date.
Inutile de dire que vous devez télécharger le fichier principal de jQuery. Datepicker est un plug-in léger. Vous n'avez besoin que de la version minimale de jQuery. Accédez ensuite au site officiel pour le télécharger. le package compressé jquery-ui (vous pouvez choisir votre thème préféré), qui inclut la prise en charge de datepicker. Bien sûr, vous pouvez également télécharger datepicker depuis le site officiel, notamment ui.core.js et ui.datepicker.js.
Cours recommandé : Tutoriel jQuery.
jquery.ui.datepicker-zh-CN.js, le contenu est le suivant :
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']);
});
Instance :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<TITLE>日期控件datepicker</TITLE>
<!-- 引入 jQuery -->
<mce:script src="js/jquery.1.4.2.js" mce_src="js/jquery.1.4.2.js" type="text/javascript"></mce:script>
<!--添加datepicker支持-->
<mce:script src="js/jquery.ui.core.js" mce_src="js/jquery.ui.core.js" type="text/javascript"></mce:script>
<mce:script src="js/jquery.ui.datepicker.js" mce_src="js/jquery.ui.datepicker.js" type="text/javascript"></mce:script>
<!-- 或者引入jquery ui包，其中也包含对datepicker的支持
<mce:script src="js/jquery-ui-1.7.3.custom.min.js" mce_src="js/jquery-ui-1.7.3.custom.min.js" type="text/javascript"></mce:script>
-->
<!--引入样式css-->
<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.7.3.custom.css" mce_href="css/jquery-ui-1.7.3.custom.css" />
<!-- 添加中文支持-->
<mce:script src="js/jquery.ui.datepicker-zh-CN.js" mce_src="js/jquery.ui.datepicker-zh-CN.js" type="text/javascript"></mce:script>
<mce:script type="text/javascript"><!--
//等待dom元素加载完毕.
$(function(){
$("#selectDate").datepicker({//添加日期选择功能
numberOfMonths:1,//显示几个月
showButtonPanel:true,//是否显示按钮面板
dateFormat: 'yy-mm-dd',//日期格式
clearText:"清除",//清除日期的按钮名称
closeText:"关闭",//关闭选择框的按钮名称
yearSuffix: '年', //年的后缀
showMonthAfterYear:true,//是否把月放在年的后面
defaultDate:'2011-03-10',//默认日期
minDate:'2011-03-05',//最小日期
maxDate:'2011-03-20',//最大日期
//monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
//dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
//dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
//dayNamesMin: ['日','一','二','三','四','五','六'],
onSelect: function(selectedDate) {//选择日期后执行的操作
alert(selectedDate);
}
});
});
// --></mce:script>
</HEAD>
<BODY>
<input type="text" id="selectDate" readonly="readonly"/>
</BODY>
</HTML>
Remarque : Étant donné que jquery datepicker n'est pas la dernière version, le téléchargement du fichier css dans la nouvelle version jquery-ui-1.8.13 empêchera l'affichage du contrôle de date, donc l'interface utilisateur de 1.7.3 est utilisée ici . Le moyen le plus simple consiste à utiliser jquery-ui pour compresser js.
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!