wake-up-neo.com

Kann ich einen HTML-Eingabetyp "Datum" verwenden, um nur ein Jahr zu erfassen?

Ich habe ein Feld, das erforderlich ist, um ein Jahr vom Benutzer abzuholen (d. H. Ein Datum mit einer Jahresauflösung). Zur Erleichterung der Speicherung würde ich es vorziehen, einen tatsächlichen Datumswert und keine Zahl zu speichern. 

Ich möchte die Datumseingabe-Benutzeroberfläche verwenden, die von modernen Browsern oder webshims unterstützt wird, weil sie schön ist und gut mit modernen Plattformen kompatibel ist. Ich konnte nicht herausfinden, wie man die Benutzeroberfläche dazu bringt, nur das Jahr anzuzeigen. Irgendwelche Ideen?

Wenn es keine Plattformunterstützung gibt, möchte ich im Idealfall eine Benutzeroberfläche haben, die Sie sehen können siehe hier , wenn Sie auf "Vorschau" klicken und dann ein paar Mal auf den oberen Bereich des Widgets klicken, außer umgekehrt Klicken Sie zuerst auf die Eingabe, Sie erhalten ein Widget mit einer Liste von Jahrzehnten, dann können Sie das Jahr auswählen und dann die Benutzeroberfläche schließen.

16
Guss

Nein, das ist nicht möglich. Es wird nicht nur ein Jahr unterstützt. Um dies zu tun, benötigen Sie ein Skript wie jQuery oder den Webshim-Link, der nur das Jahr anzeigt.


Wenn jQuery eine Option wäre, hier eine, die von Sibu entlehnt wurde:

$(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 eine aktualisierte Geige , ohne die Schaltflächen für den Monat und vorige/nächste


Wenn bootstrap eine Option ist, diesen Link überprüfen , haben sie ein Layout, das Sie möchten.

11
LGSon

Nein, das ist nicht möglich, aber Sie möchten die Eingabetypnummer als Problemumgehung verwenden. Schauen Sie sich das folgende Beispiel an:

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

In HTML5 gibt es einen Eingabetyp Monat , der Monat und Jahr auswählen kann. Die Monatsauswahl funktioniert mit Autovervollständigung.

Überprüfen Sie das Beispiel in JSFiddle .

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

Ich versuche damit keine modifikationen 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>

Beispielcode jsfiddle

1
Johan Morales

Fügen Sie diese Code-Struktur Ihrem Seitencode hinzu

<?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 perfekt und kann rückwärtsentwickelt 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>';
}
?>

Damit bist du gut zu gehen. ????

0
Micolay

Sie können Folgendes tun:

  1. Erstellen Sie ein Array der Jahre, die ich akzeptieren werde.
  2. Verwenden Sie eine Auswahlbox.
  3. Verwenden Sie jeden Eintrag aus Ihrem Array als Option-Tag.

Beispiel mit PHP (Sie können dies in einer beliebigen Sprache Ihrer Wahl tun):

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ätzlicher Vorteil hat dieses Werk eine Browserkompatibilität von 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