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元素並在其上放置微調器。這個微調器然後改變選擇元素。