Подтвердить что ты не робот

Могу ли я использовать тип ввода "date" HTML для сбора всего за год?

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Javascript

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

CSS

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

Источник: fooobar.com/questions/375506/...

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

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

Если есть вариант начальной загрузки, проверьте эту ссылку, у них есть макет, как вы хотите.

Ответ 2

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

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

Ответ 3

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

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

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

Ответ 4

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

Ответ 5

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

Ответ 6

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

  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% ;-)

Ответ 7

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

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

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