Jquery Datepicker - css

Question

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
}

Please clarify if you want to adjust each part, day, month, & year, with a Spinner? See more: http://jqueryui.com/spinner/ Or are you asking about using HTML5 `input type='number'` specifically for the Month in the datepicker display? — Twisty, Feb 08 '17 at 18:05
Also see: http://jqueryui.com/datepicker/#dropdown-month-year — Twisty, Feb 08 '17 at 18:07
for year alone i need to show HTML5 input type='number' control — Ammu, Feb 08 '17 at 18:38
Ok, so not Month, but only Year? and not be a dropdown, but to be a spinner. Do you want to use HTML5 element `input type='number'` or the jQuery UI Spinner? — Twisty, Feb 08 '17 at 18:47
please find the image i have attached. all things i have done.. only thing is need to set year text box with up and down arrow. — Ammu, Feb 08 '17 at 22:00

score 0 · Accepted Answer · answered Feb 08 '17 at 23:39

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.

Thanks Twisty for your help. First time its look good and if the same remains whole process it will be great. I will try something from end also with your input meanwhile. If you got any solution please share Thanks in advance.. — Ammu, Feb 09 '17 at 12:11

Jquery Datepicker - css

1 Answers1