Juqery datepicker 只显示 年和月 不显示 日 和 只选择年份的下拉列表

1.只选择年份的 下拉列表框 .

2.基于Jquery Ui datepicker 日期控件 只显示 年和月 不显示 日.


Html代码 收藏代码
  1. <html>

  2. <head>

  3. <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8">

  4. <title></title>

  5. <linkhref="../css/ui-lightness/jquery-ui-1.9.2.custom.css"rel="stylesheet">

  6. <scriptsrc="../js/jquery-1.8.3.js"></script>

  7. <scriptsrc="../js/jquery-ui-1.9.2.custom.js"></script>

  8. </head>

  9. <scriptlanguage="javascript">

  10. //year

  11. $(function() {

  12. $("#year").attr("readonly", "true");

  13. var tempYear = new Date().getUTCFullYear();

  14. var obj = document.getElementById('year');

  15. for (var i=tempYear-10;i<=tempYear;i++){

  16. if(i>1900){

  17. obj.options.add(new Option(i,i));

  18. }

  19. }

  20. for (var i=tempYear+1;i<=tempYear+10;i++){

  21. if(i<9999){

  22. obj.options.add(new Option(i,i));

  23. }

  24. }

  25. obj.options[10].selected=1 ;

  26. $("#year").change(function(){

  27. tempYear=parseInt($("#year").val());

  28. obj.options.length=0;

  29. for (var i=tempYear-10;i<=tempYear;i++){

  30. if(i>1900){

  31. obj.options.add(new Option(i,i));

  32. }

  33. }

  34. for (var i=tempYear+1;i<=tempYear+10;i++){

  35. if(i<9999){

  36. obj.options.add(new Option(i,i));

  37. }

  38. }

  39. obj.options[10].selected=1 ;

  40. });

  41. });

  42. // monthYear

  43. $(function() {

  44. $("#monthYear").attr("readonly", "true");

  45. var month ;

  46. var year ;

  47. $('#monthYear').datepicker({

  48. changeMonth : true,

  49. changeYear : true,

  50. dateFormat : 'mm/yy',

  51. showButtonPanel: true,

  52. onClose: function(dateText, inst) {

  53. month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();

  54. year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();

  55. }

  56. });

  57. //“Done”按钮的click事件

  58. $(".ui-datepicker-close").live("click", function ()

  59. {

  60. $('#monthYear').datepicker("setDate", new Date(year, month, 1));

  61. });

  62. //点击互动的清除输入框

  63. $("#monthYear").toggle(function() {

  64. $(this).val("");

  65. }, function() {

  66. $(this).val("");

  67. });

  68. });

  69. </script>

  70. <!-- 隐藏控件的天数选择的样式 (重要)-->

  71. <style type="text/css">

  72. .ui-datepicker-calendar {

  73. display: none;

  74. }

  75. </style>

  76. <body>

  77. <br/>

  78. Year : <selectid="year"></select>

  79. <br/>

  80. <br/>

  81. Month Year : <inputid="monthYear"/>

  82. </body>

  83. </html>


你可能感兴趣的:(Datepicker)