• بيت
  •  > 
  • خدمات
  •  > 
  • يتضمن تقويم منتقي التاريخ أحداثًا من فئة معينة. تقويم مسج (منتقي التاريخ)

يتضمن تقويم منتقي التاريخ أحداثًا من فئة معينة. تقويم مسج (منتقي التاريخ)

لقد عثرت على تقويم jQuery مريح وعملي للغاية!

بادئ ذي بدء، لقد جعلتها روسية، لأنها في الأصل هي الإنجليزية وغيرت قليلاً طريقة عرض رمز التقويم لاختيار التاريخ. النسخة الأصلية التي يمكن العثور عليها.

إنه يتصل، كما هو الحال دائمًا، بكل بساطة!

في السطر 1، jQuery المفضل لدينا، السطر 2 - إعدادات التقويم، السطر 3 - التقويم نفسه، ونمطه - السطر 4.

الآن سألقي نظرة على عدة طرق للاتصال.

1. التقويم العادي باستخدام jQuery

$(function() ( $("#inputDate1").datePicker(); ));

حقل الإدخال:

2. التقويم بنطاق معين

تقويم بتواريخ نشطة من 01/01/2000 إلى 01/01/2012، يتم الاتصال به بالضغط على أيقونة التقويم.

$(function() ( $("#inputDate2").datePicker(( تاريخ البداية: "01-01-2000"، تاريخ النهاية: "01-01-2012" )); ));

حقل الإدخال:

3. اتصل بالضغط على حقل الإدخال

تقويم عادي بدون أيقونة تقويم، يتم استدعاؤه بالنقر فوق حقل الإدخال.

$(function() ( $("#inputDate3").datePicker(( createButton:false, clickInput:true )); ));

حقل الإدخال:

4. التقويم السنوي

التقويم بتاريخ نشط لمدة عام من اليوم، يتم استدعاؤه بالنقر فوق حقل الإدخال.

$(function() ( $("#inputDate4").datePicker(( createButton:false, clickInput:true, endDate: (new Date()).addDays(365).asString() )); ));

حقل الإدخال:

5. التقويم مع أيام العمل النشطة

تقويم بأيام العمل النشطة (ما عدا السبت والأحد) بتاريخ بعد سنة من اليوم، يتم الاتصال به من خلال النقر على حقل الإدخال ومن خلال النقر على أيقونة التقويم.

