<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<p dir="auto">The following code</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;Hidden lgDown implementation=&quot;css&quot; /&gt;"><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">Hidden</span> <span class="pl-c1">lgDown</span> <span class="pl-c1">implementation</span><span class="pl-c1">=</span><span class="pl-s">"css"</span> <span class="pl-c1">/</span><span class="pl-c1">&gt;</span></pre></div>
<p dir="auto">will render CSS code</p>
<div class="highlight highlight-source-css notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="@media (max-width:1279.99px) {
  .MuiHiddenCss-lgDown-116 {
    display: none;
  }
}"><pre class="notranslate"><span class="pl-k">@media</span> (<span class="pl-c1">max-width</span><span class="pl-kos">:</span><span class="pl-c1">1279.99<span class="pl-smi">px</span></span>) {
  .<span class="pl-c1">MuiHiddenCss-lgDown-116</span> {
    <span class="pl-c1">display</span><span class="pl-kos">:</span> none;
  }
}</pre></div>
<p dir="auto">which is matched on Safari with 1280px width.</p>
<p dir="auto">You can test on browser console:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="window.matchMedia('(max-width:1279.99px)').matches"><pre class="notranslate"><span class="pl-smi">window</span><span class="pl-kos">.</span><span class="pl-en">matchMedia</span><span class="pl-kos">(</span><span class="pl-s">'(max-width:1279.99px)'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-c1">matches</span></pre></div>
<p dir="auto">It returns <code class="notranslate">true</code> on Safari but <code class="notranslate">false</code> on Chrome and Firefox</p>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Drawer should not disappear on screen with 1280px wide.</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">If you go to v1 docs on Safari, you'll see that the drawer is missing.</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<ol dir="auto">
<li>Open Safari</li>
<li>Go to <a href="https://material-ui-1dab0.firebaseapp.com/getting-started/installation/" rel="nofollow">https://material-ui-1dab0.firebaseapp.com/getting-started/installation/</a></li>
<li>Change browser to 1280px width</li>
<li>Sidebar disappear</li>
</ol>
<h2 dir="auto">Your Environment</h2>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>v1.0.0-beta.18</td>
</tr>
<tr>
<td>browser</td>
<td>Safari 11.0.1</td>
</tr>
<tr>
<td>OS</td>
<td>macOS 10.13.1 beta</td>
</tr>
</tbody>
</table>
<p dir="auto">Can not format textField of type date in the form 'DD/MM/YYYY'. The options for type are limited. Why not have a format field</p>


<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/mui-org/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">TextField should have a format prop that will help format date in any format. eg.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;TextField
                onChange={onDateChange}
                id=&quot;date&quot;
                label=&quot;Date Received&quot;
                type=&quot;date&quot;
                format={'DD/MM/YYYY'}
                value={dateRecieved}
                className={classes.textField}
                margin=&quot;normal&quot;
                InputLabelProps={{
                  shrink: true
                }}
/&gt;"><pre class="notranslate"><code class="notranslate">&lt;TextField
                onChange={onDateChange}
                id="date"
                label="Date Received"
                type="date"
                format={'DD/MM/YYYY'}
                value={dateRecieved}
                className={classes.textField}
                margin="normal"
                InputLabelProps={{
                  shrink: true
                }}
/&gt;
</code></pre></div>

<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Currently the type options doesn't allow to format in <code class="notranslate">DD/MM/YYYY</code> form.</p>

<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>1.0.0-beta.32</td>
</tr>
<tr>
<td>React</td>
<td>3.7.2</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>