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

xlmnxpمنذ سنتين

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

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

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

https://docs.nativescript.org/angular/code-samples/ui/img/date-picker-image.png

 

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

https://docs.nativescript.org/angular/code-samples/ui/img/time-picker-image.png

 

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

https://docs.nativescript.org/angular/code-samples/ui/img/listpicker-image.png

 

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

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;

الناتج

59ae20e5ba6c9_exampleinplayground.png.e2f46755a9b4f138571c62a9243c250f.png

 

التعليقات (0)

لايوجد لديك حساب في عالم البرمجة؟

تحب تنضم لعالم البرمجة؟ وتنشئ عالمك الخاص، تنشر المقالات، الدورات، تشارك المبرمجين وتساعد الآخرين، اشترك الآن بخطوات يسيرة !