2016-08-02 76 views
1

我正在使用jQuery Datepicker在我的網頁中獲取日期。我需要類似的功能,如下圖所示。我想定製jQuery Datepicker控件,它應該在點擊月份時展開年份選擇器

Click here for similar functionality

<title>Sample Datepicker</title> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script> 
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#datepicker").datepicker({ 
       showButtonPanel: true, 
       changeMonth: false, 
       changeYear: false, 
       showAnim: "blind" 
      }); 
     }); 
    </script> 
    <style type="text/css"> 
     body { 
      font-family: Verdana, Arial, sans-serif; 
      font-size: 12px; 
     } 

     .ui-datepicker-week-end a { 
      color: red !important; 
     } 

     .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current { 
      float: left; 
      margin-left: 35%; 
     } 

     #ui-datepicker-div button.ui-datepicker-close { 
      display: none; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
     <div> 
      <input type="text" id="datepicker"> 
     </div> 
    </form> 
</body> 

我想類似的功能如上述使用jQuery日期選擇器示出的畫面。 如圖所示,通過點擊月份選擇器,它會打開新的彈出窗口,您可以選擇年份選項窗體。 怎麼可能?

+0

這不是提出問題來完成,以便您的工作方式。當你遇到困難時,Plz會嘗試一下並分享你的代碼。那麼SO社區肯定會幫助你。否則,您的問題將被管理員關閉或標記。 –

+0

Plz閱讀本文並關注它: http://stackoverflow.com/help/how-to-ask –

+0

S.K.Venkat,它根本不是任務.. !!我們有非常好的日期選擇器接口,但它只是想知道是否有可能只使用jQuery Datepicker而不更改太多的代碼? – user6648120

回答

0

編號不可能。你可以做的最好的是你已經完成的changeYear: true

enter image description here

但是,如果你使用的是引導,它有插件,它正在積極保持在Github上具有相同的功能。

鏈接:https://github.com/eternicode/bootstrap-datepicker

+0

不幸的是,我們沒有使用bootstrap。無論如何,感謝您的建議.. :) – user6648120

+0

底線是,你*無法實現這與UI datepicker與一些代碼。 – naveen

+0

我發現Addon具有類似的功能,它適用於我。這裏是鏈接https://github.com/silverskater/jQuery-UI-Datepicker-MonthYearPicker-Addon。而且我不需要改變我的代碼...... :) – user6648120

相關問題