Kan ik een HTML-invoertype “datum” gebruiken om slechts een jaar te verzamelen?

Ik heb een veld dat vereist is om een ​​jaartal van de gebruiker te verzamelen (d.w.z. een datum met een jaarresolutie – voor het gemak van opslag zou ik liever een werkelijke datumwaarde opslaan en geen getal).

Ik wil graag de gebruikersinterface voor datuminvoer gebruiken die wordt ondersteund door moderne browsers of webshimsomdat het leuk is en goed speelt met moderne platforms. Ik kon er niet achter komen hoe ik de gebruikersinterface alleen het jaar kon laten weergeven. Enig idee?

Als er geen platformondersteuning is, zou ik idealiter een gebruikersinterface willen hebben zoals jij zie hierals u op “Voorbeeld” klikt en vervolgens een paar keer op de bovenkant van de widget klikt, behalve in omgekeerde volgorde: wanneer u voor het eerst op de invoer klikt, krijgt u een widget met een lijst met tientallen jaren, dan gaat u naar beneden om het jaar te kiezen, waarna de gebruikersinterface wordt gesloten.


Antwoord 1, autoriteit 100%

Nee, dat kan niet, maar misschien wilt u het invoertypenummer gebruiken als tijdelijke oplossing. Bekijk het volgende voorbeeld:

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

Antwoord 2, autoriteit 24%

Nee, dat kan niet, het ondersteunt niet alleen het jaar, dus daarvoor heb je een script nodig, zoals jQuery of de webshim-link die je hebt, die alleen het jaar laat zien.


Als jQuery een optie zou zijn, hier is er een, geleend van Sibu:

Javascript

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

CSS

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

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

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

Hier is een bijgewerkte viool, zonder de maand- en vorige/volgende knoppen


Als bootstrapeen optie is, vink dan deze link, ze hebben een lay-out zoals jij dat wilt.


Antwoord 3, autoriteit 11%

Er is invoertype maand in HTML5waarmee u maand en jaar kunt selecteren. Maandkiezer werkt met automatisch aanvullen.

Bekijk het voorbeeld in JSFiddle.

<!DOCTYPE html>
<html>
<body>
    <header>
        <h1>Select a month below</h1>
    </header>
    Month example
    <input type="month" />
</body>
</html>

Antwoord 4, autoriteit 9%

U kunt het volgende doen:

  1. Genereer een array van de jaren die ik zal accepteren,
  2. Gebruik een selectievak.
  3. Gebruik elk item uit je array als een ‘option’-tag.

Voorbeeld met PHP (u kunt dit in elke gewenste taal doen):

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 bijkomend voordeel is dit 100% browsercompatibiliteit 😉


Antwoord 5

Voeg deze codestructuur toe aan uw paginacode

<?php 

Other episodes