HTML入力タイプ「日付」を使用して1年だけ収集できますか？
ユーザーから年を収集するために必要なフィールドがあります（つまり、年の解像度を持つ日付-保存を容易にするために、数値ではなく実際の日付値を保存することをお勧めします）。
最新のブラウザでサポートされている日付入力UIまたは webshims を使用したいのは、そのニースが最新のプラットフォームでうまく機能するためです。 UIに年のみを表示する方法を理解できませんでした。何か案は？
プラットフォームがサポートされていない場合、理想的には、「プレビュー」をクリックしてから上部をクリックして、 こちら を参照してください。逆の場合を除き、ウィジェットを数回繰り返します。最初に入力をクリックすると、10年のリストを含むウィジェットが表示されます。次に、ドリルダウンして年を選択し、UIを閉じます。
いいえ、できません。年のみをサポートしているわけではありません。そのためには、jQueryなどのスクリプト、または年のみを表示するwebshimリンクが必要です。
JQueryがオプションの場合、これは Sib から借用したものです。
Javascript
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'yy'});
});
CSS
.ui-datepicker-calendar {
display: none;
}
Src： https://stackoverflow.com/a/13528855/282782
Srcフィドル： http://jsfiddle.net/vW8zc/
ここに 更新されたフィドル があり、月とprev/nextボタンはありません
bootstrapがオプションである場合、 このリンクを確認してください には、希望するレイアウトがあります。
いいえ、できませんが、回避策として入力タイプ番号を使用できます。次の例を見てください。
<input type="number" min="1900" max="2099" step="1" value="2016" />
HTML5の入力タイプmonth があり、月と年を選択できます。月セレクターはオートコンプリートで機能します。
JSFiddle の例を確認してください。
<!DOCTYPE html>
<html>
<body>
<header>
<h1>Select a month below</h1>
</header>
Month example
<input type="month" />
</body>
</html>
私はこれを試してみましたが、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>このコード構造をページコードに追加します
<?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>';
}
?>
完全に機能し、リバースエンジニアリングが可能
<?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>';
}
?>
これであなたは行ってもいいです。 ????
次のことができます。
- 私が受け入れる年の配列を生成し、
- 選択ボックスを使用します。
- 配列の各項目を「オプション」タグとして使用します。
PHPを使用した例（選択した任意の言語でこれを行うことができます）：
サーバ：
<?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>
追加の利点として、これには100％のブラウザー互換性があります;-)
<!--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>