Jquery Datepicker - css

Question

Gibt es eine Möglichkeit, Monat Typ als Zahl (d. H. Textfeld mit Pfeil nach oben und unten) anstelle von Dropdown anzuzeigen.

Bitte helfen Sie dabei. Sehen Sie meine Demo: https://jsfiddle.net/sharmilashree/VBGKU/1067/

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

Answer 1

Dies wird ein schwieriges Problem zu umgehen sein. Dies ist nicht einfach. Hier ist, was ich bisher:

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

Dies funktioniert nur das erste Mal. Der Datepicker selbst hat keine Ereignisse, an die ich mich anhängen kann, um die Ersetzung jedes Mal durchzuführen. Ich muss auch einige Funktionen hinzufügen, damit dieses neue Element richtig mit dem Datepicker funktioniert.

Ich überlege, die Titelleistenelemente zu entfernen und sie zu trennen. Ich werde diese Antwort mit weiteren Details aktualisieren. Eine andere Möglichkeit besteht darin, das Element select zu verbergen und einen Kreisel darüber zu platzieren. Dieser Drehregler ändert dann das Auswahlelement.