jquery-uijquery-pluginsjquery-ui-datepickerdatapickerjquerydatetimepicker

Jquery Datepicker - css


Is there any way to show month input type as number (i.e textbox with up and down arrow) instead of dropdown.

Please help on this. See my demo: https://jsfiddle.net/sharmilashree/VBGKU/1067/

.ui-datepicker-calendar tr {
  text-align: center;
  padding: 0;
  background-color: #F6F6F6
}

enter image description here


Solution

  • This will be a difficult workaround. This is not easily done. Here is what I have so far:

    https://jsfiddle.net/Twisty/ge6zh5es/6/

    HTML

    <p>Date:
      <input type="text" id="datepicker" class="Highlighted" />
    </p>
    

    JavaScript

    $(function() {
      var minYear = 2006,
        maxYear = new Date().getFullYear();
      maxYear++;
      var $dp = $("#datepicker").datepicker({
        changeYear: true,
        dateFormat: "dd-mm-yy",
        yearRange: minYear + ':' + maxYear,
      });
      $dp.datepicker("setDate", "0");
    
      function changeSpinner($dpObj) {
        var $yearSpin = $("<input>");
        $yearSpin.addClass("ui-datepicker-year");
        $yearSpin.attr({
          type: "number",
          min: minYear,
          max: maxYear,
          value: new Date().getFullYear()
        }).data("handler", "selectYear").data("event", "change");
        $yearSpin.on("change", function() {
          console.log("Spinner Change Event.");
          var pDate = $dpObj.datepicker("getDate");
          pDate.setFullYear(parseInt(this.value));
          console.log("New Date: " + pDate);
          $dpObj.datepicker("setDate", pDate);
        });
        console.info("Created Spinner: ", $yearSpin);
        $dpObj.datepicker("widget").find(".ui-datepicker-year").replaceWith($yearSpin);
      }
    
      $("#datepicker").click(function() {
        changeSpinner($dp);
      }).change(function() {
        changeSpinner($db);
      });
    });
    

    This works the first time only. The datepicker itself does not have any events I can hook into to perform the replacement each time. I also have to add in some functions to get this new element to function properly with the datepicker.

    I am considering removing the title bar items and separating them. I will update this answer with more details. Another option is to hide the select element and place a spinner over it. This spinner then changes the select element.