الملحقات (Components): DatePicker و TimePicker و ListPicker

xlmnxpمنذ 6 سنوات

بسم الله الرحمن الرحيم

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

ملحق منتقى التاريخ ( DatePicker ) يقوم بإضافة عجلة تمكن المستخدم من تحديد تاريخ معين.

ملحق منتقى الوقت ( TimePicker ) يقوم بإضافة عجلة تمكن المستخدم من تحديد وقت معين.

ملحق منتقى القائمة ( ListPicker ) يقوم بإضافة عجلة تمكن المستخدم من تحديد عنصر من مصفوفة معينة.

الخصائص المشتركة في الملحقات

isEnabled لتحديد حالة الملحق مفعل او غير مفعل
يتقبل قيمة منطقية ( Boolean ) ام ture او false

خصائص الملحق منتقى التاريخ ( DatePicker )

year لتحديد او جلب السنة في العجلة.
يستقبل رقم ( Number )

month لتحديد او جلب الشهر في العجلة.
يستقبل رقم ( Number )

day لتحديد او جلب اليوم في العجلة.
يستقبل رقم ( Number )

dateChange تشعيل دالة عن تغير التاريخ.

yearChange تشغيل دالة تغير السنة في عجلة التاريخ.

monthChange تشغيل دالة تغير الشهر في عجلة التاريخ.

dayChange تشغيل دالة تغير اليوم في عجلة التاريخ.

خصائص الملحق منتقى الوقت ( TimePicker )

hour لتحديد او جلب الساعة المحدد

 في العجلة.

يستقبل رقم ( Number )

minute لتحديد او جلب الدقيقة المحدد في العجلة.
يستقبل رقم ( Number )

time لتحديد او جلب الوقت المحدد في العجلة.
يستقبل وقت ( Time )

minHour لتحديد او جلب اقل عدد الساعات التي يمكن تحديدها.
يستقبل رقم ( Number )

maxHour لتحديد او جلب اقصى عدد اكثر عدد الساعات التي يمكن تحديدها.
يستقبل رقم ( Number )

minMinute لتحديد او جلب اقل عدد الدقائق التي يمكن تحديدها.
يستقبل رقم ( Number )

maxMinute لتحديد او جلب اقصى عدد الدقائق التي يمكن تحديدها.
يستقبل رقم ( Number )

timeChange تشغيل دالة عند تغير الوقت.

خصائص الملحق منتقى القائمة ( ListPicker )

items لتحديد القائمة
يستقبل مصفوف نصوص ( Array<String> )

selectedIndex لتحديد او جلب مؤشر العنصر المحدد حاليا.
يستقبل رقم ( Number )

selectedIndexChange تشغيل دالة عند تغير مؤشر العنصر المحدد.

مثال على الملحقات

main-page.xml

<Page loaded="pageLoaded" class="page" xmlns="http://www.nativescript.org/tns.xsd">
	<ActionBar title="الملحقات DatePicker و TimePicker و ListPicker" class="action-bar"></ActionBar>

	<GridLayout rows="*,*,*">
		<DatePicker year="{{ currentYear }}" month="{{ currentMonth }}" day="{{ currentDay}}" minDate="1970-01-01" maxDate="2100-12-31" row="0" />
		<TimePicker hour="{{ currentHour }}" minute="{{ currentMinute }}" verticalAlignment="center" row="1"/>
		<ListPicker items="{{ listPickerCountries }}" selectedIndex="{{ selectedListPickerIndex }}" row="2"/>
	</GridLayout>
</Page>

main-page.js

var frameModule = require("ui/frame");
var observableModule = require("data/observable");

function pageLoaded(args) {

    var page = args.object;

    var viewModel = observableModule.fromObject({
        currentHour: new Date().getHours(),
        currentMinute: new Date().getMinutes(),

        listPickerCountries: [
            "الأردن",
            "الإمارات العربية المتحدة",
            "البحرين",
            "الجزائر",
            "السعودية",
            "السودان",
            "الصومال",
            "العراق",
            "الكويت",
            "المغرب",
            "اليمن",
            "تونس",
            "جزر القمر",
            "جيبوتى",
            "سوريا",
            "عمان",
            "فلسطين",
            "قطر",
            "لبنان",
            "ليبيا",
            "مصر",
            "موريتانيا",
        ],
        selectedListPickerIndex: 4,

        currentDay: new Date().getDate(),
        currentMonth: new Date().getMonth() + 1,
        currentYear: new Date().getFullYear(),


    });

    page.bindingContext = viewModel;
}

exports.pageLoaded = pageLoaded;

الناتج

أعجبني تابع شارك الدرس

المحاضر

xlmnxp

تابعني

محتوى الدورة

البداية
1	مدخل الى nativescript
2	تثبيت nativescript cli على جهازك
3	بناء اول مشروع لك بواسطة NativeScript
التخطيطات ( Layouts )
1	مدخل الى التخطيطات ( Layouts ) في NativeScript
2	التخطيط العائم ( AbsoluteLayout )
3	التخطيط الرصيفي ( DockLayout )
4	التخطيط الشبكي ( GridLayout )
5	التخطيط المكدس ( StackLayout )
6	التخطيط الدوراني ( WrapLayout )
7	التخطيط المرن ( FlexboxLayout )
ملحقات واجهة المستخدم ( UI Components )
1	مدخل الى ملحقات الواجهة ( UI Components ) في NativeScript
2	الملحقات (Components): Label و Button و TextView و TextField
3	الملحقات (Components): SearchBar و Switch
4	الملحقات (Components): Progress و Slider
5	الملحقات (Components): ActivityIndicator و Image
6	الملحقات (Components): ListView و HtmlView و WebView
7	الملحقات (Components): TabView و SegmentedBar
8	الملحقات (Components): DatePicker و TimePicker و ListPicker الدرس الحالي
9	الملحق ( Component ): Dialogs