$(function() ( $("#inputDate5").datePicker(( clickInput:true, endDate: (new Date()).addDays(365).asString(), renderCallback:function($td, thisDate,month, year) ( if (thisDate.isWeekend()) ( $td.addClass("weekend"); $td.addClass("disabled"); ) ) ));

حقل الإدخال:

6. التقويم مع زر "إغلاق".

التقويم مع زر "إغلاق"، يتم الاتصال به من خلال النقر على أيقونة التقويم. بعد تحديد التاريخ، فإنه لا يغلق. عند النقر فوق حقل الإدخال، تتم معالجة وظيفة "النقر".

$(function() ( $("#inputDate6").datePicker((displayClose:true, CloseOnSelect:false )).bind("click", function() ( تنبيه("انقر فوق العمل!"); )); ) );

حقل الإدخال:

7. ابدأ بعد 5 أيام من اليوم

تقويم تبدأ أيامه النشطة بعد 5 أيام من تاريخ اليوم، ويتم استدعاؤه بالنقر فوق حقل الإدخال. بعد تحديد التاريخ، تتم معالجة وظيفة "التاريخ المحدد"، والتي تقوم باستدعاء رسالة بالتاريخ المحدد وتخصيصها للحقل السابق. بعد إغلاق التقويم، تتم معالجة وظيفة "dpClosed".

$(function() ( $("#inputDate7") .datePicker(( createButton:false, startDate: (new Date()).addDays(-5).asString(), clickInput:true)) .bind("dpClosed" "، function(e, SelectedDate) ( تنبيه("تم تشغيل dpClosed"); )).bind("dateSelected", function(e, SelectedDate, $td) ( تنبيه("تم تشغيل dateSelected, " + SelectDate.asString( )) ; $("#inputDate7").val(selectedDate.asString()); $("#inputDate6").dpSetSelected(selectedDate.addDays(0).asString());

حقل الإدخال:

8. التقويم في حاوية DIV

التقويم في حاوية DIV، عندما يتغير التاريخ، تتم معالجة وظيفة "التاريخ المحدد".

$(function() ( $("#inputDate8") .datePicker((inline:true)) .bind("dateSelected"،function(e, SelectedDate, $td) ( تنبيه(selectedDate.asString()); )) ;));

حاوية DIV:

ليس من الصعب توصيل برنامج نصي لتعيين التاريخ بسرعة في أحد الحقول، وهناك الكثير من نصوص JS النصية لهذا الغرض على الإنترنت. وفي هذه المقالة سأقوم بنشر الكود النهائي لـ WordPress.

المهمة هي كما يلي: لدينا حقل إدخال ونحتاج إلى التأكد من أنه عند وضع المؤشر في هذا الحقل، يظهر تقويم، حيث يمكنك تحديد تاريخ (يوم من الشهر) ويتم ملء الحقل تلقائيًا بـ الرقم المحدد بالتنسيق المطلوب. يجب أن يكون التقويم مع الترجمة الروسية. تحدث هذه المهمة كثيرًا وأعتقد أنه سيكون من المناسب أن يكون لديك كود جاهز في متناول اليد.

    الصفحة الرئيسية للمكون الإضافي jQuery Datepicker: https://jqueryui.com/datepicker/ - ستجد هنا أمثلة مختلفة لاستخدام Datepicker؛

  • صفحة لتحديد سمات CSS لـ jQuery UI - http://jqueryui.com/themeroller/ - هنا يمكنك تحديد سمة jQuery UI جاهزة أو في علامة التبويب Roll Your Own - قم بتخصيص السمة الافتراضية لنفسك: الألوان والخلفيات، تقريب الزوايا، وما إلى ذلك؛
كود Datepicker جاهز لـ WordPress

من السهل توصيل jQuery Datepicker في WordPress، لأنه يأتي مرفقًا مع WordPress ولتوصيله تحتاج إلى إدراج سطرين فقط: توصيل البرنامج النصي نفسه وتوصيل أنماط CSS. وبعد ذلك تحتاج فقط إلى تشغيل وظيفة js datepicker() على الوظيفة المطلوبة.

يمكن إدراج هذا الكود في أي مكان في ملف php، وليس بالضرورة قبل إخراج رأس get_header()، يمكنك مباشرة في نص مستند HTML - سيعمل الكود:

jQuery(document).ready(function($)( "use الصارم"; // الإعدادات الافتراضية. يمكن إضافتها إلى ملف js الموجود // إذا كان منتقي التاريخ سيتم استخدامه خلال المشروع وكنت تخطط لتشغيله باستخدام إعدادات مختلفة الإعدادات $.datepicker .setDefaults(( CloseText: "Close"، prevText: ""، النص الحالي: "اليوم"، أسماء الشهر: ["يناير"، "فبراير"، "مارس"، "أبريل"، "مايو"، "يونيو" "،"يوليو "،"أغسطس"، "سبتمبر"، "أكتوبر"، "نوفمبر"، "ديسمبر"]، MonthNamesShort: ["يناير"، "فبراير"، "مارس"، "أبريل"، "مايو"، "يونيو"، "يوليو"، "أغسطس"، "سبتمبر"، "أكتوبر"، "نوفمبر"، "ديسمبر"]، أسماء الأيام: ["الأحد"، "الاثنين"، "الثلاثاء"، "الأربعاء"، "الخميس" ""، "الجمعة"، "السبت"]، dayNamesShort: ["الأحد"، "الاثنين"، "الثلاثاء"، "الأربعاء"، "الخميس"، "الجمعة"، "السبت"]، dayNamesMin: ["الشمس"، "Mon"، "Tue"، "Wed"، "Thu"، "Fri"، "Sat"]، رأس الأسبوع: "أسبوع"، تنسيق التاريخ: "dd-mm-yy"، اليوم الأول: 1، showAnim: "slideDown" , isRTL: false , showMonthAfterYear: false, yearSuffix: "" )); // التهيئة $("input, .datepicker").datepicker(( dateFormat: "dd/mm/yy" )); // يمكنك الاتصال بـ منتقي التاريخ مع إضافي. إعدادات مثل هذه: /* $("input").datepicker(( dateFormat: "yy-mm-dd"، onSelect: function(dateText, inst)( // وظيفة للحقل الذي يُشار إليه أيضًا بالثواني: 000-00 -00 00:00:00 - يترك الثواني var secs = inst.lastVal.match(/^.*?\s((2):(2):(2))$/); // 00:00" فقط hh:mm:ss، اترك الساعات والدقائق والثواني كما هي، وإذا لم تكن كذلك فستكون 00:00:00 $(this).val(dateText +" "+ secs ) )); */ ));

تحليل بسيط للكود:

Wp_enqueue_script("jquery-ui-datepicker");

يمكّن هذا السطر كافة البرامج النصية الضرورية باستخدام wp_enqueue_script() ، بما في ذلك jQuery نفسه. إذا كان jQuery متصلاً بالفعل، فلن يتم الاتصال.

Wp_enqueue_style("jqueryui", "//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css", false, null);

يمكّن هذا السطر أنماط CSS باستخدام wp_enqueue_style() . لم يتم تضمين أنماط واجهة المستخدم jquery في مجموعة WordPress، لذلك نقوم بتوصيلها بشكل منفصل (من مكتبة البرامج النصية من Google). السلاسة في هذا السطر هي اسم سمة jquery ui ويمكن استبدالها، على سبيل المثال، بـ redmond أو ui-lightness - قائمة كاملة من السمات (لإدراجها في سطر، في اسم السمة، تحتاج إلى استبدال الأحرف الكبيرة بأحرف صغيرة ومسافات مع الواصلات).

// add_action("admin_footer"، "init_datepicker"، 99)؛ // للوحة الإدارة add_action("wp_footer", "init_datepicker", 99); // للجزء الأمامي

تقوم هذه الأسطر بتوصيل الدالة init_datepicker() بتذييل الموقع. تقوم الوظيفة بإخراج برنامج نصي يقوم بتشغيل منتقي التاريخ لحقول الإدخال المحددة. يتم تحديد الحقل الذي سيتم تجربة منتقي التاريخ عليه في السطر:

$("الإدخال، .datepicker").datepicker();

سيقوم هذا السطر بتشغيل منتقي التاريخ لجميع حقول الإدخال التي تحتوي سمة اسمها على السلسلة الفرعية "التاريخ" أو إذا كان حقل الإدخال يحتوي على فئة منتقي التاريخ. أولئك. أي من هذه الحقول سوف يطابق هذا الرمز.

القطعة منتقي التاريخ

تتناول هذه المقالة أداة Datepicker - وهو تقويم تفاعلي مناسب يجعل إدخال التواريخ أسهل. يمثل تلقي معلومات التقويم كنص من المستخدمين تحديًا دائمًا نظرًا لوجود العديد من التنسيقات المختلفة للتعبير عن التواريخ. تعمل أداة Datepicker على تسهيل تحديد التاريخ وتقديمه بطريقة متسقة، مما يقلل من احتمالية حدوث أخطاء.

إنشاء أداة منتقي البيانات

هناك طريقتان رئيسيتان لإنشاء عنصر واجهة مستخدم Datepicker. الطريقة الأكثر شيوعًا لإرفاقه بعنصر الإدخال هي استخدام طريقة datepicker (). لا يؤدي هذا إلى تغيير مظهر العنصر على الفور، ولكن بمجرد أن يتلقى العنصر تركيز الإدخال (بالنقر عليه أو الانتقال إليه من العناصر الأخرى باستخدام المفتاح)، سيتم عرض تقويم بجانبه، يمكنك من خلاله حدد التاريخ المطلوب.

تسمى التقاويم من النوع الموصوف التقويمات المنبثقة. ويرد أدناه مثال لإنشاء مثل هذا التقويم:

إدخال واجهة مستخدم jQuery (العرض: 200 بكسل؛ محاذاة النص: لليسار) $(function() ( $("#datep").datepicker(); )); تاريخ:

توضح الصورة ما يحدث عند نقل التركيز إلى حقل الإدخال:

يمكن للمستخدم إما إدخال التاريخ يدويًا أو تحديده باستخدام التقويم. بمجرد أن يفقد عنصر الإدخال التركيز أو يضغط المستخدم على المفتاح (أو)، سيختفي التقويم.

توطين القطعة Datepicker

كما ترون، في المثال الموضح، يتم عرض التقويم باللغة الإنجليزية. توفر أداة jQuery UI Datepicker دعمًا شاملاً إلى حد ما لمختلف معايير تنسيق التاريخ المستخدمة حول العالم، بما في ذلك 61 خيارًا للترجمة. للوصول إليها، تحتاج إلى استيراد برنامج نصي مساعد لـ JavaScript في مستندك وإخبار عنصر واجهة مستخدم Datepicker بخيار الترجمة الذي يجب استخدامه. ويرد أدناه مثال مماثل:

... ... $(function() ( $("#datep").datepicker($.datepicker.regional["ru"]); )); ...

يوجد ملف jquery-ui-i18n.js في مجلد Development-bundle/ui/i18n الخاص بملف أرشيف مكتبة jQuery UI، والذي يجب عليك تنزيله من jqueryui.com. انسخه إلى نفس المجلد الذي يوجد به الملف المصدر وأضفه إلى المستند كما هو موضح في الكود. تظهر النتيجة في الشكل:

إنشاء تقويم Datepicker مدمج

تتضمن الطريقة الثانية لاستخدام عنصر واجهة مستخدم Datepicker تضمينها في مستند. للقيام بذلك، حدد عنصر div أو عنصر SPAN باستخدام jQuery واستدعاء الأسلوب datepicker() . يتم عرض التقويم المضمن طالما أن عنصر HTML الذي يعتمد عليه مرئي. فيما يلي مثال لإنشاء تقويم مدمج:

تسمية واجهة مستخدم jQuery (الهامش الأيمن: 12 بكسل؛ ) الإدخال (العرض: 200 بكسل؛ محاذاة النص: اليسار؛ الهامش الأيمن: 10 بكسل) #wrapper > * (float: left) $(function() ( $("#inline" ).datepicker($.datepicker.regional["ru"] )); تاريخ:

يستخدم هذا المثال عنصر الامتداد كعنصر HTML الأساسي لإنشاء عنصر واجهة مستخدم Datepicker. تظهر النتيجة في الشكل:

يمكن أن يكون التقويم المضمن مفيدًا إذا كنت لا ترغب في العمل مع الكائنات المنبثقة. بالطبع، هناك تطبيقات يكون فيها العمل مع التواريخ مكثفًا للغاية بحيث يكون من المنطقي أن يكون لديك دائمًا تقويم في متناول اليد. ولكن في معظم الحالات، يكون من المنطقي ترك التقويم مخفيًا حتى تحتاج إليه.

تكمن صعوبة إخفاء أداة Datepicker المضمنة وإظهارها في أن إضافتها إلى مستند تتطلب تغيير تخطيط الصفحة، مما قد يتسبب في حدوث مشكلات في العرض التقديمي. من وجهة نظري، يكون استخدام الأداة المنبثقة أكثر ملاءمة في معظم المواقف.

إعداد القطعة Datepicker

إذا كنت قد تعاملت مع معالجة التاريخ من قبل، فأنت تدرك جيدًا مدى صعوبة العمل مع هذه الفئة من البيانات. إن انعكاس هذا التعقيد هو تنوع الخصائص التي تدعمها أداة Datepicker. الأقسام التالية مخصصة لوصف مجموعات الخصائص ذات الصلة التي تم تكوين عنصر واجهة المستخدم هذا بها.

الإعدادات الأساسية

يتم استخدام العديد من خيارات التكوين لتكوين الخصائص الأساسية للتقويمات المنبثقة والمضمنة. تعتبر هذه الخصائص مهمة للغاية لأنها تسمح لك بالتحكم في كيفية دمج الأداة في المستند. وترد قائمتهم في الجدول أدناه:

الخصائص الأساسية لعنصر واجهة مستخدم Datepicker وصف العقار
altField يسمح لك بتحديد حقل إضافي سيتم تحديثه عند تحديد تاريخ في التقويم
ButtonImageOnly يحدد أنه يجب استخدام الصورة المحددة بواسطة خيار الصورة بدلاً من الزر الثانوي لفتح التقويم.
ButtonImage يحدد عنوان URL للصورة المستخدمة للزر الثانوي المفتوح للتقويم المنبثق. لا تستخدم افتراضيا
زر كتابة يحدد النص الذي سيتم عرضه على الزر المفتوح للتقويم المنبثق. النص الافتراضي هو علامة الحذف (...)
defaultDate يتيح لك ضبط التاريخ الذي سيتم تمييزه عند فتح التقويم
عاجز يشير إلى ما إذا كان يجب تعطيل الأداة في البداية. القيمة الافتراضية خاطئة
showOn يحدد الإجراء الذي يؤدي إلى فتح التقويم المنبثق. القيمة الافتراضية هي التركيز
تحديد التاريخ الافتراضي

الإعداد الأبسط هو أيضًا الأكثر فائدة. باستخدام خيار التاريخ الافتراضي، يمكنك تحديد تاريخ سيتم تمييزه تلقائيًا عند فتح التقويم.

إذا لم يتم تعيين خيار التاريخ الافتراضي، فسيتم استخدام التاريخ الحالي بدلاً من ذلك. (بالطبع، يشير هذا إلى التاريخ المحدد على نظام المستخدم. يمكن أن تتسبب المناطق الزمنية أو التوقيت الصيفي أو التكوينات الخاطئة في أن التاريخ المعروض للمستخدم ليس هو التاريخ الذي تتوقعه.)

يُستخدم هذا الخيار فقط في حالة عدم وجود سمة قيمة في عنصر الإدخال. إذا كانت هذه السمة موجودة (سواء تم تضمينها في المستند بواسطتك أو كانت نتيجة اختيار مسبق من قبل المستخدم)، فسوف يستخدم عنصر واجهة مستخدم Datepicker قيمتها.

إذا كنت تريد فتح التقويم بتاريخ بدء مختلف، فيمكنك تعيينه باستخدام إحدى الطرق الموضحة في الجدول أدناه:

القيم المحتملة لخيار التاريخ الافتراضي وصف القيمة
باطل يتم استخدام التاريخ الحالي
كائن التاريخ يستخدم القيمة الممثلة ككائن تاريخ JavaScript
+أيام، -أيام يستخدم تاريخًا يختلف عن التاريخ الحالي بعدد محدد من الأيام. لذا، +3 يعني التاريخ الذي سيحدث بعد ثلاثة أيام من اليوم الحالي، و-2 يعني تاريخًا قبل يومين
+1د +7 واط -1 م +1 ص يتم استخدام التاريخ الذي يتم قياسه من التاريخ الحالي ويتم التعبير عنه بعدد الأيام (d) والأسابيع (w) والأشهر (m) والسنوات (y) التي تحدد مقدار إزاحة التاريخ للأمام (+) أو إلى الوراء (-) في الوقت المناسب. يُسمح بخلط القيم الموجبة والسالبة في تاريخ واحد. على سبيل المثال، مجموعة القيم -1d +1m، المستخدمة بالتزامن مع تاريخ 12 نوفمبر 2011، تتوافق مع 11 ديسمبر 2011

فيما يلي مثال على استخدام خيار defauitDate لتحديد تاريخ بعد خمس سنوات من الآن:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( defaultDate: "+5y" )); ));

لنفترض أن التاريخ الحالي هو ديسمبر 2013. ثم، كما هو موضح في الشكل أدناه، فإن التاريخ المحدد بقيمة خيار defauitDate يتوافق مع شهر ديسمبر 2018:

سوف تواجه التنسيق الموضح للإشارة إلى التواريخ النسبية أكثر من مرة. وهذا تنسيق مرن للغاية يوفر الدقة اللازمة. بنفس الطريقة كما في المثال، يمكنك حذف أي فاصل زمني لا تنوي تغييره. على سبيل المثال، بدلاً من القيمة "+0d +0w +0m +5y" من الممكن تمامًا استخدام القيمة "+5y". والشيء الجميل في هذا التنسيق هو أنه يسمح لك بخلط القيم الإيجابية والسلبية لفترات مختلفة، مما يسمح لك بتحديد التاريخ المطلوب بدقة.

تحديد حدث يؤدي إلى فتح تقويم منبثق

يتيح لك خيار showOn التحكم في الحدث الذي يجب أن يتم عرض التقويم المنبثق ردًا عليه. يمكن أن يأخذ هذا الخيار إحدى القيم الثلاث:

ركز

يتم فتح التقويم المنبثق عندما يتلقى عنصر الإدخال التركيز. هذه هي القيمة الافتراضية.

زر

يتم فتح التقويم المنبثق بالنقر فوق الزر.

كلاهما

يظهر التقويم المنبثق عند النقر فوق الزر وعندما يتلقى عنصر الإدخال التركيز.

إذا كنت تستخدم الزر أو القيمتين معًا، فسيقوم عنصر واجهة مستخدم Datepicker بإنشاء عنصر زر ووضعه في المستند مباشرةً بعد عنصر الإدخال. فيما يلي مثال لاستخدام خيار showOn:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "كلاهما" )); ));

