Kann ich einen HTML-Eingabetyp "date" verwenden, um nur ein Jahr zu sammeln?

Question

Ich habe ein Feld, das benötigt wird, um ein Jahr vom Benutzer zu sammeln (d. H. Ein Datum mit einer Jahresauflösung - zur Vereinfachung der Speicherung würde ich lieber einen tatsächlichen Datumswert und nicht eine Zahl speichern).

Ich würde gerne die Datumseingabe UI von modernen Browsern oder webshims unterstützt, weil es schön ist und gut mit modernen Plattformen spielt. Ich konnte nicht herausfinden, wie die Benutzeroberfläche nur das Jahr anzeigt. Irgendwelche Ideen?

Wenn es keine Plattformunterstützung gibt, hätte ich gerne eine UI wie Sie können see here, wenn Sie auf "Vorschau" klicken und dann oben auf das Widget ein paar Mal, außer umgekehrt: wenn Sie zuerst Wenn Sie auf die Eingabe klicken, erhalten Sie ein Widget mit einer Liste von Dekaden. Anschließend können Sie einen Drilldown durchführen, um das Jahr auszuwählen. Anschließend schließt sich die Benutzeroberfläche.

Answer 1

Nein, Sie können nicht, es unterstützt nicht nur Jahr, also zu tun, dass Sie ein Skript benötigen, wie jQuery oder der Webshim-Link, den Sie haben, der Jahr nur zeigt.

---

Wenn jQuery eine Option wäre, hier ist ein entlehnt Sibu:

$(function() { 
    $("#datepicker").datepicker({dateFormat: 'yy'}); 
    });​ 
CSS 

.ui-datepicker-calendar { 
    display: none; 
} 

Src: https://stackoverflow.com/a/13528855/2827823

Src Geige: http://jsfiddle.net/vW8zc/

Hier ist an updated fiddle, ohne die Schaltflächen "Monat" und "Vorherige/Nächste"

---

Wenn Bootstrap ist eine Option, check this link, haben sie ein Layout, wie Sie wollen.

Answer 2

Ich versuche damit, keine Änderungen an der CSS.

$(function() { 
 
    $('#datepicker').datepicker({ 
 
     changeYear: true, 
 
     showButtonPanel: true, 
 
     dateFormat: 'yy', 
 
     onClose: function(dateText, inst) { 
 
      var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val(); 
 
      $(this).datepicker('setDate', new Date(year, 1)); 
 
     } 
 
    }); 
 
    
 
    $("#datepicker").focus(function() { 
 
     $(".ui-datepicker-month").hide(); 
 
     $(".ui-datepicker-calendar").hide(); 
 
    }); 
 
    
 
});

<p>Date: <input type="text" id="datepicker" /></p>

Example code jsfiddle

Answer 3

Nein, Sie können nicht, aber Sie möchten Eingabetypnummer als Behelfslösung verwenden. Schauen Sie sich das folgende Beispiel:

<input type="number" min="1900" max="2099" step="1" value="2016" /> 

Answer 4

Es input type month in HTML5 ist, den Monat und Jahr auswählen kann. Monatsauswahl funktioniert mit Autocomplete.

Überprüfen Sie das Beispiel in JSFiddle.