mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
Website Deployment Script
b241596de9
Deploy website version based on 4f87f6687a98a43a9f50fc31f22b5ba2f8badf7c
265 lines
27 KiB
HTML
265 lines
27 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>🚧 DatePickerIOS · React Native</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="> **Deprecated.** Use [@react-native-community/datetimepicker](https://github.com/react-native-community/react-native-datetimepicker) instead."/><meta name="docsearch:version" content="0.63"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="🚧 DatePickerIOS · React Native"/><meta property="og:type" content="website"/><meta property="og:url" content="https://reactnative.dev/"/><meta property="og:description" content="> **Deprecated.** Use [@react-native-community/datetimepicker](https://github.com/react-native-community/react-native-datetimepicker) instead."/><meta property="og:image" content="https://reactnative.dev/img/logo-og.png"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://reactnative.dev/img/logo-og.png"/><link rel="shortcut icon" href="/img/favicon.ico"/><link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><link rel="alternate" type="application/atom+xml" href="https://reactnative.dev/blog/atom.xml" title="React Native Blog ATOM Feed"/><link rel="alternate" type="application/rss+xml" href="https://reactnative.dev/blog/feed.xml" title="React Native Blog RSS Feed"/><script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-41298772-2', 'auto');
|
|
ga('send', 'pageview');
|
|
</script><script type="text/javascript" src="https://cdn.jsdelivr.net/npm/focus-visible@5.0.2/dist/focus-visible.min.js"></script><script type="text/javascript" src="https://snack.expo.io/embed.js"></script><script type="text/javascript" src="https://platform.twitter.com/widgets.js"></script><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><script type="text/javascript" src="/js/codeblocks.js"></script><script type="text/javascript" src="/js/tabs.js"></script><script type="text/javascript" src="/js/docs-rating.js"></script><script type="text/javascript" src="/js/announcement.js"></script><script src="https://unpkg.com/vanilla-back-to-top@7.1.14/dist/vanilla-back-to-top.min.js"></script><script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
addBackToTop(
|
|
{"zIndex":100}
|
|
)
|
|
});
|
|
</script><script src="/js/scrollSpy.js"></script><link rel="stylesheet" href="/css/prism.css"/><link rel="stylesheet" href="/css/main.css"/><script src="/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/"><img class="logo" src="/img/header_logo.svg" alt="React Native"/><h2 class="headerTitleWithLogo">React Native</h2></a><a href="/versions"><h3>0.63</h3></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class=""><a href="/docs/getting-started" target="_self">Docs</a></li><li class=""><a href="/docs/components-and-apis" target="_self">Components</a></li><li class=""><a href="/docs/accessibilityinfo" target="_self">API</a></li><li class=""><a href="/help" target="_self">Community</a></li><li class=""><a href="/blog/" target="_self">Blog</a></li><li class="navSearchWrapper reactNavSearchWrapper"><input type="text" id="search_input_react" placeholder="Search" title="Search"/></li><li class=""><a href="https://github.com/facebook/react-native" target="_self">GitHub</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container mainContainer docsContainer"><div class="wrapper"><div class="post"><header class="postHeader"><a class="edit-page-link button" href="https://github.com/facebook/react-native-website/blob/master/docs/datepickerios.md" target="_blank" rel="noreferrer noopener">Edit</a><h1 id="__docusaurus" class="postHeaderTitle">🚧 DatePickerIOS</h1></header><article><div><span><blockquote>
|
|
<p><strong>Deprecated.</strong> Use <a href="https://github.com/react-native-community/react-native-datetimepicker">@react-native-community/datetimepicker</a> instead.</p>
|
|
</blockquote>
|
|
<p>Use <code>DatePickerIOS</code> to render a date/time picker (selector) on iOS. This is a controlled component, so you must hook in to the <code>onDateChange</code> callback and update the <code>date</code> prop in order for the component to update, otherwise the user's change will be reverted immediately to reflect <code>props.date</code> as the source of truth.</p>
|
|
<h3><a class="anchor" aria-hidden="true" id="example"></a><a href="#example" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Example</h3>
|
|
<div class="toggler">
|
|
<ul role="tablist" class="toggle-syntax">
|
|
<li id="functional" class="button-functional" aria-selected="false" role="tab" tabindex="0" aria-controls="functionaltab" onclick="displayTabs('syntax', 'functional')">
|
|
Function Component Example
|
|
</li>
|
|
<li id="classical" class="button-classical" aria-selected="false" role="tab" tabindex="0" aria-controls="classicaltab" onclick="displayTabs('syntax', 'classical')">
|
|
Class Component Example
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<p><block class="functional syntax" /></p>
|
|
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, {useState} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
|
<span class="hljs-keyword">import</span> {DatePickerIOS, View, StyleSheet} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
|
|
|
<span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-params">()</span> =></span> {
|
|
|
|
<span class="hljs-keyword">const</span> [chosenDate, setChosenDate] = useState(<span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>());
|
|
|
|
<span class="hljs-keyword">return</span> (
|
|
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">DatePickerIOS</span>
|
|
<span class="hljs-attr">date</span>=<span class="hljs-string">{chosenDate}</span>
|
|
<span class="hljs-attr">onDateChange</span>=<span class="hljs-string">{setChosenDate}</span>
|
|
/></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
});
|
|
|
|
export default App;
|
|
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
|
data-snack-name="DatePickerIOS"
|
|
data-snack-description="Example usage"
|
|
data-snack-code="import%20React%2C%20%7BuseState%7D%20from%20'react'%3B%0Aimport%20%7BDatePickerIOS%2C%20View%2C%20StyleSheet%7D%20from%20'react-native'%3B%0A%0Aconst%20App%20%3D%20()%20%3D%3E%20%7B%0A%0A%20%20const%20%5BchosenDate%2C%20setChosenDate%5D%20%3D%20useState(new%20Date())%3B%0A%0A%20%20return%20(%0A%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%3CDatePickerIOS%0A%20%20%20%20%20%20%20%20date%3D%7BchosenDate%7D%0A%20%20%20%20%20%20%20%20onDateChange%3D%7BsetChosenDate%7D%0A%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%3C%2FView%3E%0A%20%20)%3B%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A%0Aexport%20default%20App%3B%0A"
|
|
data-snack-platform="web"
|
|
data-snack-supported-platforms=ios
|
|
data-snack-preview="true"
|
|
style="
|
|
overflow: hidden;
|
|
background: #fafafa;
|
|
border: 1px solid rgba(0,0,0,.16);
|
|
border-radius: 4px;
|
|
height: 514px;
|
|
width: 100%;
|
|
"
|
|
></div></div></div><p><block class="classical syntax" /></p>
|
|
<div class="snack-player"><div class="mobile-friendly-snack" style="display: none"><pre><code class="hljs css javascript"><span class="hljs-keyword">import</span> React, {Component} <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
|
|
<span class="hljs-keyword">import</span> {DatePickerIOS, View, StyleSheet} <span class="hljs-keyword">from</span> <span class="hljs-string">'react-native'</span>;
|
|
|
|
<span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">App</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">Component</span> </span>{
|
|
<span class="hljs-keyword">constructor</span>(props) {
|
|
<span class="hljs-keyword">super</span>(props);
|
|
<span class="hljs-keyword">this</span>.state = {<span class="hljs-attr">chosenDate</span>: <span class="hljs-keyword">new</span> <span class="hljs-built_in">Date</span>()};
|
|
|
|
<span class="hljs-keyword">this</span>.setDate = <span class="hljs-keyword">this</span>.setDate.bind(<span class="hljs-keyword">this</span>);
|
|
}
|
|
|
|
setDate(newDate) {
|
|
<span class="hljs-keyword">this</span>.setState({<span class="hljs-attr">chosenDate</span>: newDate});
|
|
}
|
|
|
|
render() {
|
|
<span class="hljs-keyword">return</span> (
|
|
<span class="xml"><span class="hljs-tag"><<span class="hljs-name">View</span> <span class="hljs-attr">style</span>=<span class="hljs-string">{styles.container}</span>></span>
|
|
<span class="hljs-tag"><<span class="hljs-name">DatePickerIOS</span>
|
|
<span class="hljs-attr">date</span>=<span class="hljs-string">{this.state.chosenDate}</span>
|
|
<span class="hljs-attr">onDateChange</span>=<span class="hljs-string">{this.setDate}</span>
|
|
/></span>
|
|
<span class="hljs-tag"></<span class="hljs-name">View</span>></span>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
justifyContent: 'center',
|
|
},
|
|
});
|
|
</span></code></pre></div><div class="desktop-friendly-snack" style="margin-top: 15px; margin-bottom: 15px"><div
|
|
data-snack-name="DatePickerIOS"
|
|
data-snack-description="Example usage"
|
|
data-snack-code="import%20React%2C%20%7BComponent%7D%20from%20'react'%3B%0Aimport%20%7BDatePickerIOS%2C%20View%2C%20StyleSheet%7D%20from%20'react-native'%3B%0A%0Aexport%20default%20class%20App%20extends%20Component%20%7B%0A%20%20constructor(props)%20%7B%0A%20%20%20%20super(props)%3B%0A%20%20%20%20this.state%20%3D%20%7BchosenDate%3A%20new%20Date()%7D%3B%0A%0A%20%20%20%20this.setDate%20%3D%20this.setDate.bind(this)%3B%0A%20%20%7D%0A%0A%20%20setDate(newDate)%20%7B%0A%20%20%20%20this.setState(%7BchosenDate%3A%20newDate%7D)%3B%0A%20%20%7D%0A%0A%20%20render()%20%7B%0A%20%20%20%20return%20(%0A%20%20%20%20%20%20%3CView%20style%3D%7Bstyles.container%7D%3E%0A%20%20%20%20%20%20%20%20%3CDatePickerIOS%0A%20%20%20%20%20%20%20%20%20%20date%3D%7Bthis.state.chosenDate%7D%0A%20%20%20%20%20%20%20%20%20%20onDateChange%3D%7Bthis.setDate%7D%0A%20%20%20%20%20%20%20%20%2F%3E%0A%20%20%20%20%20%20%3C%2FView%3E%0A%20%20%20%20)%3B%0A%20%20%7D%0A%7D%0A%0Aconst%20styles%20%3D%20StyleSheet.create(%7B%0A%20%20container%3A%20%7B%0A%20%20%20%20flex%3A%201%2C%0A%20%20%20%20justifyContent%3A%20'center'%2C%0A%20%20%7D%2C%0A%7D)%3B%0A"
|
|
data-snack-platform="web"
|
|
data-snack-supported-platforms=ios
|
|
data-snack-preview="true"
|
|
style="
|
|
overflow: hidden;
|
|
background: #fafafa;
|
|
border: 1px solid rgba(0,0,0,.16);
|
|
border-radius: 4px;
|
|
height: 514px;
|
|
width: 100%;
|
|
"
|
|
></div></div></div><p><block class="endBlock syntax" /></p>
|
|
<hr>
|
|
<h1><a class="anchor" aria-hidden="true" id="reference"></a><a href="#reference" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Reference</h1>
|
|
<h2><a class="anchor" aria-hidden="true" id="props"></a><a href="#props" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Props</h2>
|
|
<p>Inherits <a href="/docs/view#props">View Props</a>.</p>
|
|
<h3><a class="anchor" aria-hidden="true" id="date"></a><a href="#date" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>date</code></h3>
|
|
<p>The currently selected date.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Date</td><td>Yes</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<hr>
|
|
<h3><a class="anchor" aria-hidden="true" id="onchange"></a><a href="#onchange" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onChange</code></h3>
|
|
<p>Date change handler.</p>
|
|
<p>This is called when the user changes the date or time in the UI. The first and only argument is an Event. For getting the date the picker was changed to, use onDateChange instead.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>function</td><td>No</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<hr>
|
|
<h3><a class="anchor" aria-hidden="true" id="ondatechange"></a><a href="#ondatechange" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>onDateChange</code></h3>
|
|
<p>Date change handler.</p>
|
|
<p>This is called when the user changes the date or time in the UI. The first and only argument is a Date object representing the new date and time.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>function</td><td>Yes</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<hr>
|
|
<h3><a class="anchor" aria-hidden="true" id="maximumdate"></a><a href="#maximumdate" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>maximumDate</code></h3>
|
|
<p>Maximum date.</p>
|
|
<p>Restricts the range of possible date/time values.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Date</td><td>No</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<p>Example with <code>maximumDate</code> set to December 31, 2017:</p>
|
|
<p><center><img src="/docs/assets/DatePickerIOS/maximumDate.gif" width="360"></img></center></p>
|
|
<hr>
|
|
<h3><a class="anchor" aria-hidden="true" id="minimumdate"></a><a href="#minimumdate" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>minimumDate</code></h3>
|
|
<p>Minimum date.</p>
|
|
<p>Restricts the range of possible date/time values.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Date</td><td>No</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<p>See <a href="/docs/datepickerios#maximumdate"><code>maximumDate</code></a> for an example image.</p>
|
|
<hr>
|
|
<h3><a class="anchor" aria-hidden="true" id="minuteinterval"></a><a href="#minuteinterval" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>minuteInterval</code></h3>
|
|
<p>The interval at which minutes can be selected.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>enum(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)</td><td>No</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<p>Example with <code>minuteInterval</code> set to <code>10</code>:</p>
|
|
<p><center><img src="/docs/assets/DatePickerIOS/minuteInterval.png" width="360"></img></center></p>
|
|
<hr>
|
|
<h3><a class="anchor" aria-hidden="true" id="mode"></a><a href="#mode" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>mode</code></h3>
|
|
<p>The date picker mode.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>enum('date', 'time', 'datetime', 'countdown')</td><td>No</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<p>Example with <code>mode</code> set to <code>date</code>, <code>time</code>, and <code>datetime</code>: <img src="/docs/assets/DatePickerIOS/mode.png" alt=""></p>
|
|
<hr>
|
|
<h3><a class="anchor" aria-hidden="true" id="locale"></a><a href="#locale" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>locale</code></h3>
|
|
<p>The locale for the date picker. Value needs to be a <a href="https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html">Locale ID</a>.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>String</td><td>No</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<hr>
|
|
<h3><a class="anchor" aria-hidden="true" id="timezoneoffsetinminutes"></a><a href="#timezoneoffsetinminutes" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>timeZoneOffsetInMinutes</code></h3>
|
|
<p>Timezone offset in minutes.</p>
|
|
<p>By default, the date picker will use the device's timezone. With this parameter, it is possible to force a certain timezone offset. For instance, to show times in Pacific Standard Time, pass -7 * 60.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>number</td><td>No</td></tr>
|
|
</tbody>
|
|
</table>
|
|
<hr>
|
|
<h3><a class="anchor" aria-hidden="true" id="initialdate"></a><a href="#initialdate" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a><code>initialDate</code></h3>
|
|
<p>Provides an initial value that will change when the user starts selecting a date. It is useful for use-cases where you do not want to deal with listening to events and updating the date prop to keep the controlled state in sync. The controlled state has known bugs which causes it to go out of sync with native. The initialDate prop is intended to allow you to have native be source of truth.</p>
|
|
<table>
|
|
<thead>
|
|
<tr><th>Type</th><th>Required</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr><td>Date</td><td>No</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</span></div></article></div><div class="docs-prevnext"></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#props">Props</a><ul class="toc-headings"><li><a href="#date"><code>date</code></a></li><li><a href="#onchange"><code>onChange</code></a></li><li><a href="#ondatechange"><code>onDateChange</code></a></li><li><a href="#maximumdate"><code>maximumDate</code></a></li><li><a href="#minimumdate"><code>minimumDate</code></a></li><li><a href="#minuteinterval"><code>minuteInterval</code></a></li><li><a href="#mode"><code>mode</code></a></li><li><a href="#locale"><code>locale</code></a></li><li><a href="#timezoneoffsetinminutes"><code>timeZoneOffsetInMinutes</code></a></li><li><a href="#initialdate"><code>initialDate</code></a></li></ul></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><h5>Docs</h5><a href="/docs/getting-started">Getting Started</a><a href="/docs/tutorial">Tutorial</a><a href="/docs/components-and-apis">Components and APIs</a><a href="/docs/more-resources">More Resources</a></div><div><h5>Community</h5><a href="/help">The React Native Community</a><a href="/showcase">Who's using React Native?</a><a href="https://stackoverflow.com/questions/tagged/react-native" target="_blank">Ask Questions on Stack Overflow</a><a href="https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md">Contributor Guide</a><a href="https://dev.to/t/reactnative" target="_blank">DEV Community</a></div><div><h5>More Resources</h5><a href="/blog">Blog</a><a href="https://twitter.com/reactnative" target="_blank">Twitter</a><a href="https://github.com/facebook/react-native" target="_blank">GitHub</a><a href="https://reactjs.org" target="_blank">React</a></div></section><a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource"><img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/></a><section class="copyright">Copyright © 2020 Facebook Inc.</section></footer></div><script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script><script>window.fbAsyncInit = function() {FB.init({appId:'1677033832619985',xfbml:true,version:'v2.7'});};(function(d, s, id){var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = '//connect.facebook.net/en_US/sdk.js';fjs.parentNode.insertBefore(js, fjs);}(document, 'script','facebook-jssdk'));
|
|
</script><script>window.twttr=(function(d,s, id){var js,fjs=d.getElementsByTagName(s)[0],t=window.twttr||{};if(d.getElementById(id))return t;js=d.createElement(s);js.id=id;js.src='https://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js, fjs);t._e = [];t.ready = function(f) {t._e.push(f);};return t;}(document, 'script', 'twitter-wjs'));</script><script>
|
|
document.addEventListener('keyup', function(e) {
|
|
if (e.target !== document.body) {
|
|
return;
|
|
}
|
|
// keyCode for '/' (slash)
|
|
if (e.keyCode === 191) {
|
|
const search = document.getElementById('search_input_react');
|
|
search && search.focus();
|
|
}
|
|
});
|
|
</script><script>
|
|
var search = docsearch({
|
|
|
|
apiKey: '2c98749b4a1e588efec53b2acec13025',
|
|
indexName: 'react-native-versions',
|
|
inputSelector: '#search_input_react',
|
|
algoliaOptions: {"facetFilters":["tags:0.63"],"hitsPerPage":5}
|
|
});
|
|
</script></body></html> |