it-roy-ru.com

Могу ли я использовать HTML-тип ввода "дата", чтобы собрать только год?

У меня есть поле, которое требуется для сбора года от пользователя (то есть дата с разрешением года - для удобства хранения я бы предпочел хранить фактическое значение даты, а не число). 

Я хотел бы использовать пользовательский интерфейс ввода даты, поддерживаемый современными браузерами или webshims потому что он хороший и хорошо работает на современных платформах. Я не мог понять, как заставить интерфейс отображать только год. Есть идеи?

Если нет поддержки платформы, в идеале я хотел бы, чтобы пользовательский интерфейс был похож на то, что вы можете см. Здесь , если вы нажмете «Предварительный просмотр», а затем пару раз щелкните верхнюю часть виджета, за исключением обратного: когда вы сначала нажмите на вход, вы получите виджет со списком десятилетий, затем развернитесь, чтобы выбрать год, а затем пользовательский интерфейс закроется.

16
Guss

Нет, вы не можете, он не поддерживает только год, поэтому для этого вам нужен скрипт, такой как jQuery или ссылка на веб-сайт, которая у вас есть, которая показывает только год.


Если jQuery будет вариант, вот один, заимствованный из Сибу :

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

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

Источник: https://stackoverflow.com/a/13528855/2827823

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

Вот обновленная скрипка , без кнопок месяц и предыдущая/следующая


Если bootstrap является опцией, проверьте эту ссылку , они имеют макет, как вы хотите.

11
LGSon

Нет, вы не можете, но вы можете использовать номер типа ввода в качестве обходного пути. Посмотрите на следующий пример:

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

В HTML5 есть тип ввода месяц , который позволяет выбрать месяц и год. Селектор месяца работает с автозаполнением.

Проверьте пример в JSFiddle .

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

Я пытаюсь с этим, без изменений на 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>

Пример кода jsfiddle

1
Johan Morales

Добавьте эту структуру кода в код вашей страницы

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

С этим вам хорошо идти. ????

0
Micolay

Вы можете сделать следующее:

  1. Создайте массив лет, которые я буду принимать,
  2. Используйте поле выбора.
  3. Используйте каждый элемент из вашего массива в качестве тега «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% ;-)

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