عرض مصدر ReactNative/datepickerios

<noinclude>{{DISPLAYTITLE:المكون DatePickerIOS في React Native}}</noinclude>
<blockquote>'''مهمل:''' يمكنك استخدام <code>[https://github.com/react-native-community/react-native-datetimepicker react-native-datetimepicker]</code> بدلًا منه.</blockquote>يستخدم المكون <code>DatePickerIOS</code> لإظهار مُنتقي الوقت، والتاريخ (date/time picker) على منصة iOS، وهو مكوّنٌ مُتحَكم به، لذا حتّى يُحدَّث هذا المكوّن يجب الرّبط مع ردّ النّداء <code>onDateChange</code>، وتحديث الخاصيّة <code>date</code>، وإلّا فسيلغى تحديث المستخدم على الفور وستُؤخذ الخاصيّة <code>props.date</code> كمصدرٍ موثوقٍ للوقت والتاريخ.   
__toc__
== مثال ==

* [https://snack.expo.dev/@hsoubwiki/datepickerios-function-component مثال لمكون دالة (Function Component)]
<syntaxhighlight lang="javascript">
import React, {useState} from 'react';
import {DatePickerIOS, View, StyleSheet} from 'react-native';

const App = () => {

  const [chosenDate, setChosenDate] = useState(new Date());

  return (
    <View style={styles.container}>
      <DatePickerIOS
        date={chosenDate}
        onDateChange={setChosenDate}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
});

export default App; 
</syntaxhighlight>

* [https://snack.expo.dev/@hsoubwiki/datepickerios-class-component مثال لمكوِّن الصّنف (Class Component)]
<syntaxhighlight lang="javascript">
import React, {Component} from 'react';
import {DatePickerIOS, View, StyleSheet} from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {chosenDate: new Date()};

    this.setDate = this.setDate.bind(this);
  }

  setDate(newDate) {
    this.setState({chosenDate: newDate});
  }

  render() {
    return (
      <View style={styles.container}>
        <DatePickerIOS
          date={this.state.chosenDate}
          onDateChange={this.setDate}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
  },
}); 
</syntaxhighlight>

== الخاصيات ==
ترث خاصّيّات المكوّن [[ReactNative/view#props|<code>View</code>]]. 

=== <code>date</code> ===
لاختيار التّاريخ الحالي.
{| class="wikitable"
!النوع
!مطلوب
|-
|تاريخ (Date)
|نعم
|}

=== <code>onChange</code> ===
هي خاصية معالج (handler) تغيير التّاريخ، حيث يُستدعى عند تغيير الوقت، أو التّاريخ من واجهة المستخدم UI،  وله معاملٌ وحيد هو حدث (event)، يُستخدم للحصول على التّاريخ المحدّد في منتقي الوقت والتّاريخ (picker)، ويفضّل استخدام الخاصيّة <code>onDateChange</code> عوضًا عنها.
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|لا
|}

=== <code>onDateChange</code> ===
وهو معالج تغيير التّاريخ، ويُستدعى عند تغيير الوقت أو التّاريخ من واجهة المستخدم UI، وله معامل وحيد هو كائن من نوع تاريخ (Date object)، ويمثل الوقت والتاريخ المُحدّث. 
{| class="wikitable"
!النوع
!مطلوب
|-
|دالة (function)
|نعم
|}

=== <code>maximumDate</code> ===
تُحدد أعلى قيمةٍ للوقت والتّاريخ، وبذلك يضيق مجال قيمهما المحتملة.
{| class="wikitable"
!النوع
!مطلوب
|-
|تاريخ (Date)
|لا
|}
ويبين المثال التّالي منتقي الوقت والتّاريخ عند ضبط <code>maximumDate</code> على 31 كانون الثّاني:
[[ملف:001maximumDate.gif|مركز|تصغير]]

=== <code>minimumDate</code> ===
تُحدد أقلّ قيمةٍ للوقت والتّاريخ، وبذلك يضيّق مجال قيمهما المحتملة.
{| class="wikitable"
!النوع
!مطلوب
|-
|تاريخ (Date)
|لا
|}
كما هي موضّحة في المثال السابق مع <code>maximumDate</code>.

=== <code>minutInterval</code> ===
تُحدد القيمة الفاصلة لاختيار الدقائق.
{| class="wikitable"
!النوع
!مطلوب
|-
|‎‏تعداد ‪<code>(1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30)</code>
|لا
|}
ويبين المثال التّالي منتقي الوقت والتّاريخ عند ضبط <code>minutInterval</code> على القيمة <code>10</code>:
[[ملف:002minuteInterval.png|مركز|تصغير]]

=== <code>mode</code> ===
تُحدّد وضع (mode) منتقي الوقت والتّاريخ.
{| class="wikitable"
!النوع
!مطلوب
|-
|<code>('date', 'time', 'datetime', 'countdown')</code>
|لا
|}
ويبين المثال التّالي منتقي الوقت والتّاريخ عند ضبط <code>mode</code> على القيم <code>date</code>، و<code>time</code>، و<code>datetime</code> من اليسار إلى اليمين:
[[ملف:003mode.png|مركز|تصغير|677x677بك]]

=== <code>local</code> ===
تُحدّد الإعدادات المحلّية لمنتقي الوقت والتّاريخ، ويجب أن تكون قيمته موافقة لصيغة [https://developer.apple.com/library/content/documentation/MacOSX/Conceptual/BPInternational/LanguageandLocaleIDs/LanguageandLocaleIDs.html Locale ID]. 
{| class="wikitable"
!النوع
!مطلوب
|-
|سلسلة نصية (string)
|لا
|}

=== <code>timeZoneOffsetInMinutes</code> ===
تُحدد إزاحة المنطقة الزّمنية (Timezone) بالدّقائق، حيث يستخدم منتقي الوقت والتّاريخ المنطقة الزّمنية للجهاز افتراضيًّا، إلاّ أنّه يمكن استخدام هذه الخاصّية لإجباره على استخدام منطقةٍ زمنيّةٍ مختارةٍ، فعلى سبيل المثال لإظهار الأوقات بتوقيت المحيط الهادي، يمكنك تمرير ‪.-7 * 60
{| class="wikitable"
!النوع
!مطلوب
|-
|عدد (number)
|لا
|}

=== <code>intialDate</code> ===
تُحدّد القيمة الابتدائيّة للوقت والتّاريخ، وهي مفيدة عندما لا نرغب بالتّنصّت (listening) للأحداث، وتحديث الخاصيّة Date للمحافظة على تزامن (sync) الحالة المتحكّم بها، لأنّ هنالك أخطاءً (bug) معروفةً للحالة المتحكّم بها تؤدّي لخروجها عن التّزامن مع منصّة Native، لهذا وُضعت الخاصّية intialDate لجعل منصّة Native مصدرًا موثوقًا للمعلومات.
{| class="wikitable"
!النوع
!مطلوب
|-
|تاريخ (Date)
|لا
|}

== مصادر ==

* [https://facebook.github.io/react-native/docs/datepickerios صفحة DatePickerIOS في توثيق React Native الرسميّ]
[[تصنيف:ReactNative]]
[[تصنيف:React Native Component]]