Kann ich ein HTML input type "date" zu sammeln, nur ein Jahr?

Habe ich ein Feld, das erforderlich ist, um zu sammeln, ein Jahr von dem Benutzer (D. H. ein Datum mit einem Jahr-Auflösung - für einfache Lagerung würde ich es vorziehen, zu speichern, einen tatsächlichen Datum und nicht als Zahl).

Ich würde gerne das Datum-input-Benutzeroberfläche unterstützt, die von modernen Browsern oder webshims weil Ihr nett und spielt gut mit modernen Plattformen. Ich konnte nicht herausfinden, wie man die Benutzeroberfläche zum anzeigen, nur das Jahr. Irgendwelche Ideen?

Wenn es keine Plattform-Unterstützung, idealerweise würde ich gerne einen UI-sowas wie dich kann siehe hier wenn Sie auf "Vorschau" und klicken Sie auf den oberen Rand des widgets ein paar mal, außer in umgekehrter Richtung: wenn Sie das erste mal auf den input, den Sie bekommen ein widget mit einer Liste von Jahrzehnten, dann bohren Sie nach unten, wählen Sie das Jahr, dann die UI schließt.

Nein, kann man nicht, es unterstützt nicht nur das Jahr, so zu tun, müssen Sie ein Skript, wie jQuery oder das webshim link, den Sie haben, das zeigt nur für ein Jahr.
Überprüfen Sie diesen Beitrag für ein paar gute jQuery-Beispiel: stackoverflow.com/questions/13528623/...
Die wahrscheinlich macht diese Frage ein Duplikat von: stackoverflow.com/questions/30085591/... ... Stimmen Sie dem zu? ... und wenn jQuery ist eine option, mein Erster Kommentar-link wäre die dupe?
Ich glaube nicht, dass es ein dup, obwohl es simiar. Wie für jQuery, ich bin nicht mit jquery-ui, aber wenn es eine Lösung wäre, würde ich wahrscheinlich tun. Wenn du diesen post als Antwort, könnte ich es genehmigen 🙂

InformationsquelleAutor Guss | 2016-01-08

11

Nein, kann man nicht, es unterstützt nicht nur das Jahr, so zu tun, müssen Sie ein Skript, wie jQuery oder das webshim link, den Sie haben, das zeigt nur für ein Jahr.

Wenn jQuery wäre eine option, hier ist einer, entlehnt aus Sibu:
```
$(function() {
    $( "#datepicker" ).datepicker({dateFormat: 'yy'});
    });
CSS

.ui-datepicker-calendar {
   display: none;
}
```
Src: https://stackoverflow.com/a/13528855/2827823

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

Hier ist eine aktualisierte fiddle, ohne Monat und prev/next-Tasten

Wenn bootstrap ist eine option, überprüfen Sie diesen link, Sie haben ein layout, wie Sie möchten.

Betrachten der resultierenden Oberfläche, seine Art von schrecklich (für ein Jahr picker sowieso). Die einzige Aktion, die Sie tun können, ist, um durch Monate -, die schließlich, erhalten Sie zu einem bestimmten Jahr, aber wenn ich mich fragt ein user, was sein Geburtsjahr ist, es wird 12 mal mehr Klicks als ich es mir gewünscht hätte. UI wie webshims' date picker ' s "Ansicht " 0" ist viel mehr vorzuziehen (obwohl ich konnte nicht herausfinden, wie zu beenden, die webshims-Benutzeroberfläche sobald der Benutzer wählt ein Jahr). Derzeit meine andere Lösung ist ein Dropdown mit allen Jahren seit dem Jahr 1900 mit den Werten der "1-1-JJJJ", also muss ich schlagen diese UI.
Wäre das besser: jsfiddle.net/vW8zc/306
Und hier ist man ohne die prev/next Pfeile: jsfiddle.net/vW8zc/307 ... wenn einer gut genug ist, lassen Sie mich wissen, und ich update meine Antwort
Ich kann nicht sagen, das ist besser als ein straight-up-drop-down (ich habe einige Beschreibung in der Frage über, welche Art von Benutzeroberfläche, die ich suchte), aber ich werde akzeptieren, weil dann beantworten, wenn niemand kommt mit etwas viel besser, in den nächsten paar Tagen. Danke!
Sie sind herzlich willkommen! ... und aktualisiert sich meine Antwort mit dem hinzufügen der neuesten Turnschuh-version.

InformationsquelleAutor LGSon
34

Nein kann man nicht, aber Sie dürfen Sie verwenden möchten, - Eingang Typ-Nummer als ein workaround. Betrachten wir das folgende Beispiel:
```
<input type="number" min="1900" max="2099" step="1" value="2016" />
```
InformationsquelleAutor Blackbam
6

Es ist input type Monat in HTML5 die es erlaubt, wählen Sie Monat und Jahr. Monats-Selektor funktioniert mit AutoVervollständigen.

Siehe das Beispiel in JSFiddle.
```
<!DOCTYPE html>
<html>
<body>
    <header>
        <h1>Select a month below</h1>
    </header>
    Month example
    <input type="month" />
</body>
</html>
```
Danke für die Antwort, ich war mir nicht bewusst type=month als option in HTML5 (ich habe noch einen link zu der Skillung). Github bietet nicht "Schuld view" für große Dateien, so kann ich nicht herausfinden, Wann es Hinzugefügt wurde. That being said, es ist nicht gut genug Lösung für meine Bedürfnisse, aber Sie haben mich inspiriert zum öffnen einer Ausgabe auf dem standard hinzufügen "Jahr" type: github.com/whatwg/html/issues/3281 . Wenn Sie auch Interesse an einem solchen feature (verfügbar in Browsern in den nächsten 5 Jahren 😉 ), bitte Stimmen Sie bis.
Getan. Von Ihnen positiv bewertet werden, die auf github.
Auch input type=Woche verfügbar ist, das war ziemlich überraschend für mich. Aber es gibt keine input type=Jahr.
input type='Monat' ist nicht unterstützt von Firefox und Safari: w3schools.com/tags/att_input_type_month.asp

InformationsquelleAutor Wallkicker
0

Können Sie Folgendes tun:
1. Erzeugen ein Array mit den Jahren werde ich das akzeptieren,
2. Verwenden Sie eine select-box.
3. Verwenden Sie jedes Element aus dem Array wie eine 'option' tag.
Beispiel mit PHP (Sie können dies tun, in einer Sprache Ihrer Wahl):

Server:
```
<?php $years = range(1900, strftime("%Y", time())); ?>
```
HTML
```
<select>
  <option>Select Year</option>
  <?php foreach($years as $year) : ?>
    <option value="<?php echo $year; ?>"><?php echo $year; ?></option>
  <?php endforeach; ?>
</select>
```
Als zusätzlichen Vorteil, diese arbeitet, hat ein browser-Kompatibilität von 100% 😉

InformationsquelleAutor David Lartey

Fügen Sie diesen code Struktur Ihrer Seite code

<?php
echo '<label>Admission Year:</label><br><select name="admission_year" data-component="date">';
for($year=1900; $year<=date('Y'); $year++){
echo '<option value="'.$year.'">'.$year.'</option>';
}
?>

Es funktioniert einwandfrei und kann zerlegt werden

<?php
echo '<label>Admission Year:</label><br><select name="admission_year" data-component="date">';
for($year=date('Y'); $year>=1900; $year++){
echo '<option value="'.$year.'">'.$year.'</option>';
}
?>