title: How to change JQuery Datepicker Months and Years display to Dropdown?
body: <p>I have just started working on a Calendar Project in <code>JQuery</code> where I can choose appointments in an event, and <strong>I would like to change the current years and months choosing menu from the current form to a dropdown choosing menu</strong> because I want to make it easier to switch between dates so that I can find the desired appointments.</p>
  <p>example of what would I like to achieve:
  <a href="https://i.stack.imgur.com/TQiDN.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TQiDN.jpg" alt="enter image description here" /></a></p>
  <p>My question is how could I change it?</p>
  <pre><code>body {
    background: #20262E;
    padding: 20px;
    font-family: Helvetica;
  }
  
  
  .popover
  {
    left: 5% !important;
    top: 120% !important;
  }
  
  
  .btn 
  {
      margin: 1%;
  }
  
  
  #banner-message {
    background: #fff;
    border-radius: 4px;
    padding: 20px;
    font-size: 25px;
    text-align: center;
    transition: all 0.2s;
    margin: 0 auto;
    width: 300px;
  }
  
  button {
    background: #0084ff;
    border: none;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
  }
  
  #banner-message.alt {
    background: #0084ff;
    color: #fff;
    margin-top: 40px;
    width: 200px;
  }
  
  #banner-message.alt button {
    background: #fff;
    color: #000;
  }
  
  
  .popover button{
    background: #f48024;
  }
  
  .popover button:hover{
    background:#fcb67c;
  }
  
  .popover button:focus{
    background: #052049;
  }
  
  .popover button:focus:active{
    background: #052049;
  }
  
  .arrow {
    
    visibility: hidden;
  }
  
  .ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
    border: 1px solid #dad55e;
    background: #fffa90;
    color: #777620;
  }
  
  
  
  
  
  &lt;!DOCTYPE html&gt;
  &lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css&quot;&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css&quot;&gt;
  &lt;script src=&quot;https://code.jquery.com/ui/1.12.0/jquery-ui.js&quot;&gt;&lt;/script&gt;
  &lt;link rel=&quot;stylesheet&quot; href=&quot;./style.css&quot; /&gt;
  &lt;script src=&quot;app.js&quot;&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div class=&quot; col-md-4&quot;&gt;
        &lt;div  class=&quot;date-picker-2&quot; placeholder=&quot;Recipient's username&quot; id=&quot;ttry&quot; aria-describedby=&quot;basic-addon2&quot;&gt;&lt;/div&gt;
        &lt;span class=&quot;&quot; id=&quot;example-popover-2&quot;&gt;&lt;/span&gt; &lt;/div&gt;
      &lt;div id=&quot;example-popover-2-content&quot; class=&quot;hidden&quot;&gt; &lt;/div&gt;
      &lt;div id=&quot;example-popover-2-title&quot; class=&quot;hidden&quot;&gt; &lt;/div&gt;
  
  &lt;script&gt;
  
  $('.date-picker-2').popover({
      html : true, 
      
      content: function() {
        return $(&quot;#example-popover-2-content&quot;).html();
      },
      title: function() {
        return $(&quot;#example-popover-2-title&quot;).html();
      }
  
  });
  
  $(&quot;.date-picker-2&quot;).datepicker({
   minDate: new Date(),
      onSelect: function(dateText) { 
          $('#example-popover-2-title').html('&lt;b&gt;Available Appointments&lt;/b&gt;');
          var html = '&lt;button  class=&quot;btn btn-success&quot;&gt;8:00 am – 9:00 am&lt;/button&gt;&lt;br&gt;&lt;button  class=&quot;btn btn-success&quot;&gt;10:00 am – 12:00 pm&lt;/button&gt;&lt;br&gt;&lt;button  class=&quot;btn btn-success&quot;&gt;12:00 pm – 2:00 pm&lt;/button&gt;';
          $('#example-popover-2-content').html('Available times &lt;strong&gt;'+dateText+'&lt;/strong&gt;&lt;br&gt;'+html);
          $('.date-picker-2').popover('show');
      }
  });
  
  &lt;/script&gt; 
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>