2016-08-02 11 views
1

Ich benutze jQuery Datepicker um Datum auf meiner Webseite abholen. Ich möchte ähnliche Funktionen wie im Bild unten gezeigt.Ich möchte jQuery Datepicker Steuerelement anpassen, sollte es Jahr Picker erweitern, wenn Sie auf Monat klicken

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> 

Ich möchte ähnliche Funktionalität wie abgebildet Bild jQuery Datepicker oben. Wie im Bild gezeigt, öffnet sich durch Klicken auf die Monatsauswahl ein neues Popup und Sie können das Jahr-Optionsformular auswählen. Wie ist es möglich?

+0

Dies ist nicht die Art und Weise, Fragen zu stellen Sie Ihre Aufgaben auf SO zu erreichen. Plz probieren Sie es aus und teilen Sie Ihren Code, wenn Sie an etwas hängen. Dann wird die SO-Community definitiv ihre Hände geben, um Ihnen zu helfen. Andernfalls wird Ihre Frage von Moderatoren geschlossen oder markiert. –

+0

Plz lesen Sie diesen Artikel und folgen Sie ihm: http://StackOverflow.com/Help/how-to-ask –

+0

S.K.Venkat, es ist überhaupt keine Aufgabe .. !! Wir haben eine sehr gute Schnittstelle für die Datumsauswahl, aber es ist nur zu wissen, ist es möglich, nur mit jQuery Datepicker ohne zu viel Code zu ändern? – user6648120

Antwort

0

Nein. Es ist nicht möglich. Das Beste, was Sie tun können, ist changeYear: true, was Sie bereits getan haben.

enter image description here

Aber wenn Sie Bootstrap verwenden, hat es Plugin, das in Github mit der gleichen Funktionalität aktiv gepflegt wird.

-Link: https://github.com/eternicode/bootstrap-datepicker

+0

Leider verwenden wir kein Bootstrap. Anyways, danke für den Vorschlag .. :) – user6648120

+0

Grundlinie ist, können Sie * dies mit UI Datepicker mit ein wenig Code * nicht erreichen. – naveen

+0

Ich fand Addon mit ähnlicher Funktionalität und es funktioniert für mich. Hier ist der Link https://github.com/silverskater/jQuery-UI-Datepicker-MonthYearPicker-Addon. Und ich muss meinen Code nicht ändern ... :) – user6648120