歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
Linux教程網 >> Linux編程 >> Linux編程 >> jQuery日期選擇器插件date-input

jQuery日期選擇器插件date-input

日期:2017/3/1 10:47:38   编辑:Linux編程

官網:http://jonathanleighton.com/projects/date-input/

下載:

http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js

http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js

http://github.com/jonleighton/date_input/raw/master/date_input.css

中文支持:

  1. jQuery.extend(DateInput.DEFAULT_OPTS, { month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"], short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"], short_day_names: ["一", "二", "三", "四", "五", "六", "日"]});

說明:默認是日期格式很不好,需要修改。

全部代碼:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>日歷</title>
  6. <script type="text/javascript" src="jquery-1.3.2.js"></script>
  7. <script type="text/javascript" src="jquery.date_input.js"></script>
  8. <link rel="stylesheet" href="date_input.css" type="text/css">
  9. <script>
  10. jQuery.extend(DateInput.DEFAULT_OPTS, {
  11. month_names: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
  12. short_month_names: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十", "十一", "十二"],
  13. short_day_names: ["一", "二", "三", "四", "五", "六", "日"],
  14. dateToString: function(date) {
  15. var month = (date.getMonth() + 1).toString();
  16. var dom = date.getDate().toString();
  17. if (month.length == 1) month = "0" + month;
  18. if (dom.length == 1) dom = "0" + dom;
  19. return date.getFullYear() + "-" + month + "-" + dom;
  20. }
  21. });
  22. $(function() {
  23. $(".biuuu1").date_input();
  24. $(".biuuu2").date_input();
  25. });
  26. </script>
  27. </head>
  28. <body>
  29. <input type="text" class="biuuu1" name="date"/>
  30. <input type="text" class="biuuu2" name="date"/>
  31. </body>
  32. </html>

Copyright © Linux教程網 All Rights Reserved