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

Question

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

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

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

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

65

html html5 forms date webshim

Источник

user53538 08 янв '16 в 12:05

6 ответов

Решение

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

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

127

Источник

user576746 17 ноя '16 в 18:10

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

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

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

14

Источник

user3195584 08 дек '17 в 14:55

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

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

13

Источник

user1818092 27 июн '18 в 13:22

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

Источник

user5297884 17 ноя '16 в 17:47

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

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

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

1

Источник

user10421485 12 янв '19 в 19:13

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

Источник

user9724299 18 май '18 в 12:19

Другие вопросы по тегам html html5 forms date webshim

user2827823 08 янв '16 в 12:47 2016-01-08 12:47 · Accepted Answer · 2016-01-08 12:47

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

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

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

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

Источник: /questions/40080515/jquery-ui-datepicker-chtobyi-pokazat-tolko-god/40080529#40080529

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

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

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