diff options
Diffstat (limited to 'files/uk/web/html/element/input/date/index.html')
| -rw-r--r-- | files/uk/web/html/element/input/date/index.html | 510 |
1 files changed, 0 insertions, 510 deletions
diff --git a/files/uk/web/html/element/input/date/index.html b/files/uk/web/html/element/input/date/index.html deleted file mode 100644 index 1737d7786a..0000000000 --- a/files/uk/web/html/element/input/date/index.html +++ /dev/null @@ -1,510 +0,0 @@ ---- -title: <input type="date"> -slug: Web/HTML/Element/input/date -translation_of: Web/HTML/Element/input/date ---- -<div>{{HTMLRef}}</div> - -<p><span class="seoSummary">{{HTMLElement("input")}} елементи типу <strong><code>date</code></strong> створюють поле вводу дати з вбудованим інтерфейсом вибору.</span> Результатом вибору будуть рік, місяць та день, без часу. <code><a href="/en-US/docs/Web/HTML/Element/input/time">time</a></code> та <code><a href="/en-US/docs/Web/HTML/Element/input/datetime-local">datetime-local</a></code> поля підтримують вибір часу та дати і часу.</p> - -<div>{{EmbedInteractiveExample("pages/tabbed/input-date.html", "tabbed-shorter")}}</div> - -<p class="hidden">Ісходний код цих прикладів зберігається на GitHub. Якщо ви хотілиби присвятити час розвитку данних прикладів, клонуйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> і відправте нам pull-запит.</p> - -<p>UI віджет змінюється від оглядача к оглядачу; для перегляду сумісності дивіться {{anch("Browser compatibility")}}. Якщо оглядач не підтримує такий віджет, він буде відображений просто як <code><a href="/en-US/docs/Web/HTML/Element/input/text"><input type="text">.</a></code></p> - -<p>Серед оглядачів які підтримуюсь кастомний інтерфейс вибору дати є Chrome/Opera, який виглядає наступним чином:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14909/date-picker-chrome.png" style="display: block; height: 220px; margin: 0px auto; width: 275px;"></p> - -<p>Edge вибор дати виглядає так:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14911/date-picker-edge.png" style="display: block; margin: 0 auto;"></p> - -<p>У Firefox вибір дати буде таким:</p> - -<p><img alt="Datepicker UI in firefox" src="https://mdn.mozillademos.org/files/15644/firefox_datepicker.png" style="display: block; margin: 0 auto;"></p> - -<table class="properties"> - <tbody> - <tr> - <td><strong>{{anch("Value")}}</strong></td> - <td>{{domxref("DOMString")}} представляє дату у YYYY-MM-DD форматі, або пустим</td> - </tr> - <tr> - <td><strong>Події</strong></td> - <td>{{event("change")}} та {{event("input")}}</td> - </tr> - <tr> - <td><strong>Підримка атрибутів</strong></td> - <td>{{htmlattrxref("autocomplete", "input")}}, {{htmlattrxref("list", "input")}}, {{htmlattrxref("readonly", "input")}}, та {{htmlattrxref("step", "input")}}</td> - </tr> - <tr> - <td><strong>IDL атрибути</strong></td> - <td><code>list</code>, <code>value</code>, <code>valueAsDate</code>, <code>valueAsNumber</code>.</td> - </tr> - <tr> - <td><strong>Методи</strong></td> - <td>{{domxref("HTMLInputElement.select", "select()")}}, {{domxref("HTMLInputElement.stepDown", "stepDown()")}}, {{domxref("HTMLInputElement.stepUp", "stepUp()")}}</td> - </tr> - </tbody> -</table> - -<h2 id="Значення">Значення</h2> - -<p>{{domxref("DOMString")}} представляє значення дати введенної у input. Формат дати описаний у {{SectionOnPage("/en-US/docs/Web/HTML/Date_and_time_formats", "Format of a valid date string")}}.</p> - -<p>Ви можете встановити значення за замовчуванням встановивши дату в атрибут {{htmlattrxref("value", "input")}} , наприклад:</p> - -<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> - -<p>{{EmbedLiveSample('Value', 600, 40)}}</p> - -<p>Треба пам'ятати що відображений формат відрізняється від актуального <code>value</code> — відображення формату дати буде вибрано на основі вибраної локалі користувальницького оглядача, тоді як <code>value</code> дати завжди є у форматі <code>yyyy-mm-dd</code>.</p> - -<p>Ви також можете взяти чи встановити значення дати у JavaScript використовуючи властивість елементу {{domxref("HTMLInputElement.value", "value")}} , наприклад:</p> - -<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); -dateControl.value = '2017-06-01';</pre> - -<p>Цей код знаходить перший {{HTMLElement("input")}} елемент <code>type</code> якого є <code>date</code> і встановлює його значення 2017-06-01 (June 1, 2017).</p> - -<h2 id="Додаткові_атрибути">Додаткові атрибути</h2> - -<p>Додатково з загальними атрибутами {{HTMLElement("input")}} <code>"date"</code> надає наступні додаткові атрибути:</p> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Атрибут</th> - <th scope="col">Опис</th> - </tr> - </thead> - <tbody> - <tr> - <td><code>{{anch("max")}}</code></td> - <td>Максимальна дата яка може бути введена</td> - </tr> - <tr> - <td><code>{{anch("min")}}</code></td> - <td>Мінімальна дата</td> - </tr> - <tr> - <td><code>{{anch("readonly")}}</code></td> - <td>Чи є у інпута контент чи нема, він лише для считування</td> - </tr> - <tr> - <td><code>{{anch("step")}}</code></td> - <td>Інтервал </td> - </tr> - </tbody> -</table> - -<h3 id="htmlattrdef(max)">{{htmlattrdef("max")}}</h3> - -<p>Остання дата. Якщо встановлена дата {{htmlattrxref("value", "input")}} більше ніж ця дата, елемент не пройде <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Якщо значення <code>max</code> не валідна строка формату <code>yyyy-MM-dd</code>, тоді елемент не буде мати максимальне обмеження.</p> - -<p>Це значення має вказувати дату пізнішу або поточну вказанному атрибуту <code>min</code>.</p> - -<h3 id="htmlattrdef(min)">{{htmlattrdef("min")}}</h3> - -<p>Мінімальна дата; дати раніші за вказану не пройдуть <a href="/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation">constraint validation</a>. Якщо значення <code>min</code> атрибуту має неавлідний формат <code>yyyy-MM-dd</code>, тоді елемент не матиме мінімального обмеження.</p> - -<p>Це значення вказує меньшу або еквівалентну значенню атрибута <code>max</code>.</p> - -<p>{{page("/en-US/docs/Web/HTML/Element/input/text", "readonly", 0, 1, 2)}}</p> - -<h3 id="htmlattrdef(step)">{{htmlattrdef("step")}}</h3> - -<p>{{page("/en-US/docs/Web/HTML/Element/input/number", "step-include")}}</p> - -<p>Для <code>date</code> інпутів, значення <code>step</code> вказується в днях, скалярні до 86,400,000 (мілісекунди). За замовчуванная <code>step</code> має 1, означаюче 1 день.</p> - -<div class="blockIndicator note"> -<p>Вказання <code>any</code> для <code>step</code> атрибуту робить той самий ефект як і <code>1</code>.</p> -</div> - -<h2 id="Використання_date_інпутів">Використання date інпутів</h2> - -<p>Поле введення дати зручні на перший погляд — вони надають легкий UI(користувальницький інтерфейс) для вибору дати, і нормалізують формат даних для відправки на сервер, незважаючи на локаль користувача. Однак, існують проблеми підтримки деякими оглядачами <code><input type="date"></code>.</p> - -<p>Подивимось на базові та комлексні використання <code><input type="date"></code>, щодо сумісності оглядачів ви можете порадитись за посиланням (see {{anch("Handling browser support")}}). Звичайно, з часом підтримка в оглядачах розповсюдиться. і усі проблеми будуть вирішені.</p> - -<h3 id="Базові_використання_date">Базові використання date</h3> - -<p>Найпростіше використання <code><input type="date"></code> передбачає базову <code><input></code> і {{htmlelement("label")}} комбінацію елементів, як бачимо нижче:</p> - -<pre class="brush: html"><form> - <div> - <label for="bday">Enter your birthday:</label> - <input type="date" id="bday" name="bday"> - </div> -</form></pre> - -<p>{{EmbedLiveSample('Basic_uses_of_date', 600, 40)}}</p> - -<h3 id="Встановлення_мінімальной_і_максимальної_дати">Встановлення мінімальной і максимальної дати</h3> - -<p>Ви можете використовувати {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} атрибути щоб обмежити дати які будуть вибрані користувачем. В наступному прикладі ми встановлюємо мінімальну дату <code>2017-04-01</code> і максимальну дату <code>2017-04-30</code>:</p> - -<pre class="brush: html"><form> - <div> - <label for="party">Choose your preferred party date:</label> - <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> - </div> -</form></pre> - -<p>{{EmbedLiveSample('Setting_maximum_and_minimum_dates', 600, 40)}}</p> - -<p>Результатом будуть лише дні в Квітні 2017го які можно буде вибрати — тільки "дні", частина текстового значення будуть можливі для зміни, дати поза Квітнем не будуть проскролюватись у віджеті.</p> - -<div class="note"> -<p><strong>Примітка</strong>: Ви можете використати {{htmlattrxref("step", "input")}} атрибут для того щоб вказати інтервал зміни днів (наприклад ви хотіли б щоб можно були вибрати лише Неділю). Однак, це не завжди ефективно в тих чи іншіх реалізаціях.</p> -</div> - -<h3 id="Контроль_розміру_input">Контроль розміру input</h3> - -<p><code><input type="date"></code> не підтримує розмір форми атрибутами наприклад {{htmlattrxref("size", "input")}}. Зверніться до <a href="/en-US/docs/Web/CSS">CSS</a> для контролю розміру елементу.</p> - -<h2 id="Валідація">Валідація</h2> - -<p>За замовчуванням, <code><input type="date"></code> не додає жодної валідації на введення значення. UI реалізація загалом не дозволяє уведення будь чого що не є датою — що є добре — але ви всеодно можете лишати поле пустим чи (в оглядачах де інпут відображається простим типом <code>text</code>) ввести неправильну дату (наприклад 32ге Квітня).</p> - -<p>Якщо ви використовуєте {{htmlattrxref("min", "input")}} і {{htmlattrxref("max", "input")}} для обмеження введення дат (дивіться {{anch("Setting maximum and minimum dates")}}), підтримуючі оглядачі відобразять помилку якщо ви спробуєте відправити дату поза меж вказаних в атрибутах. Однак, перевірте результат щоб запевнитись що значення всередені цих дат, тому що вони можуть не підтримуватись пристрієм користувача.</p> - -<p>В додаток, ви можете використовувати {{htmlattrxref("required", "input")}} атрибут щоб зробити заповнення дати обьв'язковим — знову ж, буде відображена помилка якщо користувач захоче відправити пусте поле. Принаймні, це буде працювати у більшості оглядачів.</p> - -<p>Давайте розглянемо приклад — ми встановили мінімальну і максимальну дату, і також зробили його обов'язковим:</p> - -<pre class="brush: html"><form> - <div> - <label for="party">Choose your preferred party date (required, April 1st to 20th):</label> - <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-20" required> - <span class="validity"></span> - </div> - <div> - <input type="submit"> - </div> -</form></pre> - -<p>Якщо ви спробуєте відправити форму з незаповненою датою(або з датою поза межами), оглядач відобразить помилку. Спробуйте це самі зробити для перевірки:</p> - -<p>{{EmbedLiveSample('Validation', 600, 100)}}</p> - -<p>Це скріншот приклади оглядача без підтримки віджету дати:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14913/date-picker-chrome-error-message.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> - -<p>CSS використаний нижче в прикладі. Ми використовуєм правила {{cssxref(":valid")}} та {{cssxref(":invalid")}} CSS щоб стилізувати відображення валідного чи невалідного введенного значення поля. Ми встановлюємо іконку на {{htmlelement("span")}} біля інпуту, не на самий інпут, тому що у Chrome створений контент розміщений всередені контролю форми, і не може бути застилізований чи відображений коректно.</p> - -<pre class="brush: css">div { - margin-bottom: 10px; - display: flex; - align-items: center; -} - -label { - display: inline-block; - width: 300px; -} - -input:invalid+span:after { - content: '✖'; - padding-left: 5px; -} - -input:valid+span:after { - content: '✓'; - padding-left: 5px; -}</pre> - -<div class="warning"> -<p><strong>Важливо</strong>: HTML валідація форми не замінює скрипти які перевіряють чи буле введена інформація у коректному форматі. Це достатньо простий метод щоб додати корекцію до HTML, їх можливо обійти , чи видалити зовсім. Якщо ваша серверна сторона не перевірить відправлені данні, це може бути катастрофа (данні можуть бути дуже великого розміру, або неправильного типу, вам можуть завантажити скрипт взлому і так далі).</p> -</div> - -<h2 id="Обробка_підтримки_оглядачів">Обробка підтримки оглядачів</h2> - -<p>Як згадано раніше, більша частина проблем з використанням інпуту дати описани у {{anch("Browser compatibility", "browser support")}}. Як приклад, дата пікер у Firefox для Android виглядає так:</p> - -<p><img alt="" src="https://mdn.mozillademos.org/files/14915/date-picker-fxa.png" style="display: block; margin: 0 auto;"></p> - -<p>Непідтримуючи оглядачі точно деградують інпут, це створює проблеми у якості інтерфейсу користувача (представлеий віджет буде іншим), і обробкою даних.</p> - -<p>Наступна проблема це більш серьозна; як згадували раніше, за інпутом дати, данні завжди нормалізуються у формат <code>yyyy-mm-dd</code>. З текстовим інпутом оглядач не підтримує формат введених даних, і є багато прикладів як люди вводять дати, наприклад:</p> - -<ul> - <li><code>ddmmyyyy</code></li> - <li><code>dd/mm/yyyy</code></li> - <li><code>mm/dd/yyyy</code></li> - <li><code>dd-mm-yyyy</code></li> - <li><code>mm-dd-yyyy</code></li> - <li><code>Month dd yyyy</code></li> -</ul> - -<p>Єдиний спосіб стосовно цього є лише введення атрибуту {{htmlattrxref("pattern", "input")}}. Якщо інпут дати не використовує цей атрибут, то текстовий буде. Наприклад, розгляньте код у непідтримуючих оглядачах:</p> - -<pre class="brush: html"><form> - <div> - <label for="bday">Enter your birthday:</label> - <input type="date" id="bday" name="bday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"> - <span class="validity"></span> - </div> - <div> - <input type="submit"> - </div> -</form></pre> - -<p>{{EmbedLiveSample('Handling_browser_support', 600, 100)}}</p> - -<p>Якщо ви спробуєте відправити це, ви побачете помилку (інпут підсвітеться як невалідний) якщо ви ввели данні які не збігаються з шаблоном <code>nnnn-nn-nn</code>, де <code>n</code> номер від 0 до 9. Звичайно, це не зупинить людей від введення неправильної дати, чи введення у неправильному форматі, як <code>yyyy-dd-mm</code> (де ми очикуємо <code>yyyy-mm-dd</code>). Тож всеж таки маємо проблему.</p> - -<div class="hidden"> -<pre class="brush: css">div { - margin-bottom: 10px; -} - -input:invalid + span { - position: relative; -} - -input:invalid + span:after { - content: '✖'; - position: absolute; - right: -18px; -} - -input:valid + span { - position: relative; -} - -input:valid + span:after { - content: '✓'; - position: absolute; - right: -18px; -}</pre> -</div> - -<p>Найкращий шлях опрацьовувати дати в формах в крос-браузерному форматі на даний момент є введення користувачем дня, місяця, і року в окремих елементах ({{htmlelement("select")}}; (дивіться далі реалізацію), або використовуючи JavaScript бібліотеку <a href="https://jqueryui.com/datepicker/">jQuery date picker</a>.</p> - -<h2 id="Приклади">Приклади</h2> - -<p>В цьому прикладі ми створюємо два набори UI елементів для вибору дат: рідний <code><input type="date"></code> і набір із трьох {{htmlelement("select")}} елементів для вибору дати в тих оглядачах які не підтримують рідний date інпут.</p> - -<p>{{EmbedLiveSample('Examples', 600, 100)}}</p> - -<h3 id="HTML">HTML</h3> - -<p>HTML виглядає так:</p> - -<pre class="brush: html"><form> - <div class="nativeDatePicker"> - <label for="bday">Enter your birthday:</label> - <input type="date" id="bday" name="bday"> - <span class="validity"></span> - </div> - <p class="fallbackLabel">Enter your birthday:</p> - <div class="fallbackDatePicker"> - <span> - <label for="day">Day:</label> - <select id="day" name="day"> - </select> - </span> - <span> - <label for="month">Month:</label> - <select id="month" name="month"> - <option selected>January</option> - <option>February</option> - <option>March</option> - <option>April</option> - <option>May</option> - <option>June</option> - <option>July</option> - <option>August</option> - <option>September</option> - <option>October</option> - <option>November</option> - <option>December</option> - </select> - </span> - <span> - <label for="year">Year:</label> - <select id="year" name="year"> - </select> - </span> - </div> -</form></pre> - -<p>Назви місяців жорстко закодовані (тому що вони завжди однакові), коли дні і роки динамічно згенеровані залежно від того який місяць і рік вибраний, і поточний рік (дивіться коментарі коду нижче для детального пояснення як ці функції працюють).</p> - -<div class="hidden"> -<pre class="brush: css">input:invalid+span:after { - content: '✖'; - padding-left: 5px; -} - -input:valid+span:after { - content: '✓'; - padding-left: 5px; -}</pre> -</div> - -<h3 id="JavaScript">JavaScript</h3> - -<p>Друга частина коду розраховує чи підтримує оглядач <code><input type="date"></code>, ми створюєм {{htmlelement("input")}} елемент, із <code>type</code> <code>date</code>, потім одразу перевіряємо який тип було встановлено — непідтримуючі оглядачі автоматично повернуть тип <code>text</code>, тому що <code>date</code> тип автоматично перетворюється на <code>text</code>. Якщо <code><input type="date"></code> не підтримується, ми приховуємо рідний інпут і показуєм UI ({{htmlelement("select")}}) замість нього.</p> - -<pre class="brush: js">// define variables -var nativePicker = document.querySelector('.nativeDatePicker'); -var fallbackPicker = document.querySelector('.fallbackDatePicker'); -var fallbackLabel = document.querySelector('.fallbackLabel'); - -var yearSelect = document.querySelector('#year'); -var monthSelect = document.querySelector('#month'); -var daySelect = document.querySelector('#day'); - -// hide fallback initially -fallbackPicker.style.display = 'none'; -fallbackLabel.style.display = 'none'; - -// test whether a new date input falls back to a text input or not -var test = document.createElement('input'); -test.type = 'date'; - -// if it does, run the code inside the if() {} block -if(test.type === 'text') { - // hide the native picker and show the fallback - nativePicker.style.display = 'none'; - fallbackPicker.style.display = 'block'; - fallbackLabel.style.display = 'block'; - - // populate the days and years dynamically - // (the months are always the same, therefore hardcoded) - populateDays(monthSelect.value); - populateYears(); -} - -function populateDays(month) { - // delete the current set of <option> elements out of the - // day <select>, ready for the next set to be injected - while(daySelect.firstChild){ - daySelect.removeChild(daySelect.firstChild); - } - - // Create variable to hold new number of days to inject - var dayNum; - - // 31 or 30 days? - if(month === 'January' || month === 'March' || month === 'May' || month === 'July' || month === 'August' || month === 'October' || month === 'December') { - dayNum = 31; - } else if(month === 'April' || month === 'June' || month === 'September' || month === 'November') { - dayNum = 30; - } else { - // If month is February, calculate whether it is a leap year or not - var year = yearSelect.value; - var isLeap = new Date(year, 1, 29).getMonth() == 1; - isLeap ? dayNum = 29 : dayNum = 28; - } - - // inject the right number of new <option> elements into the day <select> - for(i = 1; i <= dayNum; i++) { - var option = document.createElement('option'); - option.textContent = i; - daySelect.appendChild(option); - } - - // if previous day has already been set, set daySelect's value - // to that day, to avoid the day jumping back to 1 when you - // change the year - if(previousDay) { - daySelect.value = previousDay; - - // If the previous day was set to a high number, say 31, and then - // you chose a month with less total days in it (e.g. February), - // this part of the code ensures that the highest day available - // is selected, rather than showing a blank daySelect - if(daySelect.value === "") { - daySelect.value = previousDay - 1; - } - - if(daySelect.value === "") { - daySelect.value = previousDay - 2; - } - - if(daySelect.value === "") { - daySelect.value = previousDay - 3; - } - } -} - -function populateYears() { - // get this year as a number - var date = new Date(); - var year = date.getFullYear(); - - // Make this year, and the 100 years before it available in the year <select> - for(var i = 0; i <= 100; i++) { - var option = document.createElement('option'); - option.textContent = year-i; - yearSelect.appendChild(option); - } -} - -// when the month or year <select> values are changed, rerun populateDays() -// in case the change affected the number of available days -yearSelect.onchange = function() { - populateDays(monthSelect.value); -} - -monthSelect.onchange = function() { - populateDays(monthSelect.value); -} - -//preserve day selection -var previousDay; - -// update what day has been set to previously -// see end of populateDays() for usage -daySelect.onchange = function() { - previousDay = daySelect.value; -}</pre> - -<div class="note"> -<p><strong>Note</strong>: Remember that some years have 53 weeks in them (see <a href="https://en.wikipedia.org/wiki/ISO_week_date#Weeks_per_year">Weeks per year</a>)! You'll need to take this into consideration when developing production apps.</p> -</div> - -<h2 id="Специфікації">Специфікації</h2> - -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comments</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('HTML WHATWG', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> - <td>{{Spec2('HTML WHATWG')}}</td> - <td></td> - </tr> - <tr> - <td>{{SpecName('HTML5 W3C', 'forms.html#date-state-(type=date)', '<input type="date">')}}</td> - <td>{{Spec2('HTML5 W3C')}}</td> - <td></td> - </tr> - </tbody> -</table> - -<h2 id="Сумісність_з_оглядачами">Сумісність з оглядачами</h2> - - - -<p>{{Compat("html.elements.input.input-date")}}</p> - -<h2 id="Дивіться_також">Дивіться також</h2> - -<ul> - <li>The generic {{HTMLElement("input")}} element and the interface used to manipulate it, {{domxref("HTMLInputElement")}}</li> - <li><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/The_native_form_widgets#Date_and_time_picker">Date and Time picker tutorial</a></li> - <li><a href="/en-US/docs/Web/HTML/Date_and_time_formats">Date and time formats used in HTML</a></li> -</ul> |