jquery ui datepicker to use

2010-03-05  来源:本站原创  分类:Web  人气:670 

In the Web development, always encountered require the user to enter a date situation. Usually provide a text type of input for users to enter a date. However, this way, developers must validate user input the date, to determine its legitimacy. In addition, the user enter a date is a bad mood thing, if the user can select a date, these two issues have been resolved. It sounds very good. In fact, many developers are doing so.

We can use javascript to write a date of your choice control, however, wanted to write a very good, very beautiful but it takes a lot of time and effort. jQuery has a UI plug-in: datepicher, can help us to achieve this functionality, and interface, and very pretty. The following school learning how to use it.

datepicher plug-in is a plug-in jQuery UI, which provides a date pop-up window (or directly displayed on the page) for users to select a date.

datepicher the use of plug-ins is very simple syntax is as follows:

Javascript code

  1. $ ( "# regDate"). datepicher (optional);

One optional is an object, the object's attributes and the meaning of each one can be found in the official documentation: http://jqueryui.com/demos/datepicker/. At this point, only to introduce some common attributes.

1, datepicher the easiest to use

Javascript code

  1. $ ( "# regDate"). datepicher ();

Where, regDate the date the page of the ID attribute value input box.

In this sentence, in the date input box gets focus, they will pop up a date selection window. However, this is the date when the selection window there are many convenient places, such as: only one month forward or backward a month, there is no Close button and so on.

2, configuration datepicher

By giving datepicher set some property values can change the default display. Such as:

Javascript code

  1. $ ( "# regDate"). datepicker (
  2. (
  3. showMonthAfterYear: true, / / month in the years after the show
  4. changeMonth: true, / / allowed to select a month
  5. changeYear: true, / / allowed to choose the year
  6. dateFormat: 'yy-mm-dd', / / set the date format
  7. closeText: 'Close', / / only showButtonPanel: true will be displayed
  8. duration: 'fast',
  9. showAnim: 'fadeIn',
  10. showOn: 'button', / / in the input box displayed next to the button is triggered, the default is: focus. Also can be set to both
  11. buttonImage: 'images / commons / calendar.gif', / / button icons
  12. buttonImageOnly: true, / / not to icons displayed on the button, that is, remove the button
  13. buttonText: 'Select date',
  14. showButtonPanel: true,
  15. showOtherMonths: true,
  16. / / appendText: '(yyyy-mm-dd)',
  17. ));

The date of choice this time is very convenient. Are free to choose the year and month.

3, increasing the Clear button, and the dates of function (enhanced version datepicher1.7.2)

datepicher1.7.2 version does not provide clear button, which makes a little disappointed. (As if the previous version available). No Clear button is very convenient, especially the focus on the input box to obtain the date selection window pops up all the more true, because when you want to clear the input box date cumbersome. In this recommendation to provide an enhanced version of a User datepicher1.7.2. The enhanced version of datepicher1.7.2 not only met the Clear button functionality, but also increased the size of a date comparison validation, such as: a date only after the other. Can access the Web site see: http://www.cnblogs.com/yasin/archive/2009/07/10/1520736.html. At this time the use of datepicher already quite perfect:

