قبول قيمة فارغة في محدد التاريخ باستخدام JavaScript

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

كيفية تنفيذ منتقي تاريخ فردي مع قيمة فارغة

إذا كنت تستخدم مكتبة Date Range Picker، فإنه يمكنك إعداد منتقي تاريخ فردي بشكل يتيح المجال للمستخدمين لتعديل أو حذف التاريخ المدخل بسهولة. لنبدأ بتحليل الكود الخاص بك:

$('.singledatepicker').daterangepicker({
    singleDatePicker: true,
    showDropdowns: true,
    minYear: 2025,
    maxYear: parseInt(moment().format('YYYY'), 10),
    locale: {
        format: 'DD/MM/YYYY',
    },
    //autoApply: true,
    //autoUpdateInput: false
});

الأجزاء الأساسية في الكود تشمل singleDatePicker، الذي يُفعّل استخدام المنتقي لتاريخ واحد، وshowDropdowns، الذي يُظهر قائمة منسدلة للسماح بتحديد الأشهر والسنوات بسهولة. إضافةً إلى ذلك، قد تلاحظ وجود خيارات مثل minYear و maxYear، والتي تحدد الحدود الزمنية.

كيف يتعامل المستخدم مع القيمة الفارغة؟

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

$('.singledatepicker').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val(''); // مسح القيمة
});

من خلال هذا الكود، نقوم بتعيين حدث عند إلغاء اختيار التاريخ، مما يؤدي إلى مسح الحقل وإعادة وضعه كفارغ.

تخصيص الخيارات لتلبية المتطلبات

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

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

نقاط أخيرة حول استخدام مكتبة Date Range Picker

إعداد الـ JavaScript – How to accept a empty value for single daterangepicker? يمكن أن يظهر في العديد من التطبيقات. لا تتردد في العودة إلى الكود وتعديله ليتناسب مع متطلبات واجهة المستخدم الخاصة بك. توضيح كيفية السماح بإدخال قيمة فارغة يُعد خطوة مهمة نحو تحسين تجربة المستخدم.

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

من المهم أن تحافظ على تجربة المستخدم السلسة، لذا فإن تقديم خيارات مرنة لهم في إدخال البيانات يدعم استراتيجيات تحسين تجربة المستخدم.