تخصيص التاريخ و الوقت في نظام DatePickerIOS في رياكت نيتف

بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته

أهلا و سهلا بكم اخواني الأعزاء، في هذه المقالة سنتطرق الى استخدام المكوّن (DatePickerIOS) الجميل لتخصيص الوقت و التاريخ في مكتبة React Native، اذا كنت جديداً معنا أنصحك بالعودة الى دروس سابقة لنمشي بخطوات مبسطة لنكمل المسيرة مع بعض و تكون فاهماً لهذه المقالة بحول الله. 

المقالات السابقة:

 

https://3alam.pro/index.php/articles/javascript/jsx-in-react-reactnative/

https://3alam.pro/index.php/forums/topic/391-%D8%A8%D9%86%D9%8A%D8%A9-%D9%88-%D8%B5%D9%8A%D8%BA%D8%A9-%D8%A3%D9%86%D9%88%D8%A7%D8%B9-%D8%A7%D9%84%D9%85%D9%83%D9%88%D9%86%D8%A7%D8%AA-component-typessyntax-%D9%81%D9%8A-%D9%85%D9%83%D8%AA%D8%A8%D8%A9-react/?do=embed&comment=755&embedComment=755&embedDo=findComment">

https://3alam.pro/index.php/forums/topic/394-%D9%88%D8%B1%D9%82%D8%A9-%D8%A7%D9%84%D8%A3%D9%86%D9%85%D8%A7%D8%B7-stylesheet-%D9%81%D9%8A-react-native/?do=embed&comment=758&embedComment=758&embedDo=findComment">

https://3alam.pro/index.php/forums/topic/395-%D8%A8%D8%B1%D9%85%D8%AC%D8%A9-%D9%88-%D8%A7%D9%86%D8%B4%D8%A7%D8%A1-%D9%82%D9%88%D8%A7%D8%A6%D9%85-%D8%A7%D9%84%D8%AA%D9%85%D8%B1%D9%8A%D8%B1-listview-%D9%81%D9%8A-%D8%AA%D8%B7%D8%A8%D9%8A%D9%82%D8%A7%D8%AA-react-native/

https://3alam.pro/index.php/forums/topic/399-%D8%A7%D9%84%D8%AA%D8%AD%D9%82%D9%82-%D9%85%D9%86-%D9%86%D9%88%D8%B9-%D8%A7%D9%84%D8%A8%D9%8A%D8%A7%D9%86%D8%A7%D8%AA-proptypes-%D9%81%D9%8A-%D9%85%D9%83%D8%AA%D8%A8%D8%A9-react-%D9%88-react-native/

 

من بين أجمل تصاميم الابداعية من شركة آبل عند بناء تطبيقاتك على منصة iOS و التي اعتبرها جيدة جداً لمحبي تجربة المستخدم UX هي أداة تخصيص التاريخ و الوقت (Date Picker) و معروفة بهذا الاسم لبرمجي لغة السويفت (Swfit) .

المكوّن (DatePickerIOS) تعتبر عنصر تحكم (controlled component) يقوم بارجاع قيمة التاريخ أو الوقت الذي أدخله المستخدم في تطبيقك لتضيفه الى قاعدة بياناتك أو حساباتك، تقوم رياكت نيتف باستدعائه كـ API من النظام نفسه أي مكون طبيعي (Native) و لا يعمل على نظام الأندرويد (Android).

من أجل استخدام أداة تخصيص الوقت علينا باستدعاء المكتبة: 

import React, { Component } from 'react'
import {
  DatePickerIOS, // this .. 
  View,
  StyleSheet,
} from 'react-native'

بعد تعريف المكتبة علينا معرفة شيئين مهمّين،اللذين يعطيانا التحكم الدقيق في المكوّن (DatePickerIOS) هما: 

1. المعرّف date: هو الذي يمكننا من تتبع التاريخ المحدد الافتراضي. بأسلوب آخر: يتم تخزين هذه المعلومات داخل حالة المكون (State) الذي يعود ببياناته لـ (DatePickerIOS). ملاحظة:  يجب أن يكون التاريخ (date) مماثلاً لعنصر التاريخ (Date) في جافا سكريبت. وهي مطلوبة.
2. المعرّف onDateChange : مطلوبة هي الأخرى، ويتم تفعيلها عندما يقوم المستخدم بتغيير التاريخ أو الوقت في المكون. 

 

import React, { Component } from 'react'
import {
  DatePickerIOS, // this ..
  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'
  },
})

 

مثال واضح و سهل جداً .. قمنا بتعريف الدالة البانية (constructor) يحوي (props) كما شرحناه سابقاً. 

• في متغيّر الحالة (State) أنشأنا متغيراً اسمه (chosenDate) به دالة التاريخ (Date) المعروفة في الجافاسكربت.
• أنشأنا وظيفة (function) تحتفظ بالتاريخ الجديد الذي أدخله المستخدم بالمتغير (setDate)
• كما أضفنا بعض التنسيقات العامة التي تم شرحها سابقاً. 

 هذه نتيجة التطبيق:

 

 

كما توجد أيضا بعض الدوال (props) هي ليست مطلوبة لكنها اختيارية و مفيدة لتخصيص التاريخ أو الوقت كـ: 

• دالة (maximumDate) - واضحة من اسمها، أنها تحدد لك القيمة الحدية العليا للتاريخ فمثلا نحدد 31 ديسمبر : 

• دالة (minuteInterval) - تحديد الفاصل الزمني بعدد الدقائق التي تريدها، فمثلاً سنحدد الى العدد 10 :

 

• كما هناك دوال أخرى كـ (timeZoneOffsetInMinutes) و (locale) و (mode) كلهم يؤدون وضائف معينة غالباً لا نحتاجها الا للتخصيص بتفاصل أدق.

 

نصل الى نهاية درس اليوم، أي استفسار أو جملة مبهمة لا يردكم الكيبورد نحن متواجون باذن الله للرد على استفساراتكم. دعواتكم لنا. 

كلمات دليلية: تعلم رياكت معنا نيتف