web-dev-qa-db-fra.com

Puis-je utiliser un type d'entrée HTML "date" pour collecter uniquement une année?

J'ai un champ qui doit collecter une année de l'utilisateur (c'est-à-dire une date avec une résolution d'année - pour faciliter le stockage, je préférerais stocker une valeur de date réelle et non un nombre). 

Je voudrais utiliser l'interface utilisateur d'entrée de date prise en charge par les navigateurs modernes ou webshims parce que c'est agréable et fonctionne bien avec les plates-formes modernes. Je ne savais pas comment faire en sorte que l'interface utilisateur affiche uniquement l'année. Des idées?

S'il n'y a pas de support de plate-forme, j'aimerais idéalement avoir une interface utilisateur semblable à celle que vous pouvez voir ici si vous cliquez sur "Aperçu" puis cliquez quelques fois sur le haut du widget, Cliquez d'abord sur l'entrée pour obtenir un widget avec une liste de décennies, puis sélectionnez une année, puis l'interface se ferme.

htmlhtml5formsdatewebshim
16
Guss

Non, vous ne pouvez pas, cela ne prend pas en charge uniquement l'année, vous avez donc besoin d'un script, comme jQuery ou le lien Webshim que vous avez, qui affiche uniquement l'année.

Si jQuery est une option, en voici une, empruntée à 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/

Voici un violon mis à jour , sans les boutons month et prev/next

Si bootstrap est une option, cochez ce lien , ils ont une disposition comme vous le souhaitez.

11
LGSon

Non, vous ne pouvez pas, mais vous pouvez utiliser le numéro de type d'entrée comme solution de contournement. Regardez l'exemple suivant:

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

Il y a le type d'entrée month en HTML5 qui permet de sélectionner le mois et l'année. Le sélecteur de mois fonctionne avec la saisie semi-automatique.

Consultez l'exemple dans JSFiddle .

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

J'essaye avec ça, pas de modifications sur le 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>

Exemple de code jsfiddle

1
Johan Morales

Ajouter cette structure de code à votre code de page

<?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>';
}
?>

Cela fonctionne parfaitement et peut être inversé

<?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>';
}
?>

Avec cela, vous êtes prêt à partir. ????

0
Micolay

Vous pouvez faire ce qui suit:

  1. Générez un tableau des années que je vais accepter,
  2. Utilisez une zone de sélection.
  3. Utilisez chaque élément de votre tableau en tant que balise 'option'.

Exemple utilisant PHP (vous pouvez le faire dans n’importe quelle langue de votre choix):

Serveur:

<?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>

Comme avantage supplémentaire, cela fonctionne avec une compatibilité de navigateur de 100% ;-)

0
David Lartey

	<!--This yearpicker development from Zlatko Borojevic
	html elemnts can generate with Java function
    and then declare as custom type for easy use in all html documents 
	For this version for implementacion in your document can use:
	1. Save this code for example: "yearonly.html"
	2. creaate one div with id="yearonly"
	3. Include year picker with function: $("#yearonly").load("yearonly.html"); 
	
	<div id="yearonly"></div>
	<script>
	$("#yearonly").load("yearonly.html"); 
	</script>
	-->

	
	
	<!DOCTYPE html>
	<meta name="viewport" content="text-align:center; width=device-width, initial-scale=1.0">
	<html>
	<body>
	<style>
	.ydiv {
	border:solid 1px;
	width:200px;
	//height:150px;
	background-color:#D8D8D8;
	display:none;
	position:absolute;
	top:40px;
	}

	.ybutton {

    border: none;
    width:35px;
	height:35px;
    background-color:#D8D8D8;
	font-size:100%;
	}

	.yhr {
	background-color:black;
	color:black;
	height:1px">
	}

	.ytext {
	border:none;
	text-align:center;
	width:118px;
	font-size:100%;
	background-color:#D8D8D8;
	font-weight:bold;

	}
	</style>
	<p>
	<!-- input text for display result of yearpicker -->
	<input type = "text" id="yeardate"><button style="width:21px;height:21px"onclick="enabledisable()">V</button></p>

	<!-- yearpicker panel for change only year-->
	<div class="ydiv" id = "yearpicker">
	<button class="ybutton" style="font-weight:bold;"onclick="changedecade('back')"><</button>

	<input class ="ytext" id="dec"  type="text" value ="2018" >
	
	<button class="ybutton" style="font-weight:bold;" onclick="changedecade('next')">></button>
	<hr></hr>



    <!-- subpanel with one year 0-9 -->
	<button  class="ybutton"  onclick="yearone = 0;setyear()">0</button>
	<button  class="ybutton"  onclick="yearone = 1;setyear()">1</button>
	<button  class="ybutton"  onclick="yearone = 2;setyear()">2</button>
	<button  class="ybutton"  onclick="yearone = 3;setyear()">3</button>
	<button  class="ybutton"  onclick="yearone = 4;setyear()">4</button><br>
	<button  class="ybutton"  onclick="yearone = 5;setyear()">5</button>
	<button  class="ybutton"  onclick="yearone = 6;setyear()">6</button>
	<button  class="ybutton"  onclick="yearone = 7;setyear()">7</button>
	<button  class="ybutton"  onclick="yearone = 8;setyear()">8</button>
	<button  class="ybutton"  onclick="yearone = 9;setyear()">9</button>
	</div>
    <!-- end year panel	-->



	<script>
	var date = new Date();
	var year = date.getFullYear(); //get current year
	//document.getElementById("yeardate").value = year;// can rem if filing text from database

	var yearone = 0;
	
	function changedecade(val1){ //change decade for year

	var x = parseInt(document.getElementById("dec").value.substring(0,3)+"0");
	if (val1 == "next"){
	document.getElementById('dec').value = x + 10;
	}else{
	document.getElementById('dec').value = x - 10;
	}
	}
	
	function setyear(){ //set full year as sum decade and one year in decade
	var x = parseInt(document.getElementById("dec").value.substring(0,3)+"0");
    var y = parseFloat(yearone);

	var suma = x + y;
    var d = new Date();
    d.setFullYear(suma);
	var year = d.getFullYear();
	document.getElementById("dec").value = year;
	document.getElementById("yeardate").value = year;
	document.getElementById("yearpicker").style.display = "none";
	yearone = 0;
	}
	
	function enabledisable(){ //enable/disable year panel
	if (document.getElementById("yearpicker").style.display == "block"){
	document.getElementById("yearpicker").style.display = "none";}else{
	document.getElementById("yearpicker").style.display = "block";
	}
	
	}
	</script>
	</body>
	</html>

0
Zlatko Borojevic