`
noyce520
  • 浏览: 853 次
社区版块
存档分类
最新评论

中国化的日期控件

阅读更多

   用juery ui 实现的日期控件。

1.页面源码

 

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + "://"
   + request.getServerName() + ":" + request.getServerPort()
   + path + "/";
%>

<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>日期选择</title>

<script type="text/javascript" src="jquerylib/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
 src="./jquerylib/js/jquery-ui-1.8.22.custom.min.js"></script>
<link type="text/css"
 href="jquerylib/css/cupertino/jquery-ui-1.8.22.custom.css"
 rel="stylesheet" />
<!-- date picker 本地化 -->
<script type='text/javascript'
 src='jquerylib/development-bundle/ui/i18n/jquery.ui.datepicker-zh-CN.js'></script>
<link type="text/css" href="jquerylib/css/mydatepicker.css"
 rel="stylesheet" />
<script type="text/javascript">
 $(function() {
  $("#sponsorDate").datepicker({
   changeMonth : true,
   changeYear : true,
   showOn : 'button',
   buttonImage : 'jquerylib/css/cupertino/images/clock.gif',
   buttonImageOnly : true,
   minDate : '-10y',
   maxDate : '+10y'
  });
  $('#sponsorDate').datepicker('option', {
   dateFormat : "yy-mm-dd"
  });
  $("#sponsorDate").datepicker("option", "showAnim", "slideDown");
 });
</script>
</head>

<body>
 <div align="center">
  <input name="sponsorDate" type="text" id="sponsorDate"
   value="SponsorDate" size="25" maxlength="25">
 </div>
</body>
</html>

 

2. 自己修改的日期控件css文件mydatepicker.css

.ui-datepicker .ui-datepicker-title select {
 font-size: 1em;
 margin: 1px 1;
}

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

.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year
 {
 width: 30%;
}

.ui-datepicker .ui-datepicker-title select.ui-datepicker-year {
 float: left;
}

/* 控制字体大小  */
.ui-datepicker-div,.ui-datepicker-inline,#ui-datepicker-div {
 font-size: 0.7em;
}
3.效果图见附件

  • 大小: 15.4 KB
  • 大小: 1.7 KB
分享到:
评论

相关推荐

    PB日历控件

    2. **农历支持**:这个特定的PB日历控件还支持农历显示,这意味着它不仅提供公历日期,还可以展示中国传统的农历日期,这对于需要处理农历信息的软件,如财务或农业应用,尤其有用。 3. **用户界面定制**:开发者...

    日历控件带农历

    "日历控件带农历"是指一个特殊设计的日历组件,它不仅显示公历日期,还支持农历日期的查看和选择,这对于中国的用户群体尤其有用,因为中国传统的节日和一些重要的个人事件通常与农历相关。 PowerBuilder是一款强大...

    PB9.0 日期控件集合

    这个农历日历控件允许用户不仅选择公历日期,还可以查看和选择农历日期,对于开发具有农历功能的应用程序非常有用。它可能包含了转换公历与农历日期的功能,以及显示中国传统节气等附加信息。 2. 日历控件(修改): ...

    多选的国产日历控件

    此外,这款日历控件还支持SimpleDateFormat格式,这是Java中的一种日期时间格式化工具,允许开发者自定义日期的显示样式。例如,用户可以设定日期格式为"yyyy-MM-dd","MM/dd/yyyy"等,以满足不同的展示需求。 控件...

    可以加备注的日历控件

    在IT行业中,日历控件是一种常见的用户界面元素,它允许用户查看、选择或操作日期。在给定的“可以加备注的日历控件”中,我们关注的是一个专为DELPHI编程环境设计的日历组件,它具有独特的功能,如添加备注、注释,...

    两个vs.net2005可用的日历控件

    描述中提到的“在VS.NET2005中可以引用的日历控件”,意味着这些控件是为VS.NET2005设计的,可以直接在项目中添加引用,无需额外的编程工作就能实现日期选择功能。这通常通过在工具箱中添加控件,然后将其拖放到窗体...

    Java版日期控件

    8. **国际化支持**:虽然没有明确提及,一个完善的日期控件通常会考虑多语言环境,包括日期格式和农历显示的本地化。如果需要,开发者可以检查控件是否支持i18n,并根据需要添加或修改语言资源。 9. **测试和调试**...

    VB日期控件_农历控件

    VB日期控件通常指的是DatePicker或DateTimePicker,它允许用户从日历小部件中选择一个日期,而农历控件则提供了与公历对应的农历日期显示。 ### VB日期控件 - DatePicker / DateTimePicker VB中的日期控件主要指...

    N多日历控件 日历控件大全

    5. **本地化支持**:考虑到全球用户的使用,N多日历控件应支持多种语言和日期格式,包括中国的农历显示。 6. **响应式设计**:为了适应不同设备和屏幕尺寸,日历控件需要具备良好的响应性。在手机、平板和电脑上都...

    一款非常好用的js日历控件

    总结来说,js日历控件如My97DatePickerBeta是网页开发中不可或缺的工具,它们提高了用户与日期相关的交互体验。理解并熟练运用这类控件,对于提升网站或应用的功能性和用户体验具有重要意义。通过深入学习和实践,...

    实用梅花雨日历控件实例

    "实用梅花雨日历控件实例"提供了一个美观的日历组件,适用于网页应用程序,帮助用户更直观地选择日期,提升用户体验。这个控件是用JavaScript编程语言实现的,其中可能包含了CSS样式和HTML结构,使得日历展示既功能...

    适合ASP.NET java 的js日历控件

    My97DatePicker是一款由中国开发者设计的高性能、高兼容性的JavaScript日历控件。它以其精美的界面、强大的功能和良好的用户体验而广受好评。该控件支持包括IE8在内的多个浏览器版本,确保了广泛的用户覆盖。 2. *...

    农历日历控件

    农历日历控件是一种在计算机程序中用于展示中国农历以及二十四节气的用户界面组件。在编程领域,这种控件通常被开发人员用于创建具有中国特色的日历应用或系统,以便用户能够方便地查看和管理农历日期相关的事件和...

    各种JS日期控件 还带阴历哦

    1. **JS日期控件**:JavaScript提供了内置的Date对象,可以用于创建、操作和格式化日期。开发者通常会基于这个对象构建更复杂的日期选择器,以提供更友好的用户体验。这些控件可能包括日历显示、时间选择、日期范围...

    仿淘宝日历控件

    淘宝,作为中国最大的电商平台,其网站上的日历控件设计精良,用户体验良好,因此“仿淘宝日历控件”成为了许多开发者学习和模仿的对象。下面将详细解析这个主题,介绍相关知识点。 1. **日历控件的基本概念**: ...

    html+js+css带阴历的日历控件

    3. **模块化**:若项目采用模块化开发,可以将日历控件封装为一个独立的组件,便于复用和管理。 五、调试与优化 1. **调试**:使用开发者工具检查CSS样式应用情况,排查JavaScript错误,确保日历控件正常工作。 2. ...

    多个PB日历控件.rar

    5. **国际化与本地化**:由于日历控件可能会显示日期和时间格式,所以支持多种语言和文化设置是必要的。PowerBuilder提供了本地化工具,帮助开发者创建多语言应用。 6. **扩展与自定义**:PowerBuilder允许开发者...

    日历控件(实现了农历和公历的选择).rar

    在IT领域,日历控件是用户界面设计中常见的组件,尤其在网页和应用程序中用于日期选择。这个压缩包文件“日历控件(实现了农历和公历的选择).rar”提供了一个支持农历和公历切换的日历选择器,兼容IE6、IE7以及Fire...

    开发用到的日历控件

    淘宝旅行可能基于YUI开发了他们自己的日期日历控件,适用于旅行预订等场景,能够处理复杂的日期选择逻辑,如起始和结束日期的关联、日期范围限制等。这个控件可能具有良好的用户体验和高度的可定制性。 在实际开发...

    jquery日历控件优化

    在中国,我们需要的日历控件不仅要有公历日期,还应包含农历日期。因此,我们需要修改或扩展jQuery日历控件的源代码,添加农历转换的功能。这可能涉及到计算农历与公历之间的转换算法,确保显示的日期准确无误。 ...

Global site tag (gtag.js) - Google Analytics