Javascript code

  1. $ (Function ()
  2. (
  3. $ ( "# effDate"). datepicker (
  4. (
  5. showMonthAfterYear: true, / / month in the years after the show
  6. changeMonth: true, / / allowed to select a month
  7. changeYear: true, / / allowed to choose the year
  8. dateFormat: 'yy-mm-dd', / / set the date format
  9. showClearButton: true,
  10. / / clearText: 'Clear',
  11. closeText: 'Close', / / only showButtonPanel: true will be displayed
  12. duration: 'fast',
  13. showAnim: 'fadeIn',
  14. showOn: 'button',
  15. buttonImage: 'images / commons / calendar.gif',
  16. buttonImageOnly: true,
  17. buttonText: 'Select date',
  18. showButtonPanel: true,
  19. showOtherMonths: true,
  20. / / appendText: '(yyyy-mm-dd)',
  21. onSelect: function (dateText, inst) / / so that the end time is greater than the start time
  22. (
  23. / **
  24. * The following lines be included in IE in the problems.
  25. * $ ( '# ExpDate'). Datepicker ( 'option', 'minDate', new Date (dateText.replace (/ - / g ,',')));
  26. * When at the end (expiration time) choice, there is no annual meeting, and the controls will fail. Through the debugger and found new Date (dateText.replace (/ - / g ,','))
  27. * Returned result is NaN. Description Date object can not be so constructed (but Firefox can)
  28. * /
  29. var arys = new Array ();
  30. var arys = dateText.split ('-');
  31. $ ( '# expDate'). datepicker ( 'option', 'minDate', new Date (arys [0], arys [1] -1, arys [2]));
  32. )
  33. ));
  34. $ ( "# expDate"). datepicker (
  35. (
  36. showMonthAfterYear: true, / / month in the years after the show
  37. changeMonth: true, / / allowed to select a month
  38. changeYear: true, / / allowed to choose the year
  39. dateFormat: 'yy-mm-dd', / / set the date format
  40. showClearButton: true, / / custom methods (1.7.2 No Clear button)
  41. / / clearText: 'Clear', / / custom text in the document where the definition of (js middle)
  42. closeText: 'Close', / / only showButtonPanel: true will be displayed
  43. duration: 'fast',
  44. showAnim: 'fadeIn',
  45. showOn: 'button', / / in the input box displayed next to the button is triggered, the default is: focus. Also can be set to both
  46. buttonImage: 'images / commons / calendar.gif', / / button icons
  47. buttonImageOnly: true, / / not to icons displayed on the button, that is, remove the button
  48. buttonText: 'Select date',
  49. showButtonPanel: true,
  50. showOtherMonths: true,
  51. / / appendText: '(yyyy-mm-dd)',
  52. onSelect: function (dateText, inst)
  53. (
  54. var arys = new Array ();
  55. var arys = dateText.split ('-');
  56. $ ( '# effDate'). datepicker ( 'option', 'maxDate', new Date (arys [0], arys [1] -1, arys [2]));
  57. )
  58. ));
  59. ));

4, internationalization

datepicher offers an international function. Just ui.datepicker-zh-CN.js page can be imported. (Or import jquery-ui-i18n.js, which contains a lot of the language) Note that if you want to use an enhanced version of the above-mentioned datepicher1.7.2, you need to download the internationalization of documents provided by the author. In addition, if using a tool like Eclipse code, pay attention to the internationalization of the file to open with the eclipse look likely to appear garbled. Just take the file encoding changed to utf-8, and then use the other editing tools, such as international editplus open the file, copy, paste, cover the eclipse of the, save on OK.

5, the international translated into English may encounter display problems

At the same time to enable the use of international changeYear and changeMonth, the two select is displayed as two lines, it does not look good. Looking for a long time and found that official jquery-ui-1.7.2.custom.css, it should make the following few modifications:
. ui-datepicker. ui-datepicker-title select (float: left; font-size: 1em; margin: 1px 0;)
. ui-datepicker select.ui-datepicker-month-year (width: 100%;)
. ui-datepicker select.ui-datepicker-month,
. ui-datepicker select.ui-datepicker-year (width: 49%;)
. ui-datepicker. ui-datepicker-title select.ui-datepicker-year (float: right;)
Should read as follows:
. ui-datepicker. ui-datepicker-title select (font-size: 1em; margin: 1px 0;)
. ui-datepicker select.ui-datepicker-month-year (width: 100%;)
. ui-datepicker select.ui-datepicker-month,
. ui-datepicker select.ui-datepicker-year (width: 47%;)
. ui-datepicker. ui-datepicker-title select.ui-datepicker-year (float: left;)
On the OK of the

6, skin

jQuery UI a lot of predefined skin, download, simply on the page to introduce the corresponding skin jquery-ui-1.7.2.custom.css skin can be achieved. If you give users with skin functions, you can control by js to achieve skin.

Summary:

As can be seen, datepicher is a good use of the plug-in, than they will certainly be easy to use a lot of writing, recommend you to use.

In addition, in use, you can define a file that contains the plug-in use, configured. Where the future need to use to introduce the document at the same time to pass the current need to use the date to choose the control id attribute, so that we can target only once.