كما هو موضح في الشكل، ظهر زر في المستند. نظرًا لأنه تم تعيين خيار showOn على كليهما في هذا المثال، فسيتم عرض التقويم المنبثق عند النقر فوق الزر وعندما يتلقى عنصر الإدخال التركيز.

الزر الذي تمت إضافته بواسطة عنصر واجهة مستخدم Datepicker ليس عنصر واجهة مستخدم jQuery UI Button. إذا كنت تريد أن تكون جميع الأزرار من نفس النوع، فحدد عنصر زر واستدعاء طريقة jQuery UI Button() .

يمكن تصميم عنصر الزر باستخدام خيارات ButtonImage وbuttonText. إذا قمت بتعيين خيار ButtonImage على عنوان URL لصورة ما، فسوف تقوم أداة Datepicker بوضع تلك الصورة على الزر. بالإضافة إلى ذلك، يمكن استبدال النص الافتراضي المرتبط بالزر (علامة القطع) بنص آخر باستخدام خيار ButtonText، كما هو موضح في المثال أدناه:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "كلاهما"، ButtonText: "Select" )); ) );

باستخدام خياري ButtonImage وbuttonImageOnly معًا، يمكنك التخلص من الزر تمامًا واستبداله بصورة. ويرد أدناه مثال مماثل:

تسمية واجهة مستخدم jQuery (الهامش الأيمن: 12 بكسل) الإدخال (العرض: 200 بكسل؛ محاذاة النص: اليسار) #dpcontainer * (محاذاة عمودية: الأوسط) #dpcontainer img (العرض: 35 بكسل؛) $(function() ( $.datepicker .setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOn: "both", ButtonImage: "right.png", ButtonImageOnly: true )); تاريخ:

يضبط هذا المثال الصورة على right.png ويضبط خيار ButtonImageOnly على true. بالإضافة إلى ذلك، تمت إضافة العديد من أنماط CSS إلى المستند للتحكم في موضع الصورة بالنسبة إلى عناصر التسمية والإدخال. لا يمكن لعنصر واجهة المستخدم Datepicker معرفة مكان وضع عنصر img بالضبط، لذلك كان لا بد من تطبيق أنماط CSS لوضع عنصر img بشكل صحيح في المستند. تظهر نتيجة استخدام الصورة بدلاً من الزر في الشكل:

التحكم في اختيار التاريخ

الغرض من عنصر واجهة مستخدم Datepicker هو السماح للمستخدم بتحديد تاريخ، ولكن في كثير من الحالات يلزم وضع بعض القيود على هذه العملية. يصف الجدول أدناه الإعدادات التي تسمح لك بتعيين القيود التي تجبر المستخدم على تحديد التواريخ الصالحة فقط:

خصائص عنصر واجهة مستخدم منتقي التاريخ التي توفر التحكم في تحديد التاريخ وصف العقار
ChangeMonth إذا كان هذا الخيار صحيحًا، فسيعرض التقويم قائمة منسدلة تسمح لك بالتنقل مباشرة حسب الشهر. القيمة الافتراضية خاطئة
ChangeYear إذا كان هذا الخيار صحيحًا، فسيعرض التقويم قائمة منسدلة تتيح لك التنقل مباشرةً حسب السنة. القيمة الافتراضية خاطئة
تقييد الإدخال إذا كان هذا الخيار صحيحًا، فإن عنصر واجهة مستخدم Datepicker يتحقق من تطابق محتويات حقل الإدخال مع تنسيق التاريخ المحدد. القيمة الافتراضية صحيحة
إخفاءIfNoPrevNext إذا كان هذا الخيار صحيحًا، فستكون الرموز التي تسمح لك بالتحرك للأمام والخلف في التقويم بالنسبة إلى التاريخ المعروض مخفية تمامًا، بدلاً من تعطيلها ببساطة. القيمة الافتراضية خاطئة
التاريخ الأقصى يحدد الحد الأقصى للتاريخ المتاح للاختيار. افتراضيا لا يوجد أي قيود
minDate يحدد الحد الأدنى للتاريخ المتاح للاختيار. افتراضيا لا يوجد أي قيود
عدد الأشهر تحديد عدد الأشهر التي يتم عرضها في وقت واحد في التقويم. القيمة الافتراضية هي 1
showCurrentAtPos إذا تم تعيين التقويم لعرض عدة أشهر مرة واحدة، فإن هذا الخيار يحدد رقم الموضع الذي يجب أن يتم عرض الشهر الحالي أو الافتراضي فيه. القيمة الافتراضية هي 0
com.stepMonths يحدد عدد الأشهر للأمام أو للخلف التي يجب نقل التاريخ المعروض في التقويم عند النقر فوق زر الوقت للأمام أو للخلف
النطاق السنوي يحدد نطاق السنوات المتاحة للاختيار في القائمة المنسدلة المضافة باستخدام خيار ChangeYear. بشكل افتراضي، تتضمن هذه القائمة السنوات العشر السابقة والسنوات العشر التالية والعام الحالي.
قيود الأحرف والنطاق الزمني

