Jquery 日期选择器 - css

Question

有什么方法可以将月份输入类型显示为数字（即带有向上和向下箭头的文本框）而不是下拉菜单。

请帮忙解决这个问题。看我的演示：https://jsfiddle.net/sharmilashree/VBGKU/1067/

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

Answer 1

这将是一个困难的解决方法。这不容易做到。这是我目前所拥有的：

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);
  });
});

这只适用于第一次。日期选择器本身没有任何我可以挂钩的事件来每次执行替换。我还必须添加一些函数才能使这个新元素与日期选择器一起正常运行。

我正在考虑删除标题栏项目并将它们分开。我将使用更多详细信息更新此答案。另一种选择是隐藏 select 元素并在其上放置一个微调器。然后，此微调器会更改 select 元素。

Jquery 日期选择器 - css

Jquery Datepicker - css

jquery-ui

jquery-plugins

datapicker

jquery-ui-datepicker

jquerydatetimepicker