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

У меня есть поле, которое требуется для сбора года от пользователя (т. Е. Дата с разрешением года - для удобства хранения я предпочел бы хранить фактическое значение даты, а не число).Могу ли я использовать тип ввода «date» HTML для сбора всего за год?

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

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

источник

2016-01-08 Guss

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

Отметьте это сообщение для нескольких примеров хорошего jQuery: http://stackoverflow.com/questions/13528623/jquery-ui-datepicker-to-show-year-only – LGSon

Что, вероятно, делает этот вопрос дубликатом: http: // stackoverflow.com/questions/30085591/focus-month-or-year-of-html5-inputtype-date ... Согласны ли вы? ... и если jQuery является вариантом, ссылка моего первого комментария будет обманом? – LGSon

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

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

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

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

Src: https://stackoverflow.com/a/13528855/2827823

Src скрипку: http://jsfiddle.net/vW8zc/

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

Если бутстрап является опцией, check this link, у них есть макет, как вы хотите.

источник

2016-01-08 12:47:15 LGSon

Глядя на получившийся интерфейс, его ужасный вид (в любом случае для сборщика в год). Единственное действие, которое вы можете сделать, это перечислить через несколько месяцев, что в конечном итоге приведет вас к определенному году, но если я спрошу у пользователя, что его год рождения, он будет в 12 раз больше кликов, чем мне хотелось бы. UI, например, «view 0» для веб-мастеров, намного предпочтительнее (хотя я не мог понять, как завершить пользовательский интерфейс webshims после того, как пользователь выбирает год). В настоящее время мое другое решение - это падение со всех лет с 1900 года со значениями, установленными в «1-1-YYYY», поэтому мне нужно бить этот интерфейс. – Guss

@ Guss Это было бы лучше: http://jsfiddle.net/vW8zc/306/ – LGSon

@Guss И вот один без предв./Следующих стрелок: http://jsfiddle.net/vW8zc/307/ .. если кто-то достаточно хорош, дайте мне знать, и я обновляю свой ответ. – LGSon

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

Example code jsfiddle

источник

2016-11-17 17:47:31

Решение javascript не является ответом на этот вопрос. – Blackbam

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

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

источник

2016-11-17 18:10:33 Blackbam

Простой и легкий. Почему я не подумал об этом! Должен быть выбран ответ –

Существует input type month in HTML5, который позволяет выбрать месяц и год. Селектор месяца работает с автозаполнением.

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

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

источник

2017-12-08 14:55:26 Wallkicker

Спасибо за ответ, я не знал о том, что 'type = month' является опцией в HTML5 (я добавил ссылку на спецификацию). Github не предлагает «просмотр вины» для больших файлов, поэтому я не могу понять, когда он был добавлен. Это говорит о том, что это не очень хорошее решение для моих нужд, но это вдохновило меня на то, чтобы открыть вопрос о стандарте, чтобы добавить «год»: https://github.com/whatwg/html/issues/3281 , Если вы также заинтересованы в такой функции (быть доступной в браузерах в ближайшие 5 лет ;-)), пожалуйста, проголосуйте. – Guss

Готово. Направлено на github. – Wallkicker

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

ответ

Смежные вопросы