من خلال تعيين خيار constrainInput على true، يمكنك قصر إدخال الأحرف في حقل النص على تلك الأحرف التي تتوافق مع تنسيق محدد بدقة فقط. يتم تحديد مجموعة الأحرف المسموح بها من خلال إعدادات الترجمة التي تمت مناقشتها أعلاه. إذا لم تتم ترجمة عنصر واجهة مستخدم Datepicker، فيمكنك توقع أن تتضمن الأحرف المسموح بها أرقامًا وحرف الشرطة المائلة للأمام (/) فقط.

لا يعني استخدام القيمة المحددة لخيار constrainInput أن المستخدم لن يتمكن من إدخال تاريخ غير صالح، مثل 99/99/99، ولكنه يقلل بشكل كبير من احتمالية حدوث أخطاء. يعد هذا الإعداد أكثر أهمية إذا تم ضبط خيار showOn على زر، حيث لن يتم فتح التقويم المنبثق تلقائيًا عندما يتلقى حقل الإدخال التركيز.

يرغب المستخدمون عمومًا في استخدام التقويم لتحديد تاريخ، ولكن يجب عليهم رؤيته للقيام بذلك. إذا لم يتم عرض التقويم على الشاشة، فلن يدرك كل مستخدم أنه لفتح التقويم يكفي النقر فوق الزر. أي خيار تمنحه للمستخدم لإدخال تاريخ مباشرة في حقل نصي يزيد من احتمالية أن يكون تنسيق التاريخ الذي يدخله غير صحيح. فيما يلي مثال على استخدام خيار constrainInput:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( constrainInput: true, minDate: "-3"، maxDate: "+ 1" )); )));

هنا، يتم تعيين القيمة true لخيار constrainInput للتوضيح فقط، نظرًا لأنها القيمة الافتراضية لهذا الخيار. يتيح لك الخياران المتبقيان تحديد نطاق التواريخ المتاحة للاختيار إلى الحد الأدنى والحد الأقصى للتاريخ.

كما هو الحال مع خيار defaultDate الذي تمت مناقشته سابقًا، يمكن أن تكون قيم خيارات minDate وmaxDate فارغة (تاريخ غير محدد)، وكائن JavaScript Date، وعدد من الأيام، وسلسلة تاريخ نسبية. في هذا المثال، تم تحديد التمثيل الرقمي للإشارة إلى عدد الأيام بالنسبة للتاريخ الحالي.

في الشكل يمكنك أن ترى أن Datepicker يقوم بتعطيل خلايا التقويم غير القابلة للتحديد:

يرجى ملاحظة أنه يتم تعطيل أزرار الشهر تلقائيًا إذا لم تكن هناك حاجة إليها. توجد هذه الأزرار في الجزء العلوي الأيسر والأيمن من التقويم وتسمح لك بالانتقال بسرعة إلى الشهر التالي أو السابق. كما هو موضح في الشكل، جميع التواريخ القابلة للتحديد موجودة في الشهر الحالي، وبالتالي يتم تعطيل كلا الزرين. في مثل هذه المواقف، يمكن إخفاء هذه الأزرار تمامًا إذا لزم الأمر عن طريق ضبط خيار إخفاء IfNoPrevNext على true.

لا يجب أن تكون قيمة minDate في الماضي وقيمة maxDate في المستقبل، ولا يجب أن تكون كلا القيمتين في نفس الوقت. للسماح للمستخدم بتحديد تواريخ من نطاق يسبقه فترة "تحضيرية"، يمكنك ضبط خيار minDate على قيمة في المستقبل، وبالتالي منع المستخدم من تحديد تواريخ خلال تلك الفترة، كما هو موضح في المثال أدناه :

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( minDate: "+4" )); ))

في هذا المثال، حددنا أنه لا ينبغي للمستخدم أن يكون قادرًا على تحديد تواريخ أقدم من 4 أيام بعد التاريخ الحالي. خيار maxDate غير محدد، مما يعني أن المستخدم سيكون قادرًا على تحديد أي تاريخ بعد "فترة التأخير" المحددة. تظهر النتيجة في الشكل:

لاحظ أن زر الشهر التالي ممكّن في هذه الحالة، بينما يتم تعطيل زر الشهر السابق (نظرًا لعدم وجود تواريخ سابقة متاحة ليختارها المستخدم).

يعمل خيارا minDate وmaxDate جنبًا إلى جنب مع خيار defaultDate، مما يعني أن ربط النطاقات بالتاريخ الحالي أمر اختياري.

قم بإنشاء تقويم يعرض عدة أشهر في وقت واحد

تسمح لك أداة Datepicker بتعيين عدد الأشهر التي يجب عرضها في الوقت نفسه في التقويم باستخدام خيار numberOfMonths. يمكن القيام بذلك عن طريق تحديد عدد الأشهر المطلوبة، أو مجموعة من عنصرين يحددان أبعاد شبكة التقويم الشهري.

يطبق المثال أدناه نهجًا قائمًا على المصفوفة، والذي أجده أكثر ملاءمة لعناصر واجهة مستخدم Datepicker المضمنة، نظرًا لأن حجم الشبكة غالبًا ما يكون كبيرًا جدًا بالنسبة لعناصر واجهة المستخدم المنبثقة (سنعود إلى هذا لاحقًا).

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( numberOfMonths: )); ));

يحدد هذا المثال شبكة تقويم يبلغ ارتفاعها شهرًا واحدًا وعرضها ثلاثة أشهر. تظهر النتيجة في الشكل:

مصفوفة مكونة من عنصرين تعادل القيمة الرقمية 3. إذا تم تحديد قيمة خيار numberOfMonths كرقم، فإن عنصر واجهة المستخدم يعرض عدد الأشهر المقابل في صف واحد.

السبب الذي يجعلني نادرًا ما أستخدم هذا الأسلوب عند العمل مع التقويمات المنبثقة هو أنه مع الشبكات الكبيرة، يتعين عليك وضع افتراضات معينة حول نافذة المتصفح وأحجام العرض. إن نافذة عنصر واجهة المستخدم المنبثقة Datepicker ليست مربع حوار لنظام التشغيل. إنه عنصر HTML مصمم بذكاء ويظهر كجزء من مستند HTML. وهذا يعني أنه عند عرض شبكات تقويم كبيرة على شاشة صغيرة أو في نافذة متصفح صغيرة، فإن معظم المعلومات المتبقية الموجودة في المستند ستظهر خارج الشاشة.

توفير الوصول المباشر إلى الأشهر والسنوات

بدلاً من مجرد عرض الأشهر والسنوات في رأس التقويم، يمكنك توفير الوصول المباشر إلى الفترات الزمنية ذات الصلة باستخدام القوائم المنسدلة. توفر هذه الميزة السرعة عندما يتعين على المستخدمين تحديد تواريخ من نطاق واسع من التواريخ المحتملة، ويتم تنفيذها باستخدام خياري ChangeMonth وchangeYear.

سيؤدي تعيين أي من هذه الخيارات إلى صحيح إلى تمكين القائمة المنسدلة المقابلة، ويمكنك التحكم بشكل مستقل في تمكين القوائم. ويرد أدناه مثال على استخدام هذه الخيارات:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( ChangeMonth: صحيح، ChangeYear: صحيح، yearRange: "-1:+ 2" )); ));

