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

这仅是第一次。日期选择器本身没有任何可以挂钩的事件来执行每次更换。我还必须添加一些函数来使这个新元素与datepicker正常工作。

我在考虑删除标题栏项目并将它们分开。我会更新这个答案的更多细节。另一个选择是隐藏select元素并在其上放置微调器。这个微调器然后改变选择元素。