相关文章
  • jquery ui datepicker and dialog with the use of display problems 2010-06-25

    The jquery ui datepicker and dialog when used together, as datepicker's z-index than the dialog of the small, datepicker will not show up covered by dialog. The solution is to increase the datepicker's z-index. Code: $("#birthday").datepicker({d

  • jQuery日期选择插件 jQuery UI Datepicker 2009-10-31

    jQuery UI Datepicker 网站 : http://api.jqueryui.com/datepicker/ jQuery UI Datepicker 是一个 jQuery 的日期选择插件.如下图所示: 授权协议: 未知 开发语言: JavaScript 操作系统: 跨平台

  • jQuery UI Datepicker length为空或不是对象错误的解决方法 2014-07-05

    jQuery UI Datepicker length为空或不是对象错误的解决方法,需要的朋友可以参考下. 我们开发ASP.NET站点时,如果将jQuery UI Datepicker与ASP.NET的验证控件(如:RequiredFieldValidator)组合使用: <asp:TextBox ID="txtDate" runat="server"></asp:TextBox> <asp:RequiredFieldValidator

  • jquery ui datepicker to use 2010-03-05

    In the Web development, always encountered require the user to enter a date situation. Usually provide a text type of input for users to enter a date. However, this way, developers must validate user input the date, to determine its legitimacy. In ad

  • jquery ui datepicker to use and download address 2010-07-21

    Several first heap Address: JQuery Official Address: http://jquery.com/ You can download the JQuery latest version of the core framework, including uncompressed and compressed, not compressed, then a 98K, Softcover compressed version of only 15K Date

  • JQuery UI DatePicker中z-index默认为1的解决办法 2013-10-11

    用到JQuery UI的DatePicker时,发现如果页面有其他z-index比较大的控件,datepicker就会被遮住而不能操作. 在网上也没能找到有效的解决办法,下面我提供一种看似投机的办法: $("#txtFillInDate").datepicker({ monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'], dayNamesMin: ['日', '一',

  • [备忘]jQuery UI Datepicker的时间选择插件 - jQuery Timepi... 2011-12-27

    太遗憾了,jQuery UI官方的日期控件Datepicker中居然没有提供时间(时分秒)的选择,还好网上有人写了针对jQuery UI Datepciker的插件--jQuery Timepicker Addon,它依赖于jQuery UI中的datepicker和slider组件! 它的使用非常简单,官网有非常详细的demo示例! 官网地址:http://trentrichardson.com/examples/timepicker/ 我在项目中使用它的效果图如下:

  • 第一好用的时间 日期插件(Adding a Timepicker to jQuery UI Datepicker) 2014-10-14

    最近在一个项目中用到了My97DatePicker,国人写的一个挺不错的时间选择插件,简单易用,但是在调试静态时却发现此插件必须产生一个iframe标签指向其主页,试了很多种方法都不能去除,一旦删除插件就不能用了...虽说作者开发辛苦,我本拿来就用,不应埋怨这点广告费,但是考虑到部分项目对于安全性较高,像这样明目张胆的跨域谁知道是否会有风险脚本注入到你的后台. 所以这几天就专门留心各种时间选择插件,令人颇为失望的是居然没有几款比较好用的 可以同时选择日期与时间并且支持时间格式化输出的插件.不过还

  • rails 2.3.5 + jquery ui datepicker 不能显示中文 2012-05-09

    应该加的都加了: <%= stylesheet_link_tag 'bootstrap' %> <%= stylesheet_link_tag 'bootstrap-responsive' %> <%= stylesheet_link_tag 'newadmin' %> <%= stylesheet_link_tag 'jquery-ui' %> <%= stylesheet_link_tag 'jquery.datepick' %> <%

  • jQuery UI datepicker 日期控件出现问号的解决方式 2012-09-20

    jQuery-ui的datepicker做得很不错,在项目中经常用到,但对其老是在界面上出现 "?" 感觉很不爽.出现的位置在顶部年和月之间,还有空的日期单元格. 这个问题困扰了我很长时间,一直想解决,但又没有时间.今天终于找到了问题的答案! 之前认为是页面或库的编码问题,但反复修改后没有解决问题,于是肯定了datepicker本身的问题.查看源代码发现了问题所在,不过此问题已经在 jquery-ui-1.8.21.custom.min.js 中得到了修正.但在 jquery-ui-1

  • EXPECTING JQUERY UI MANUAL 2010-08-06

    Recently prepared to make one-sided on the jquery ui (datepicker, select ....) out of the Chinese user manual. Look in the. . . . .

  • 使用jQuery UI和jQuery插件构建更好的Web应用程序 2013-11-02

    简介 如果您是一个传统桌面应用程序开发人员,并且正在转向开发 Web 应用程序,在学习 HTML 和 CSS 方面您可能不会遇到什么困难,但为应用程序设计一个漂亮的外观可能会是一个挑战.jQuery UI 和各种 jQuery 插件对于快速将 Web 应用程序组合在一起有极大的帮助,只需在 GUI 设计上花费少量的时间. JavaScript 和 jQuery 如果您希望页面有任何形式的动态内容或者交互,那么 JavaScript 一直是构建 Web 页面的一个固有部分.如果没有 JavaScr

  • jQuery ui the Datepicker (date selector) 2010-11-07

    Originally struts2 can be fitted with struts-jquery plugin package, the plugin package is included with many of the UI (including Datepicker), there are some ajax framework features, but struts-jquery has a serious flaw, that is often imported a numb

  • jQuery日历插件 UI Datepicker 2008-09-19

    UI Datepicker 网站 : http://jquery.com/ THIS PROJECT IS NOW IN THE OFFICAL jQuery UI LIBRARY AND LINKS MAY NOT BE ACCURATE Easily change the look and feel with CSS Full settings API lets you customize the functionality how you want. Everything you woul

  • jquery UI 1.72 之datepicker 2014-03-13

    一步一步学jquery UI 1.72 之datepicker,中间都写了注释方便大家学习. <script type="text/javascript"> $(function() { var options = { changeMonth: true, //显示月份下拉框 changeYear: true, //显示年份下拉框 firstDay: 0, //第一天的索引(星期天放前面)(星期天到星期六对应的索引为:0~6) showOtherMonths: true,

  • jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate) 2015-05-04

    这篇文章主要介绍了jQuery ui 利用 datepicker插件实现开始日期(minDate)和结束日期(maxDate),需要的朋友可以参考下 使用jQuery ui首先需要引入jQuery类库,jQuery ui js脚本和jQuery ui css样式表.代码示例如下: <script src="js/jquery-1.7.1.js"></script> <script src="js/jquery-ui-1.8.18.custom.m

  • 2010.03.03 (2) - jquery ui calendar functions 2008-09-07

    2010.03.03 (2) - jquery ui calendar functions Is still the one thing I would like to get hold of the back to add the date of the calendar control input, so a little more friendly this time, we need a jquery ui //$('#text4').datepicker({dateFormat: 'y

  • 推荐10款最热门jQuery UI框架 原创 2014-06-02

    在进行Web开发时,并非所有的库都适合你的项目,但你仍需要收藏一些Web UI设计相关的库或框架,以在你需要的时候,加快你的开发效率.本文为你推荐10款非常优秀的基于JQuery的Web UI设计框架 1.国产jQuery UI框架 (jUI) DWZ DWZ富客户端框架(jQuery RIA framework), 是中国人自己开发的基于jQuery实现的Ajax RIA开源框架. 设计目标是简单实用,快速开发,降低ajax开发成本. 欢迎大家提出建议,我们将在下一版本中进一步调整和完善功能.

  • jQuery ui 1.7更新小结 2014-10-16

    因为要给新员工进行培训jQuery.UI方面的内容,我之前学习的都是jquery.ui-1.6b的,现在的版本升级到jquery-ui-1.7.1,除了样式上有很大调整以外,API也有了很大的变化. 1. 每个ui插件现在都有自己单独的css文件,但是要根据情况与ui.theme.css ui.core.css结合使用,否则有些效果还是显示不出来的. eg. datepicker就必须同时引用上述两个css文件:accordion 只须引入ui.theme.css即可.这个我会把每个插件独立的d

  • Jquery UI Demos & Documents 2009-06-17

    Jquery UI Demos & Documents