في هذا السيناريو، يتم تمكين كلا القائمتين المنسدلتين. بالإضافة إلى ذلك، يتم استخدام خيار yearRange لتحديد نطاق السنوات التي يُسمح للمستخدم بالانتقال بينها. يتم تحديد النطاق المطلوب باستخدام القيمة "-1:+2"، مما يعني أن التقويم يسمح للمستخدم بالتحرك خلال عام واحد للخلف وسنتين للأمام من العام الحالي.

تظهر القوائم المنسدلة ونطاق السنة المحدد في الشكل:

عند تحديد نطاقات السنوات، يمكنك استخدام خيار yearRange لتحديد السنوات الفعلية. لذلك، في هذا المثال، يمكنك تحديد القيمة: "2012:2015".

التحكم في مظهر أداة Datepicker

هناك عدد من الخصائص التي تسمح لك بتخصيص مظهر عنصر واجهة مستخدم Datepicker عند عرضه للمستخدم. بالنسبة لمهام انتقاء التاريخ الشائعة، يمكنك الاكتفاء بمظهر التقويم الافتراضي الذي اعتدت عليه بالفعل من الأمثلة السابقة، ولكن القدرة على تخصيص المظهر ليناسب احتياجات تطبيق الويب المحدد الخاص بك مفيدة للغاية.

يتم عرض الخصائص التي تسمح لك بتغيير مظهر عنصر واجهة مستخدم Datepicker في الجدول أدناه:

الخصائص التي تسمح لك بالتحكم في مظهر عنصر واجهة مستخدم Datepicker وصف العقار
appendText يحدد نص تلميح الأداة الذي يحتوي على معلومات إضافية، مثل شرح تنسيق التاريخ، والتي سيتم إدراجها في المستند بعد عنصر الإدخال
CloseText يضبط النص لزر إغلاق التقويم الذي يظهر على شريط الأزرار المساعدة عند تمكينه. القيمة الافتراضية هي "إغلاق"
text.currentText يضبط النص لزر العودة إلى الشهر الحالي الذي يظهر على شريط الأزرار المساعد عند تمكينه. القيمة الافتراضية هي "اليوم"
مدة يضبط سرعة أو مدة الرسوم المتحركة المحددة بواسطة خيار showAnim. القيمة الافتراضية طبيعية
com.gotoCurrent إذا كان هذا الخيار صحيحًا، فسيعود زر اليوم الموجود في شريط الأزرار المساعد، إذا تم تمكينه، إلى التاريخ المحدد بدلاً من التاريخ الحالي. القيمة الافتراضية خاطئة
حددأشهر أخرى إذا كان هذا الخيار صحيحًا، فإن التواريخ المعروضة كنتيجة لتعيين خيار showOtherMonths على true تصبح متاحة للتحديد.
com.showAnim يحدد نوع الحركة المستخدمة لإظهار وإخفاء التقويمات المنبثقة. القيمة الافتراضية خاطئة
showButtonPanel إذا كان هذا الخيار صحيحًا، فسيعرض التقويم لوحة مساعدة تحتوي على أزرار تسمح للمستخدم بالانتقال إلى التاريخ الحالي و(إذا تم استخدام عنصر واجهة مستخدم منبثق) لإغلاق التقويم. القيمة الافتراضية خاطئة
showOptions يضبط خيارات الرسوم المتحركة المحددة بواسطة خيار showAnim
showOtherMonths إذا كان هذا الخيار صحيحًا، فسيتم ملء الحقول الفارغة في شبكة التقويم بتواريخ من الأشهر السابقة والأشهر اللاحقة. القيمة الافتراضية خاطئة
showWeek إذا كان هذا الخيار صحيحًا، فسيعرض التقويم عمودًا يحتوي على أرقام الأسابيع. القيمة الافتراضية خاطئة
WeekHeader يحدد عنوان عمود التقويم مع تمكين أرقام الأسابيع بواسطة خيار showWeek. القيمة الافتراضية هي "الأربعاء"
عرض الاسبوع

من المهم في بعض التطبيقات معرفة رقم الأسبوع في السنة التي يقع فيها تاريخ معين. على سبيل المثال، هذا مطلوب في العديد من البرامج المحاسبية. في عنصر واجهة مستخدم Datepicker، يمكنك التحكم في عرض معلومات الأسبوع باستخدام خيارات showWeek وweekHeader، كما هو موضح في المثال أدناه:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showWeek: true,weekHeader: "Week No." )); ) ) ;

إذا كان خيار showWeek صحيحًا، فسيتم عرض عمود يحتوي على أرقام الأسابيع في التقويم. الرأس الافتراضي لهذا العمود هو "Week"، ولكن يمكن تغييره باستخدام خيار WeekHeader. يوضح المثال عمود الأسابيع، والذي تمت إعادة تسميته إلى "Week #":

ملء خلايا التقويم الفارغة بتواريخ من الأشهر المجاورة

افتراضيًا، يعرض التقويم التواريخ التي تقع ضمن الشهر الحالي فقط. وهذا يعني أنه قد تكون هناك خلايا فارغة في شبكة التقويم. يمكنك السماح بملء الخلايا الفارغة بتواريخ من الأشهر السابقة والأشهر اللاحقة عن طريق ضبط خيار showOtherMonths على true، كما هو موضح في المثال أدناه:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showOtherMonths: true )); ));

وتظهر النتيجة في الشكل أدناه. في هذه الحالة، تصبح التواريخ التي تنتمي إلى أشهر أخرى متاحة إذا تم ضبط خيار SelectOtherMonths على القيمة true:

استخدام اللوحة المساعدة للأزرار الإضافية

يؤدي تعيين خيار showButtonBar على true إلى إضافة شريط من الأزرار الإضافية أسفل نافذة أداة Datepicker. في حالة التقويم المنبثق، تحتوي اللوحة على زرين: "اليوم" و"إغلاق". يتيح لك زر "اليوم" العودة إلى التاريخ الحالي، ويقوم زر "إغلاق" بإغلاق نافذة التقويم. يمكن تغيير النص المستخدم لهذه الأزرار باستخدام خياري CurrentText وCloseText.

إذا تم ضبط خيار goToCurrent على true، فسيعود التقويم إلى التاريخ المحدد بدلاً من التاريخ الحالي. تكون هذه الميزة مفيدة إذا تم تكوين عنصر واجهة مستخدم Datepicker بقيمة خيار defaultDate محددة. إذا كان الغرض من اختيار التاريخ يتعلق بأحداث سابقة أو مستقبلية، فإن العودة إلى التاريخ الحالي ليس مناسبًا دائمًا. ويرد أدناه مثال مماثل:

