diff options
Diffstat (limited to 'files/ru/web/html/element/input/date/index.html')
| -rw-r--r-- | files/ru/web/html/element/input/date/index.html | 22 |
1 files changed, 11 insertions, 11 deletions
diff --git a/files/ru/web/html/element/input/date/index.html b/files/ru/web/html/element/input/date/index.html index 23d6d631cc..d6f809030c 100644 --- a/files/ru/web/html/element/input/date/index.html +++ b/files/ru/web/html/element/input/date/index.html @@ -54,7 +54,7 @@ translation_of: Web/HTML/Element/input/date <p>Возвращает {{domxref("DOMString")}}, представляющий значение даты введённой в input. Вы можете установить значение по умолчанию для элемента с помощью добавления атрибута в {{htmlattrxref("value", "input")}}, например:</p> -<pre class="brush: html notranslate"><input id="date" type="date" value="2017-06-01"></pre> +<pre class="brush: html"><input id="date" type="date" value="2017-06-01"></pre> <p>{{EmbedLiveSample('Значение', 600, 40)}}</p> @@ -64,7 +64,7 @@ translation_of: Web/HTML/Element/input/date <p>Вы также можете получить или установить значение даты в JavaScript с помощью свойств {{domxref("HTMLInputElement.value", "value")}} и {{domxref("HTMLInputElement.valueAsNumber", "valueAsNumber")}} элемента input. Например:</p> -<pre class="brush: js notranslate">var dateControl = document.querySelector('input[type="date"]'); +<pre class="brush: js">var dateControl = document.querySelector('input[type="date"]'); dateControl.value = '2017-06-01'; console.log(dateControl.value); // prints "2017-06-01" console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms) @@ -135,7 +135,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Самый простой способ использовать <code><input type="date"></code> - это использовать его с элементами <code><input></code> и <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">label</span></font>, как показано ниже:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="bday">Введите дату вашего рождения:</label> <input type="date" id="bday" name="bday"> @@ -148,7 +148,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Вы можете использовать атрибуты {{htmlattrxref("min", "input")}} и {{htmlattrxref("max", "input")}}, чтобы ограничить дату, которую может выбрать пользователь. В следующем примере мы устанавливаем минимальную дату <code>2017-04-01</code> и максимальную дату <code>2017-04-30</code>. Пользователь сможет выбрать дату только из этого диапазона:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div> <label for="party">Укажите предпочтительную дату события:</label> <input type="date" id="party" name="party" min="2017-04-01" max="2017-04-30"> @@ -177,7 +177,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Let's look at an example — here we've set minimum and maximum dates, and also made the field required:</p> -<pre class="brush: html notranslate"><form> +<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> @@ -198,7 +198,7 @@ console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript ti <p>Here's the CSS used in the above example. Here we make use of the {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS properties to style the input based on whether or not the current value is valid. We had to put the icons on a {{htmlelement("span")}} next to the input, not on the input itself, because in Chrome the generated content is placed inside the form control, and can't be styled or shown effectively.</p> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; display: flex; align-items: center; @@ -244,7 +244,7 @@ input:valid+span:after { <p>One way around this is to put a {{htmlattrxref("pattern", "input")}} attribute on your date input. Even though the date input doesn't use it, the text input fallback will. For example, try viewing the following example in a non-supporting browser:</p> -<pre class="brush: html notranslate"><form> +<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}"> @@ -260,7 +260,7 @@ input:valid+span:after { <p>If you try submitting it, you'll see that the browser now displays an error message (and highlights the input as invalid) if your entry doesn't match the pattern <code>nnnn-nn-nn</code>, where <code>n</code> is a number from 0 to 9. Of course, this doesn't stop people from entering invalid dates, or incorrectly formatted dates, such as <code>yyyy-dd-mm</code> (whereas we want <code>yyyy-mm-dd</code>). So we still have a problem.</p> <div class="hidden"> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { margin-bottom: 10px; } @@ -297,7 +297,7 @@ input:valid + span:after { <p>The HTML looks like so:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div class="nativeDatePicker"> <label for="bday">Enter your birthday:</label> <input type="date" id="bday" name="bday"> @@ -338,7 +338,7 @@ input:valid + span:after { <p>The months are hardcoded (as they are always the same), while the day and year values are dynamically generated depending on the currently selected month and year, and the current year (see the code comments below for detailed explanations of how these functions work.)</p> <div class="hidden"> -<pre class="brush: css notranslate">input:invalid+span:after { +<pre class="brush: css">input:invalid+span:after { content: '✖'; padding-left: 5px; } @@ -353,7 +353,7 @@ input:valid+span:after { <p>The other part of the code that may be of interest is the feature detection code — to detect whether the browser supports <code><input type="date"></code>, we create a new {{htmlelement("input")}} element, set its <code>type</code> to <code>date</code>, then immediately check what its type is set to — non-supporting browsers will return <code>text</code>, because the <code>date</code> type falls back to type <code>text</code>. If <code><input type="date"></code> is not supported, we hide the native picker and show the fallback picker UI ({{htmlelement("select")}}) instead.</p> -<pre class="brush: js notranslate">// define variables +<pre class="brush: js">// define variables var nativePicker = document.querySelector('.nativeDatePicker'); var fallbackPicker = document.querySelector('.fallbackDatePicker'); var fallbackLabel = document.querySelector('.fallbackLabel'); |