jquery Datepicker

本文详细介绍了如何在网页中引入并配置jQuery UI日期选择器,包括引入必要的JavaScript文件、调整日期选择器的功能特性,以及进行中文汉化以适应不同用户的语言需求。此外,还提供了实例代码展示如何在网页上实现单个和多个日期控件的使用,以及如何设置日期范围限制。通过遵循文中步骤,开发者可以轻松地在项目中集成日期选择功能,并确保其适用于全球用户。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需要引入的文件

<scriptsrc="<c:urlvalue='/javascripts/jquery-ui/ui/jquery.ui.datepicker.js'/>"></script>

<script src="<c:urlvalue='/javascripts/jquery-ui/ui/jquery.ui.core.js'/>"></script>

<scriptsrc="<c:urlvalue='/javascripts/jquery-ui/ui/i18n/jquery.ui.datepicker-zh-CN.js'/>"></script><!--汉化用 -->

<link href="<c:urlvalue='/javascripts/jquery-ui/themes/base/jquery.ui.all.css'/>" rel="stylesheet" />

年和月可选

修改jquery.ui.datepicker.js文件的changeMonth值为true; changeYear值为true

汉化

1. 引入文件<scriptsrc="<c:urlvalue='/javascripts/jquery-ui/ui/i18n/jquery.ui.datepicker-zh-CN.js'/>"></script>

2. 修改jquery.ui.datepicker.js文件的this.regional = ['zh-CN'];

 

3. 修改jquery.ui.datepicker.css

.ui-datepicker select.ui-datepicker-month,

.ui-datepicker select.ui-datepicker-year { width:49%;}

修改成

.ui-datepicker select.ui-datepicker-month { width:65px;}

.ui-datepicker select.ui-datepicker-year { width:65px;}

单个日期控件写法

$("#datepicker").datepicker();

两个日期控件写法

<scripttype="text/javascript">

    $(function(){

      

       vardates = $("#beginDate, #endDate").datepicker({

           onSelect:function(selectedDate ){

              varoption = this.id== "beginDate"? "minDate": "maxDate",instance = $( this).data("datepicker" );

              date= $.datepicker.parseDate(instance.settings.dateFormat|| $.datepicker._defaults.dateFormat,selectedDate,instance.settings);

              dates.not(this ).datepicker("option", option, date);

           }

       });

    });

</script>

设置最小和最大日期

$("#startTime, #expireTime").datepicker({minDate:new Date()});

$("#startTime, #expireTime").datepicker({maxDate:new Date()});


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值