$(function() ( $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#datep").datepicker(( showButtonPanel: صحيح، النص الحالي: "اذهب"، gotoCurrent: صحيح، التاريخ الافتراضي : "+1m +1y" )).val("20.12.2014" ));

لاحظ أن استخدام خيار goToCurrent يؤدي إلى الضغط على الزر للانتقال إلى التاريخ المحدد. في هذا المثال، التاريخ المحدد هو سمة القيمة لعنصر الإدخال، ولكن إذا قام المستخدم بتحديد تاريخ مختلف ثم أعاد فتح التقويم، فإن النقر فوق الزر سيعيد التقويم إلى التاريخ الذي حدده المستخدم بدلاً من التاريخ الذي حددته.

طرق القطعة Datepicker

يتم سرد الطرق التي يدعمها عنصر واجهة مستخدم Datepicker في الجدول أدناه:

طرق القطعة Datepicker وصف الطريقة
منتقي التاريخ ("تدمير") يزيل وظيفة عنصر واجهة مستخدم Datepicker تمامًا من العنصر الأساسي
منتقي التاريخ ("تعطيل") يقوم بإيقاف عنصر واجهة مستخدم Datepicker مؤقتًا للعنصر الأساسي
منتقي التاريخ ("تمكين") يستأنف عنصر واجهة مستخدم Datepicker الذي تم تعليقه مسبقًا للعنصر الأساسي
منتقي التاريخ ("الخيار"، الخيارات) يتيح لك الحصول على أو تعيين قيم واحد أو أكثر من خيارات أداة Datepicker
منتقي التاريخ ("معطل") يُرجع صحيحًا إذا تم تعطيل عنصر واجهة مستخدم Datepicker
منتقي التاريخ ("إخفاء") إخفاء التقويم المنبثق إذا كان مرئيًا
منتقي التاريخ("عرض") يعرض تقويمًا منبثقًا إذا كان غير مرئي
منتقي التاريخ ("التحديث") يقوم بتحديث التقويم ليعكس التغييرات التي تم إجراؤها على العنصر الأساسي
منتقي التاريخ("getDate") يحصل على التاريخ المحدد في التقويم
منتقي التاريخ ("setDate"، التاريخ) يضبط القيمة المحددة كتاريخ التقويم المحدد
الحصول على التاريخ وتغييره برمجيا

الأوقات الأكثر شيوعًا التي أستخدم فيها طريقتي getDate وsetDate هي عندما أرغب في منح المستخدمين القدرة على تحديد نطاقات زمنية كاملة باستخدام عناصر واجهة مستخدم Datepicker المتعددة. في مثل هذه الحالات، أفضل عدم عرض التواريخ المحددة في حقول النص وعرض عدد الأيام بين التواريخ المحددة فقط. ويرد أدناه مثال مماثل:

تسمية واجهة مستخدم jQuery (الهامش: 12 بكسل) الإدخال (العرض: 200 بكسل؛ محاذاة النص: يسار) #wrapper > * (عائم: يسار) #result (الهامش: تلقائي؛ الحشو: 10 بكسل؛ العرض: 200 بكسل؛ واضح: يسار) $( function() ( $("#result").hide(); $.datepicker.setDefaults($.datepicker.regional["ru"]); $("#dateStart, #dateEnd").datepicker(( minDate: "-7d"، maxDate: "+7d"، onSelect: function(date, datepicker) ( if (datepicker.id == "dateStart") ( $("#dateEnd").datepicker("setDate"، date) . datepicker("enable").datepicker("option", "minDate", date) ) if (!$("#dateEnd").datepicker("isDisabled")) ( var startDate = $("#dateStart"). datepicker("getDate"); var endDate = $("#dateEnd").datepicker("getDate"); var diff = endDate.getDate() - startDate.getDate(); ; ) )).filter("#dateEnd").datepicker("disable" )); البداية: النهاية: عدد الأيام:

يقوم هذا المثال بإنشاء تقويمين، أحدهما في حالة تعطيل مباشرة بعد تحميل المستند. للرد على اختيار المستخدم للتواريخ، يتم استخدام حدث onSelect (والذي سنتحدث عنه بمزيد من التفصيل لاحقًا).

بمجرد قيام المستخدم بتحديد تاريخ في التقويم الأول، نستخدم طريقة setDate لإعداد التقويم الثاني، وطريقة getDate لاسترداد التواريخ من كلا التقويمين ثم حساب الفرق في الأيام بين التاريخين الأول والثاني (للتبسيط، قمنا افترض أن كلا التاريخين من نفس الشهر). يظهر عرض المستند في نافذة المتصفح في الشكل:

أحداث أداة منتقي التاريخ

مثل كل عناصر واجهة المستخدم jQuery UI، يدعم عنصر واجهة المستخدم Datepicker مجموعة من الأحداث التي تتيح لك إعلامك بالتغييرات المهمة في حالة التطبيق. وتظهر هذه الأحداث في الجدول أدناه:

لن أعيد توضيح كيفية عمل طريقة onSelect لأنه تم استخدامها بالفعل في بعض الأمثلة، بما في ذلك المثال الذي تمت مناقشته في القسم السابق. الشيء الوحيد الذي أريد الإشارة إليه هو أن الوسيطات التي تم تمريرها إلى معالج الحدث هي تمثيلات سلسلة للتاريخ المحدد ومثيل Datepicker الذي أثار الحدث.

يتيح لك حدث onChangeMonth الاستجابة للحدث الذي يحدث عندما يحدد المستخدم شهرًا أو سنة مختلفة، سواء من خلال القوائم المنسدلة التي تم تمكينها من خلال استخدام خيارات ChangeMonth وchangeYear أو أزرار صفحة الشهر.

باستخدام طريقة onClose، يمكنك الاستجابة لإغلاق التقويم المنبثق. يتم إطلاق هذا الحدث حتى إذا لم يقم المستخدم بتحديد تاريخ في التقويم. وسيطات معالج الحدث هي عبارة عن سلسلة تمثل التاريخ (أو سلسلة فارغة إذا قام المستخدم بإغلاق النافذة دون إجراء تحديد) ومثيل Datepicker الذي أثار الحدث.

اسمحوا لي أن أبدي تحفظًا على الفور بأن سلسلة هذه المقالات ليست مخصصة للمحترفين المتمرسين، فهي مجرد قوة دافعة للتطوير، ونوع من الرحلة الصغيرة إلى الإمكانيات للمبتدئين، ولأولئك الذين ليس لديهم أي فكرة عن واجهة المستخدم وjQuery في عام.
دعنا نذهب!

التحميل: http://jqueryui.com/download
نقوم بتوصيل الإطار الشاماني وتوطين التقويم وورقة الأنماط:

وبذلك تكون الاستعدادات قد اكتملت.

لإنشاء تقويم، تحتاج فقط إلى سطر واحد من html:

أو إذا كنت تريد تضمين تقويم في الموقع كعنصر صفحة:

واثنين من خطوط js:

$(function())( $.datepicker.setDefaults($.extend($.datepicker.regional["ru"])); $("#datepicker").datepicker(); ));

وهكذا حصلنا على تقويم يعمل بالكامل باللغة الروسية، ولكن ماذا لو قمنا بإنشاء موقع ويب باللغة الإنجليزية أو الأوكرانية؟ لتغيير الوضع لصالحنا، نحتاج فقط إلى تغيير معلمة واحدة، ويمكن القيام بذلك ديناميكيًا:

$("#datepicker").datepicker("option", $.datepicker.regional["uk"]));

الوظيفة "الافتراضية" القياسية ليست دائمًا كافية لأداء مهام معينة. لذلك دعونا نعدل الإعدادات قليلاً:

