<commit_before><html><head></head><body><div class="docs-markdown"><p class="docs-markdown-p">The datepicker allows users to enter a date either through text input, or by choosing a date from
the calendar. It is made up of several components and directives that work together:</p>
<!-- TODO: INSERT OVERVIEW EXAMPLE HERE -->
<h3 id="current-state" class="docs-markdown-h3">Current state</h3>
<p class="docs-markdown-p">Currently the datepicker is in the beginning stages and supports basic date selection functionality.
There are many more features that will be added in future iterations, including:</p>
<ul class="docs-markdown-ul">
<li class="docs-markdown-li">Support for datetimes (e.g. May 2, 2017 at 12:30pm) and month + year only (e.g. May 2017)</li>
<li class="docs-markdown-li">Support for selecting and displaying date ranges</li>
<li class="docs-markdown-li">Support for custom time zones</li>
<li class="docs-markdown-li">Infinite scrolling through calendar months</li>
<li class="docs-markdown-li">Built in support for <a href="https://momentjs.com/" class="docs-markdown-a">Moment.js</a> dates</li>
</ul>
<h3 id="connecting-a-datepicker-to-an-input" class="docs-markdown-h3">Connecting a datepicker to an input</h3>
<p class="docs-markdown-p">A datepicker is composed of a text input and a calendar pop-up, connected via the <code class="docs-markdown-code">mdDatepicker</code>
property on the text input.</p>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> [<span class="hljs-attr">mdDatepicker</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> #<span class="hljs-attr">myDatepicker</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<p class="docs-markdown-p">An optional datepicker toggle button is available. A toggle can be added to the example above:</p>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> [<span class="hljs-attr">mdDatepicker</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> [<span class="hljs-attr">mdDatepickerToggle</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> #<span class="hljs-attr">myDatepicker</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<p class="docs-markdown-p">This works exactly the same with an input that is part of an <code class="docs-markdown-code">&lt;md-input-container&gt;</code> and the toggle
can easily be used as a prefix or suffix on the material input:</p>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code"><span class="hljs-tag">&lt;<span class="hljs-name">md-input-container</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">mdInput</span> [<span class="hljs-attr">mdDatepicker</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mdSuffix</span> [<span class="hljs-attr">mdDatepickerToggle</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">md-input-container</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> #<span class="hljs-attr">myDatepicker</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<h3 id="setting-the-calendar-starting-view" class="docs-markdown-h3">Setting the calendar starting view</h3>
<p class="docs-markdown-p">By default the calendar will open in month view, this can be changed by setting the <code class="docs-markdown-code">startView</code>
property of <code class="docs-markdown-code">md-datepicker</code> to <code class="docs-markdown-code">"year"</code>. In year view the user will see all months of the year and
then proceed to month view after choosing a month.</p>
<p class="docs-markdown-p">The month or year that the calendar opens to is determined by first checking if any date is
currently selected, if so it will open to the month or year containing that date. Otherwise it will
open to the month or year containing today's date. This behavior can be overridden by using the
<code class="docs-markdown-code">startAt</code> property of <code class="docs-markdown-code">md-datepicker</code>. In this case the calendar will open to the month or year
containing the <code class="docs-markdown-code">startAt</code> date. </p>
<pre class="docs-markdown-pre"><code class="lang-ts docs-markdown-code">startDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">1990</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>);
</code></pre>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code">...
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> <span class="hljs-attr">startView</span>=<span class="hljs-string">"year"</span> [<span class="hljs-attr">startAt</span>]=<span class="hljs-string">"startDate"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<h3 id="date-validation" class="docs-markdown-h3">Date validation</h3>
<p class="docs-markdown-p">There are three properties that add date validation to the datepicker input. The first two are the
<code class="docs-markdown-code">min</code> and <code class="docs-markdown-code">max</code> properties. In addition to enforcing validation on the input, these properties will
disable all dates on the calendar popup before or after the respective values and prevent the user
from advancing the calendar past the <code class="docs-markdown-code">month</code> or <code class="docs-markdown-code">year</code> (depending on current view) containing the
<code class="docs-markdown-code">min</code> or <code class="docs-markdown-code">max</code> date.</p>
<p class="docs-markdown-p">The second way to add date validation is using the <code class="docs-markdown-code">mdDatepickerFilter</code> property of the datepicker
input. This property accepts a function of <code class="docs-markdown-code">&lt;D&gt; =&gt; boolean</code> (where <code class="docs-markdown-code">&lt;D&gt;</code> is the date type used by
the datepicker, see section on
<a href="#choosing-a-date-implementation-and-date-format-settings" class="docs-markdown-a">choosing a date implementation</a>).
A result of <code class="docs-markdown-code">true</code> indicates that the date is valid and a result of <code class="docs-markdown-code">false</code> indicates that it is
not. Again this will also disable the dates on the calendar that are invalid. However, one important
difference between using <code class="docs-markdown-code">mdDatepickerFilter</code> vs using <code class="docs-markdown-code">min</code> or <code class="docs-markdown-code">max</code> is that filtering out all
dates before or after a certain point, will not prevent the user from advancing the calendar past
that point.</p>
<pre class="docs-markdown-pre"><code class="lang-ts docs-markdown-code">myFilter = <span class="hljs-function">(<span class="hljs-params">d: <span class="hljs-built_in">Date</span></span>) =&gt;</span> d.getFullYear() &gt; <span class="hljs-number">2005</span> 
minDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>);
maxDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">11</span>, <span class="hljs-number">31</span>);
</code></pre>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> [<span class="hljs-attr">mdDatepicker</span>]=<span class="hljs-string">"d"</span> [<span class="hljs-attr">mdDatepickerFilter</span>]=<span class="hljs-string">"myFilter"</span> [<span class="hljs-attr">min</span>]=<span class="hljs-string">"minDate"</span> [<span class="hljs-attr">max</span>]=<span class="hljs-string">"maxDate"</span> <span class="hljs-attr">ngModel</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> #<span class="hljs-attr">d</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<p class="docs-markdown-p">In this example the user can back past 2005, but all of the dates before then will be unselectable.
They will not be able to go further back in the calendar than 2000. If they manually type in a date
that is before the min, after the max, or filtered out, the input will have validation errors.</p>
<p class="docs-markdown-p">Each validation property has a different error that can be checked:</p>
<ul class="docs-markdown-ul">
<li class="docs-markdown-li">A value that violates the <code class="docs-markdown-code">min</code> property will have a <code class="docs-markdown-code">mdDatepickerMin</code> error.</li>
<li class="docs-markdown-li">A value that violates the <code class="docs-markdown-code">max</code> property will have a <code class="docs-markdown-code">mdDatepickerMax</code> error.</li>
<li class="docs-markdown-li">A value that violates the <code class="docs-markdown-code">mdDatepickerFilter</code> property will have a <code class="docs-markdown-code">mdDatepickerFilter</code> error.</li>
</ul>
<h3 id="touch-ui-mode" class="docs-markdown-h3">Touch UI mode</h3>
<p class="docs-markdown-p">The datepicker normally opens as a popup under the input. However this is not ideal for touch
devices that don't have as much screen real estate and need bigger click targets. For this reason
<code class="docs-markdown-code">md-datepicker</code> has a <code class="docs-markdown-code">touchUi</code> property that can be set to <code class="docs-markdown-code">true</code> in order to enable a more touch
friendly UI where the calendar opens in a large dialog.</p>
<h3 id="manually-opening-and-closing-the-calendar" class="docs-markdown-h3">Manually opening and closing the calendar</h3>
<p class="docs-markdown-p">The calendar popup can be programmatically controlled using the <code class="docs-markdown-code">open</code> and <code class="docs-markdown-code">close</code> methods on the
<code class="docs-markdown-code">md-datepicker</code>. It also has an <code class="docs-markdown-code">opened</code> property that reflects the status of the popup.</p>
<pre class="docs-markdown-pre"><code class="lang-ts docs-markdown-code"><span class="hljs-meta">@Component</span>({...})
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> MyComponent <span class="hljs-keyword">implements</span> AfterViewInit {
  <span class="hljs-meta">@ViewChild</span>(MdDatepicker) dp: MdDatepicker&lt;<span class="hljs-built_in">Date</span>&gt;;<commit_msg>58c252f fix(datepicker): export MD_DATE_FORMATS and MD_NATIVE_DATE_FORMATS (#4541)<commit_after><html><head></head><body><div class="docs-markdown"><p class="docs-markdown-p">The datepicker allows users to enter a date either through text input, or by choosing a date from
the calendar. It is made up of several components and directives that work together:</p>
<!-- TODO: INSERT OVERVIEW EXAMPLE HERE -->
<h3 id="current-state" class="docs-markdown-h3">Current state</h3>
<p class="docs-markdown-p">Currently the datepicker is in the beginning stages and supports basic date selection functionality.
There are many more features that will be added in future iterations, including:</p>
<ul class="docs-markdown-ul">
<li class="docs-markdown-li">Support for datetimes (e.g. May 2, 2017 at 12:30pm) and month + year only (e.g. May 2017)</li>
<li class="docs-markdown-li">Support for selecting and displaying date ranges</li>
<li class="docs-markdown-li">Support for custom time zones</li>
<li class="docs-markdown-li">Infinite scrolling through calendar months</li>
<li class="docs-markdown-li">Built in support for <a href="https://momentjs.com/" class="docs-markdown-a">Moment.js</a> dates</li>
</ul>
<h3 id="connecting-a-datepicker-to-an-input" class="docs-markdown-h3">Connecting a datepicker to an input</h3>
<p class="docs-markdown-p">A datepicker is composed of a text input and a calendar pop-up, connected via the <code class="docs-markdown-code">mdDatepicker</code>
property on the text input.</p>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> [<span class="hljs-attr">mdDatepicker</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> #<span class="hljs-attr">myDatepicker</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<p class="docs-markdown-p">An optional datepicker toggle button is available. A toggle can be added to the example above:</p>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> [<span class="hljs-attr">mdDatepicker</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">button</span> [<span class="hljs-attr">mdDatepickerToggle</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> #<span class="hljs-attr">myDatepicker</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<p class="docs-markdown-p">This works exactly the same with an input that is part of an <code class="docs-markdown-code">&lt;md-input-container&gt;</code> and the toggle
can easily be used as a prefix or suffix on the material input:</p>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code"><span class="hljs-tag">&lt;<span class="hljs-name">md-input-container</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">mdInput</span> [<span class="hljs-attr">mdDatepicker</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span>
  <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">mdSuffix</span> [<span class="hljs-attr">mdDatepickerToggle</span>]=<span class="hljs-string">"myDatepicker"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">md-input-container</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> #<span class="hljs-attr">myDatepicker</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<h3 id="setting-the-calendar-starting-view" class="docs-markdown-h3">Setting the calendar starting view</h3>
<p class="docs-markdown-p">By default the calendar will open in month view, this can be changed by setting the <code class="docs-markdown-code">startView</code>
property of <code class="docs-markdown-code">md-datepicker</code> to <code class="docs-markdown-code">"year"</code>. In year view the user will see all months of the year and
then proceed to month view after choosing a month.</p>
<p class="docs-markdown-p">The month or year that the calendar opens to is determined by first checking if any date is
currently selected, if so it will open to the month or year containing that date. Otherwise it will
open to the month or year containing today's date. This behavior can be overridden by using the
<code class="docs-markdown-code">startAt</code> property of <code class="docs-markdown-code">md-datepicker</code>. In this case the calendar will open to the month or year
containing the <code class="docs-markdown-code">startAt</code> date.</p>
<pre class="docs-markdown-pre"><code class="lang-ts docs-markdown-code">startDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">1990</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>);
</code></pre>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code">...
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> <span class="hljs-attr">startView</span>=<span class="hljs-string">"year"</span> [<span class="hljs-attr">startAt</span>]=<span class="hljs-string">"startDate"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<h3 id="date-validation" class="docs-markdown-h3">Date validation</h3>
<p class="docs-markdown-p">There are three properties that add date validation to the datepicker input. The first two are the
<code class="docs-markdown-code">min</code> and <code class="docs-markdown-code">max</code> properties. In addition to enforcing validation on the input, these properties will
disable all dates on the calendar popup before or after the respective values and prevent the user
from advancing the calendar past the <code class="docs-markdown-code">month</code> or <code class="docs-markdown-code">year</code> (depending on current view) containing the
<code class="docs-markdown-code">min</code> or <code class="docs-markdown-code">max</code> date.</p>
<p class="docs-markdown-p">The second way to add date validation is using the <code class="docs-markdown-code">mdDatepickerFilter</code> property of the datepicker
input. This property accepts a function of <code class="docs-markdown-code">&lt;D&gt; =&gt; boolean</code> (where <code class="docs-markdown-code">&lt;D&gt;</code> is the date type used by
the datepicker, see section on
<a href="#choosing-a-date-implementation-and-date-format-settings" class="docs-markdown-a">choosing a date implementation</a>).
A result of <code class="docs-markdown-code">true</code> indicates that the date is valid and a result of <code class="docs-markdown-code">false</code> indicates that it is
not. Again this will also disable the dates on the calendar that are invalid. However, one important
difference between using <code class="docs-markdown-code">mdDatepickerFilter</code> vs using <code class="docs-markdown-code">min</code> or <code class="docs-markdown-code">max</code> is that filtering out all
dates before or after a certain point, will not prevent the user from advancing the calendar past
that point.</p>
<pre class="docs-markdown-pre"><code class="lang-ts docs-markdown-code">myFilter = <span class="hljs-function">(<span class="hljs-params">d: <span class="hljs-built_in">Date</span></span>) =&gt;</span> d.getFullYear() &gt; <span class="hljs-number">2005</span>
minDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2000</span>, <span class="hljs-number">0</span>, <span class="hljs-number">1</span>);
maxDate = <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>(<span class="hljs-number">2020</span>, <span class="hljs-number">11</span>, <span class="hljs-number">31</span>);
</code></pre>
<pre class="docs-markdown-pre"><code class="lang-html docs-markdown-code"><span class="hljs-tag">&lt;<span class="hljs-name">input</span> [<span class="hljs-attr">mdDatepicker</span>]=<span class="hljs-string">"d"</span> [<span class="hljs-attr">mdDatepickerFilter</span>]=<span class="hljs-string">"myFilter"</span> [<span class="hljs-attr">min</span>]=<span class="hljs-string">"minDate"</span> [<span class="hljs-attr">max</span>]=<span class="hljs-string">"maxDate"</span> <span class="hljs-attr">ngModel</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">md-datepicker</span> #<span class="hljs-attr">d</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">md-datepicker</span>&gt;</span>
</code></pre>
<p class="docs-markdown-p">In this example the user can back past 2005, but all of the dates before then will be unselectable.
They will not be able to go further back in the calendar than 2000. If they manually type in a date
that is before the min, after the max, or filtered out, the input will have validation errors.</p>
<p class="docs-markdown-p">Each validation property has a different error that can be checked:</p>
<ul class="docs-markdown-ul">
<li class="docs-markdown-li">A value that violates the <code class="docs-markdown-code">min</code> property will have a <code class="docs-markdown-code">mdDatepickerMin</code> error.</li>
<li class="docs-markdown-li">A value that violates the <code class="docs-markdown-code">max</code> property will have a <code class="docs-markdown-code">mdDatepickerMax</code> error.</li>
<li class="docs-markdown-li">A value that violates the <code class="docs-markdown-code">mdDatepickerFilter</code> property will have a <code class="docs-markdown-code">mdDatepickerFilter</code> error.</li>
</ul>
<h3 id="touch-ui-mode" class="docs-markdown-h3">Touch UI mode</h3>
<p class="docs-markdown-p">The datepicker normally opens as a popup under the input. However this is not ideal for touch
devices that don't have as much screen real estate and need bigger click targets. For this reason
<code class="docs-markdown-code">md-datepicker</code> has a <code class="docs-markdown-code">touchUi</code> property that can be set to <code class="docs-markdown-code">true</code> in order to enable a more touch
friendly UI where the calendar opens in a large dialog.</p>
<h3 id="manually-opening-and-closing-the-calendar" class="docs-markdown-h3">Manually opening and closing the calendar</h3>
<p class="docs-markdown-p">The calendar popup can be programmatically controlled using the <code class="docs-markdown-code">open</code> and <code class="docs-markdown-code">close</code> methods on the
<code class="docs-markdown-code">md-datepicker</code>. It also has an <code class="docs-markdown-code">opened</code> property that reflects the status of the popup.</p>
<pre class="docs-markdown-pre"><code class="lang-ts docs-markdown-code"><span class="hljs-meta">@Component</span>({...})
<span class="hljs-keyword">export</span> <span class="hljs-keyword">class</span> MyComponent <span class="hljs-keyword">implements</span> AfterViewInit {
  <span class="hljs-meta">@ViewChild</span>(MdDatepicker) dp: MdDatepicker&lt;<span class="hljs-built_in">Date</span>&gt;;
{'fraction_non_alphanumeric': 0.17766035774611286, 'fraction_numerical': 0.005846940101346961, 'mean_word_length': 6.62297788048861, 'pattern_counts': {'":': 0, '<': 715, '<?xml version=': 0, '>': 715, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3274065', 'n_tokens_mistral': 7465, 'n_tokens_neox': 6815, 'n_words': 1910}