$("#datepicker").datepicker(( minDate: "-30"، // الحد الأدنى للتاريخ الذي يمكن تحديده، أي -30 يومًا من "الآن" maxDate: "+1m +1w +3d" // الحد الأقصى للتاريخ التي يمكن تحديدها، أي + شهر واحد وأسبوع واحد و3 أيام من "الآن" )) ؛

الأحداث $.datepicker.setDefaults($.extend($.datepicker.regional["ru"])); $("#datepicker").datepicker(( beforeShow: function(input) ( $(input).css("background-color"،#ff9"); )، onSelect: function(dateText, inst) ( $( this).css("background-color"،"); تنبيه("محدد: " + dateText + "nnid: " + inst.id + "nselectedDay: " + inst.selectedDay + "nselectedMonth: " + inst.selectedMonth + "nselectedYear: " + inst.selectedYear ), onClose: function(dateText, inst) ( $(this).css("background-color"،"); ) ));

في القائمة أعلاه، لدينا ثلاثة خيارات تحتوي على عمليات الاسترجاعات.
beforeShow هي الوظيفة التي سيتم استدعاؤها قبل عرض التقويم.
باستخدام خيارات CSS، سيتم تعيين الإدخال على خلفية صفراء.
يحدد OnSelect وظيفة سيتم استدعاؤها عند تحديد تاريخ؛ وستعرض التاريخ المحدد في تنبيه وتمرير قيمة خيار CSS فارغة، والتي ستعيد الإدخال إلى مظهره السابق.
onClose هي وظيفة ستعمل عند إغلاق التقويم - أي أنها ستعيد خلفية بيضاء إلى الإدخال.

طُرق فتح في النافذة$.datepicker.setDefaults((changeYear: true), $.extend($.datepicker.regional["ru"])); $("#datepicker_open").click(function())( $("#datepicker").datepicker("dialog", "23/04/2009", function())( تنبيه("حدث onSelect"); ), ( showButtonPanel : صحيح )); في المثال أدناه، أوضح كيفية عمل أسلوب الحوار. نحن نسمي هذه الطريقة عند النقر على الرابط. الوسيطة الأولى هي اسم الطريقة، والوسيطة الثانية textDate هي التاريخ الذي سيتم فيه فتح التقويم افتراضيًا. في الوسيطة onSelect، يمكنك تمرير وظيفة رد الاتصال التي سيتم استدعاؤها عند تحديد تاريخ محدد في التقويم. في وسيطة الإعدادات، يمكنك تمرير كائن باستخدام إعدادات عنصر واجهة المستخدم الجديدة التي سيتم تطبيقها على التقويم الذي سيتم فتحه في مربع الحوار.
  • altField هو محدد jQuery لحقل آخر يجب تحديثه بمجرد تحديد تاريخ في Datepicker. يتم تعيين تنسيق التاريخ في هذا الحقل الإضافي باستخدام خيار altFormat.
  • altFormat - تنسيق التاريخ الذي سيتم استخدامه لخيار altField. تسمح هذه الإعدادات بعرض تنسيق تاريخ واحد للمستخدم بينما يمكن استخدام تنسيق مختلف لإجراء العمليات الحسابية. يمكن العثور على قائمة كاملة بالتنسيقات الممكنة على http://api.jqueryui.com/datepicker/
  • appendText - النص الذي سيتم عرضه بعد كل حقل منتقي التاريخ. يمكن استخدامه، على سبيل المثال، لوضع علامة على الحقل كما هو مطلوب.
  • ButtonImage — عنوان الصورة التي سيتم عرضها على الزر الذي يمكن استخدامه للاتصال بالتقويم. يتم استخدامه مع خيار showOn عندما يأخذ القيمة "زر" أو "كلاهما". إذا تم تحديد النص في خيار ButtonText، فإنه يصبح قيمة السمة البديلة للصورة.
  • ButtonImageOnly - إذا قمت بتعيين هذا الخيار على true، فسيتم عرض الصورة التي تم تحديد عنوانها في خيار ButtonImage ليس على الزر، ولكن بمفردها.
  • ButtonText - النص المعروض على الزر الذي يمكن استخدامه لفتح التقويم. يتم استخدامه مع خيار showOn عندما يأخذ القيمة "button" أو "كلاهما".
  • ChangeMonth - إذا قمت بتمرير القيمة true في هذا الخيار، فسيكون من الممكن تحديد الشهر من القائمة المنسدلة.
  • ChangeYear - إذا قمت بتمرير القيمة true في هذا الخيار، فسيكون من الممكن تحديد السنة من القائمة المنسدلة.
  • CloseText - يُستخدم هذا الخيار مع showButtonPanel إذا كان الأخير صحيحًا. يتم تعريف قيمة خيار CloseText في ملف الترجمة إذا تم استخدام واحد، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح.
  • constrainInput - بشكل افتراضي، يكون الخيار صحيحًا ويفرض مراعاة تنسيق التاريخ المحدد في خيارات عنصر واجهة المستخدم بدقة في حقل إدخال النص. لتتمكن من عدم اتباع هذا التنسيق، يجب عليك ضبط الخيار على خطأ.
  • currentText - يُستخدم هذا الخيار مع showButtonPanel إذا كان الأخير صحيحًا. يتم تعريف قيمة خيار currentText في ملف الترجمة إذا تم استخدام واحد، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح.
  • dateFormat - يحدد تنسيق التاريخ. يتم تعريف قيمة خيار dateFormat في ملف الترجمة إذا تم استخدام واحد، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح. يمكن العثور على قائمة كاملة بالتنسيقات الممكنة على
    http://docs.jquery.com/UI/Datepicker/formatDate
  • dayNames عبارة عن مصفوفة تحتوي على الأسماء الكاملة لأيام الأسبوع، بدءًا من يوم الأحد. يتم تحديدها في ملف الترجمة في حالة استخدامها، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح.
  • dayNamesMin عبارة عن مصفوفة تحتوي على اختصار مكون من حرفين لأسماء أيام الأسبوع، بدءًا من يوم الأحد. يتم تحديدها في ملف الترجمة في حالة استخدامها، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح.
  • dayNamesShort - مصفوفة تحتوي على اختصار مكون من ثلاثة أحرف لأسماء أيام الأسبوع، بدءًا من يوم الأحد. يتم تحديدها في ملف الترجمة في حالة استخدامها، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح.
  • التاريخ الافتراضي - يضبط التاريخ الذي سيتم تمييزه عند فتحه لأول مرة إذا كان حقل منتقي التاريخ فارغًا. يمكن تحديد الخيار من خلال كائن التاريخ، إما كعدد الأيام من الحالي لـ (على سبيل المثال +7 أو -15)، أو كسلسلة من القيم تحدد الفترة ('y' لسنوات، 'm ' للأشهر، و'w' للأسابيع، و'd' للأيام، على سبيل المثال '+1m +7d')، وأخيرًا كقيمة خالية لليوم الحالي.
  • المدة — مدة تأثير الحركة عند فتح (إغلاق) التقويم. يمكن أن يأخذ القيم كسلسلة - "سريع" أو "عادي" (افتراضي) أو "بطيء" أو كرقم بالمللي ثانية. إذا قمت بتمرير سلسلة فارغة، فسيتم فتح التقويم وإغلاقه دون أي تأثير للرسوم المتحركة.
  • firstDay - يقوم الخيار بتعيين اليوم الأول من الأسبوع: الأحد - 0، الاثنين - 1،... تم تعريفه في ملف الترجمة، إذا تم استخدامه، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح.
  • gotoCurrent - إذا قمت بتعيين قيمة الخيار على true، فسيشير زر اليوم (المتوفر عند showButtonPanel: true) إلى التاريخ المحدد بدلاً من التاريخ الحالي.
  • HideIfNoPrevNext - إذا قمت بتحديد نطاق التواريخ المتاحة باستخدام خياري minDate وmaxDate، فعندما تصل إلى نهاية النطاق، يصبح السهمان "للخلف" و"للأمام" غير نشطين. لكن يمكنك إخفائها بالكامل عن طريق تمرير القيمة true إلى خيار HiddenIfNoPrevNext.
  • isRTL - يجب ضبط هذا الخيار على "صحيح" في حالة استخدام لغة من اليمين إلى اليسار. محدد في ملف الترجمة، إذا تم استخدامه.
  • maxDate - يضبط الحد الأقصى للتاريخ القابل للتحديد من خلال كائن التاريخ إما كعدد الأيام من اليوم الحالي (على سبيل المثال +7) أو كسلسلة من القيم التي تحدد الفترة ('y' للسنوات، 'm' للأشهر أو "w" للأسابيع، أو "d" للأيام، على سبيل المثال "+1y +1m")، أو null لعدم وجود حد.
  • minDate - يعين الحد الأدنى للتاريخ القابل للتحديد من خلال كائن التاريخ إما كعدد الأيام من اليوم الحالي (على سبيل المثال -7) أو كسلسلة من القيم التي تحدد الفترة ('y' للسنوات، 'm' للأشهر أو 'w' للأسابيع، أو 'd' للأيام، على سبيل المثال '-1y -1m')، أو null لعدم وجود حد.
  • MonthNames عبارة عن مصفوفة تحتوي على الأسماء الكاملة للأشهر. يتم تحديدها في ملف الترجمة في حالة استخدامها، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح.
  • MonthNamesShort - مصفوفة تحتوي على اختصار مكون من 3 أحرف لاسم الشهر. يتم تحديدها في ملف الترجمة في حالة استخدامها، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح.
  • navigationAsDateFormat - يكون الخيار افتراضيًا خطأ. إذا تم التعيين على true، فسيتم تطبيق وظيفة dateFormat على قيم خيارات nextText وprevText وcurrentText لعرض، على سبيل المثال، أسماء الشهر السابق والتالي أثناء التنقل.
  • NextText هو النص الذي يتم عرضه كرابط للشهر التالي. يتم تحديدها في ملف الترجمة في حالة استخدامها، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح. إذا تم استخدام ملف نمط ThemeRoller، فسيتم استبدال هذه القيمة بالرمز.
  • numberOfMonths - يحدد هذا الخيار عدد الأشهر التي يجب عرضها مرة واحدة. يمكن أن تكون قيمة الخيار رقمًا بسيطًا أو مجموعة من عنصرين يحددان عدد الصفوف والأعمدة على التوالي. على سبيل المثال، ستعرض القيمة تقويمًا في صفين من ثلاثة أشهر.
  • prevText - النص الذي يتم عرضه كرابط للشهر السابق. يتم تحديدها في ملف الترجمة في حالة استخدامها، ولكن يمكن تجاوز هذه القيمة عن طريق تحديدها بشكل صريح. إذا تم استخدام ملف نمط ThemeRoller، فسيتم استبدال هذه القيمة بالرمز.
  • shortYearCutoff - القيمة الافتراضية +10. يُستخدم هذا الخيار فقط إذا كان تنسيق التاريخ يستخدم تدوينًا للسنة مكونًا من رقمين ويعمل كمعوض لتحديد القرن. إذا تم تمرير القيمة كرقم، فسيتم استخدامها كما هي. إذا تم تمرير القيمة كسلسلة، فسيتم تحويلها إلى رقم وإضافتها إلى قيمة السنة الحالية. بمجرد تحديد القيمة، تعتبر جميع البيانات التي تمثل قيمة السنة، سواء كانت أقل منها أو مساوية لها، سنوات من القرن الحالي. تعتبر القيم الكبيرة سنوات من القرن الماضي.
  • showAnim - يحدد نوع الرسوم المتحركة عند فتح التقويم. القيمة الافتراضية هي show (سيتم استخدام الإخفاء عند الإغلاق). بدون توصيل ملفات إضافية، يمكن استخدام تأثيرات "slideDown" و"fadeIn" (عند الإغلاق، سيتم استخدام تأثيرات "slideUp" و"fadeOut"، على التوالي). من الممكن أيضًا استخدام أي تأثيرات لـ jQuery UI، بشرط أن تكون متصلة بشكل إضافي.
  • showButtonPanel - سيؤدي ضبط هذا الخيار على "صحيح" إلى ظهور لوحة تحتوي على زرين - انتقل إلى تاريخ اليوم وأغلق التقويم.
  • showCurrentAsPos - عند عرض عدة أشهر مرة واحدة، يحدد الرقم الذي تم تمريره في هذا الخيار موضع الشهر الحالي. القيمة الافتراضية هي 0 ويتم عرض الشهر الحالي في الزاوية اليسرى العليا.
  • showMonthAfterYear - القيمة الافتراضية خاطئة ويأتي اسم الشهر قبل السنة في الرأس. عند التعيين على true، سيتبع اسم الشهر السنة.
  • showOn - يتم تعيين هذا الخيار افتراضيًا على "التركيز"، مما يؤدي إلى فتح التقويم عند النقر فوق حقل الإدخال. القيم الأخرى المحتملة هي "زر" و"كلاهما". سيظهر زر بجوار حقل الإدخال. في الحالة الأولى، سيتم فتح التقويم عند النقر فوق الزر، وفي الحالة الثانية، عند النقر فوق الزر وعندما يتلقى حقل الإدخال التركيز.
  • showOptions - إذا كنت تستخدم أحد تأثيرات jQuery UI، فيمكنك تمرير إعدادات إضافية إليه باستخدام هذا الخيار. على سبيل المثال: showOptions: (الاتجاه: "أعلى").
  • showOtherMonths - القيمة الافتراضية خاطئة. إذا كان هذا صحيحًا، فسيعرض التقويم أيام الشهر السابق و/أو التالي دون القدرة على تحديدها.
  • stepMonths - يحدد عدد الأشهر التي يجب نقل التقويم فيها عند النقر فوق الارتباطين التالي والسابق. الافتراضي هو 1.
  • yearRange - يتحكم في نطاق السنوات المعروضة في القائمة المنسدلة (عند استخدام خيار ChangeYear).
  • beforeShow - هنا يمكنك تحديد الوظيفة التي سيتم استدعاؤها قبل فتح التقويم. تأخذ الوظيفة كوسيطة كائنًا يميز حقل إدخال النص الذي تعمل به الأداة.
  • beforeShowDay - في هذا الخيار يمكنك تحديد وظيفة مخصصة ستأخذ التاريخ المحدد كوسيطة. يجب أن تقوم الدالة بإرجاع مصفوفة، حيث يشير العنصر ذو الفهرس - صحيح أو خطأ إلى ما إذا كان تحديد هذا التاريخ ممكنًا أم لا. يحتوي عنصر الفهرس على اسم الفئة (الفئات) لعرض التاريخ. عنصر مع فهرس (اختياري) - نص تلميح الأداة للتاريخ. سيتم استدعاء الوظيفة لكل تاريخ في التقويم عند تحريك الماوس فوقه.
  • onChangeMonthYear - هنا يمكنك تحديد الوظيفة التي سيتم استدعاؤها عندما يتغير الشهر أو السنة في التقويم. تأخذ الدالة ثلاث وسائط. الوسيطتان الأوليان هما قيمتي السنة والشهر الجديدتين، والوسيطة الثالثة هي كائن منتقي التاريخ.
  • onClose - يحدد هذا الخيار وظيفة سيتم استدعاؤها عند إغلاق التقويم دون تحديد أي تاريخ.
  • onSelect - يحدد هذا الخيار الوظيفة التي سيتم استدعاؤها عند تحديد تاريخ في التقويم.
  • تدمير - يقوم .datepicker('destroy') بإزالة جميع وظائف عنصر واجهة مستخدم Datepicker تمامًا. إرجاع العناصر إلى حالة ما قبل التهيئة.
  • تعطيل - يعمل .datepicker('disable') على تعطيل جميع وظائف الأداة مؤقتًا. يمكنك إعادة تمكين استخدامه باستخدام طريقة التمكين.
  • تمكين - يسمح .datepicker('enable') باستخدام جميع وظائف الأداة إذا تم تعطيلها مسبقًا باستخدام طريقة التعطيل.
  • الخيار - .datepicker('option', optionName, ) باستخدام هذه الطريقة، يمكنك الحصول على قيمة أي خيار عنصر واجهة مستخدم أو تعيينه بعد التهيئة.
  • مربع الحوار - .datepicker('dialog', dateText, , , ) يفتح عنصر واجهة مستخدم Datepicker في وضع الحوار. تقوم الوسيطة dateText بتمرير التاريخ الذي يجب أن يتم فيه فتح التقويم. الوسائط المتبقية اختيارية. في وسيطة onSelect، يمكنك تمرير وظيفة سيتم استدعاؤها عند تحديد تاريخ في التقويم، وفي وسيطة الإعدادات، يمكنك تمرير كائن باستخدام إعدادات عنصر واجهة المستخدم الجديدة، وفي وسيطة pos، يمكنك تمرير الإحداثيات التي يوجد بها مربع الحوار سوف يكون مفتوحا. هنا يمكنك استخدام أحداث الماوس لتحديد الإحداثيات.
  • isDisabled - .datepicker('isDisabled') يُرجع الأسلوب صحيحًا إذا تم تطبيق أسلوب التعطيل على عنصر واجهة المستخدم ويعيد الخطأ بخلاف ذلك.
  • إخفاء - .datepicker('hide', ) يخفي التقويم المفتوح مسبقًا.
  • show - يفتح .datepicker('show') التقويم.
  • getDate - تقوم طريقة .datepicker('getDate') بإرجاع التاريخ المحدد في التقويم.
  • setDate - تسمح لك طريقة .datepicker('setDate', date) بتعيين تاريخ في التقويم. يمكن أن تكون قيمة وسيطة التاريخ عبارة عن سلسلة (على سبيل المثال: 1917/10/25)

في تواصل مع

الوصف: من نافذة منبثقة أو تقويم مضمن لتحديد تاريخ.

الإصدار الجديد: 1.0

JQuery UI Datepicker حدد تاريخًا لإضافة ارتفاع الصفحة لتخصيص المكون الإضافي. يمكنك تخصيص تنسيق التاريخ واللغة، وتحديد النطاق الزمني الذي تحدده، وإضافة أزرار، وخيارات التنقل الأخرى.

بشكل افتراضي، عندما يتم التركيز على حقل نص مرتبط، يظهر تراكب صغير لمنتقي التاريخ المفتوح. بالنسبة للتقويم عبر الإنترنت، ما عليك سوى تحديد التاريخ المرفق بـ DIV أو الفاصل الزمني.

تفاعل لوحة المفاتيح

عندما يكون منتقي التاريخ مفتوحًا، تتوفر أوامر لوحة المفاتيح التالية:

  • PAGE UP: انتقل إلى الشهر السابق.
  • الصفحة لأسفل: الانتقال إلى الشهر التالي.
  • CTRL + PAGE UP: الانتقال إلى العام السابق.
  • CTRL + PAGE DOWN: الانتقال إلى العام المقبل.
  • CTRL + HOME: نقل الشهر الحالي. إذا كان محدد التاريخ مغلقًا، فهو مفتوح.
  • CTRL + يسار: الانتقال إلى اليوم.
  • CTRL + RIGHT: الانتقال إلى اليوم التالي.
  • CTRL + UP: الانتقال إلى الأسبوع السابق.
  • CTRL + DOWN: الانتقال إلى الأسبوع التالي.
  • أدخل: حدد تاريخ التركيز.
  • CTRL + END: إغلاق منتقي التاريخ ومسح التاريخ.
  • الهروب: تاريخ إغلاق الصنبور، دون أي خيار.
وظائف مفيدة $ .datepicker.setDefaults (الإعدادات)

قم بتغيير الإعدادات الافتراضية لجميع منتقيات التاريخ.