25 أمثلة سهلة الاستخدام لمنتقي بيانات التمهيد المجاني

غالبًا ما انتهى بنا الأمر بمراجعة مقتطفات منتقي بيانات Bootstrap المجانية المختلفة ، والتي تركت لنا مجموعة واسعة من الحلول العملية.

ليس ذلك فحسب!

بدلاً من الاعتماد حصريًا على أدوات الجهات الخارجية ، أنشأنا أيضًا العديد من مدخلات منتقي التاريخ.

وهي متاحة الآن لك مجانًا .

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

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

لا مزيد من العمل اليدوي. بضع نقرات وأنت انتهيت!

التقويم V09.0

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

لكن دعونا نتعمق فيه.

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

يمكنك أيضًا استخدام شارة الرتبة التي تشير إلى أعلى لإضافة ثوانٍ أو الضغط على علامة X لإغلاق منتقي البيانات.

مزيد من المعلومات / تنزيل

التقويم V12.5

Calendar V12 هو منتقي بيانات Bootstrap بتصميم حديث وبسيط . نظرًا للمظهر الأنيق ، يمكنك دمجها بسهولة في سمات مواقع الويب المختلفة وتصميمات التطبيقات كما هي.

تتميز الأداة بتأثير التمرير وزر لتاريخ اليوم وخيار لمسح التحديد وزر الإغلاق.

يعرض بشكل ملائم الشهر والسنة في الجزء العلوي مع الأسهم اليمنى واليسرى للقفز بسهولة إلى الأشهر التالية أو السابقة.

مزيد من المعلومات / تنزيل

التقويم V13

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

تصميم المقتطف المجاني هو نفس التصميم أعلاه الرياضي ، بمعنى ، الحد الأدنى ومباشرًا.

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

مزيد من المعلومات / تنزيل

التقويم V14.0

إذا كنت تبحث عن منتقي بيانات Bootstrap مبسط يقوم بالمهمة بشكل جيد للغاية ، فستشهد نتيجة رائعة باستخدام Calendar V14.

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

قم بتنزيله ، وتضمينه ، وهذا كل شيء!

مزيد من المعلومات / تنزيل

التقويم V15.5

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

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

نظرًا لأن هذا هو منتقي بيانات Bootstrap ، فأنت تعلم أن أدائه رائع على الأجهزة المحمولة وأجهزة سطح المكتب.

مزيد من المعلومات / تنزيل

التقويم V16.0

احتفظ بالأشياء في حدها الأدنى ولكن جريئة مع هذا التقويم / منتقي البيانات المضمّن ، والذي يمكنك الآن تضمينه في مشروعك أو تطبيقك بحرية.

يبدو المظهر النظيف جميلًا على أحجام الشاشات المختلفة لمتعة المستخدمين.

يتميز هيكل التصميم بالشهر والسنة في الأعلى ، تليها أيام الأسبوع من الأحد إلى السبت والتواريخ. يمكن للمستخدم أيضًا استخدام POINTERS اليسرى واليمنى لاختيار أشهر مختلفة.

مزيد من المعلومات / تنزيل

التقويم V17

يوجد هنا قالب Bootstrap جديد يحتوي على تقويم مضمن مع شريط نتائج في الأعلى. بمجرد أن يختار المستخدم التاريخ ، فإنه يظهر في الشريط بالترتيب التالي - الشهر / اليوم / السنة .

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

التصميم مرن ومستجيب للهاتف المحمول بنسبة 100٪ ، بينما الرمز صديق للمستخدم للتنفيذ السريع.

مزيد من المعلومات / تنزيل

مثال على منتقي البيانات Bootstrap بواسطة مستخدم CodePen

هذا مثال على منتقي بيانات Bootstrap مجاني. قام مستخدم CodePen بتطويره. إنه قالب قابل للتخصيص بالكامل . قم بإجراء تغييرات عليه حسب تفضيلاتك.

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

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

مزيد من المعلومات / تنزيل

تسجيل الوصول والمغادرة منتقي البيانات

هذا مثال آخر رائع لاختصار بيانات Bootstrap طورته Amanda Louise Acosta Morais. كما يوحي اسم هذا القالب ، فإنه يسمح للمستخدم بتحديد تاريخ تسجيل الوصول والمغادرة.

يوجد حقلا إدخال ، مع نصي العنصر النائب "Check-In" و "Check-Out" في هذا القالب. عندما ينقر المستخدم عليها ، يظهر التقويم بحيث يمكن للمستخدم تحديد التاريخ.

توجد رموز تقويم صغيرة بها نصوص مواضع مؤقتة تلمح للمستخدم أن منتقي البيانات سيفتحون عند النقر فوق حقول الإدخال.

مزيد من المعلومات / تنزيل

Bootstrap datepicker بواسطة Sreekanth Are

هذا قالب منتقي بيانات مفيد جدًا تم إنشاؤه بواسطة Sreekanth Are. يحتوي على واجهة مستخدم جميلة ونظيفة. من لقطة الشاشة لهذا النموذج ، يمكنك أن ترى أن هناك حقل إدخال.

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

تنسيق التاريخ الذي تم استخدامه هو "yyyy-mm-dd".

مزيد من المعلومات / تنزيل

Bootstrap منتقي البيانات مع إدخال المواد

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

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

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

مزيد من المعلومات / تنزيل

Bootstrap datepicker بواسطة Vaidehi Baviskar

هذا قالب منتقي بيانات Bootstrap رائع تم تطويره بواسطة مستخدم CodePen يُدعى Vaidehi Baviskar. كما ترى من لقطة الشاشة لهذا المثال ، يوجد عنوان أعلى حقل الإدخال ، "اختر التاريخ:"

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

يمكنك رؤية جميع التواريخ من الشهر الحالي في أداة منتقي البيانات هذه.

يمكنك تحديد تاريخ من هذه الأداة وسيظهر التاريخ المحدد في حقل الإدخال.

مزيد من المعلومات / تنزيل

Bootstrap منتقي البيانات بواسطة مستخدم CodePen

هذا مثال بسيط جدًا لمنتقي البيانات. يبدو مشابهًا جدًا للمثال السابق. في هذا المثال ، يوجد حقلا إدخال مع منتقي بيانات اثنين.

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

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

يمكنهم تحديد التاريخ الحالي على الفور من جميع التواريخ في الشهر الحالي.

مزيد من المعلومات / تنزيل

قالب منتقي البيانات بواسطة Jowi Englis

هذا مثال معياري لمنتقي البيانات قدمه Jowi Englis ، مستخدم CodePen. كما نرى من لقطة الشاشة ، يوجد عنوان أعلى حقل الإدخال ، "تاريخ التقويم:".

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

عند النقر فوق حقل الإدخال ، يظهر منتقي بيانات جميل ، حيث يتم تمييز التاريخ الحالي بخلفية زرقاء.

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

مزيد من المعلومات / تنزيل

Bootstrap datepicker بواسطة ريتشارد بيلي

هذا مثال رائع لمنتقي بيانات Bootstrap تم تطويره بواسطة Richard Bailey. سيسمح نموذج منتقي البيانات هذا لمستخدمي تطبيق الويب بتحديد نطاق زمني. لذلك يوجد نوعان من منتقي البيانات في هذا المثال.

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

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

مزيد من المعلومات / تنزيل

Bootstrap datepicker بواسطة خوسيه كاستيلو

إذا كنت بحاجة إلى منتقي بيانات لموقع الويب الخاص بك ، فلم يعد عليك إنشاء واحد من البداية. يمكنك تنزيل هذا النموذج ودمجه في موقع الويب الخاص بك.

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

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

مزيد من المعلومات / تنزيل

Bootstrap منتقي البيانات بواسطة Valentin

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

هذه التأثيرات المرئية تعزز تجربة المستخدم بشكل كبير. يمكنك استخدام هذا النموذج إذا كنت تبحث عن مثال رائع جدًا لمنتقي البيانات. إنه مثال رائع لمنتقي البيانات مصمم باستخدام Bootstrap.

لإلقاء نظرة فاحصة على هذا المثال ، انقر فوق الزر "معاينة" أدناه وشاهد معاينة رائعة لهذا المثال.

مزيد من المعلومات / تنزيل

Bootstrap datepicker بواسطة أتاناس أتاناسوف

هذا مثال جميل على منتقي بيانات Bootstrap المجاني. إذا كنت تبحث عن منتقي بيانات قياسي جدًا ، فاستخدم هذا.

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

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

مزيد من المعلومات / تنزيل

Bootstrap datepicker بواسطة M Gambill

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

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

مزيد من المعلومات / تنزيل

Bootstrap datepicker بواسطة tuanitpro

يمنحك مثال منتقي بيانات Bootstrap هذا مربع نص بسيطًا. عند النقر فوقه ، يظهر منتقي البيانات. يمكنك رؤية التاريخ المحدد في حقل النص. يظهر على هذا النحو: "8/22 // 2019". إذا كنت تفضل تنسيق تاريخ مختلف ، فقم بتغيير تنسيق التاريخ من الرمز.

وإذا كنت بحاجة إلى تحسين التصميم ، فيمكنك القيام بذلك.

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

مزيد من المعلومات / تنزيل

قالب Datepicker بواسطة Priyank Panchal

هذا قالب منتقي بيانات عالي الجودة تم تطويره بواسطة Priyank Panchal. يحتوي على حقلي إدخال ، حقل "من" وحقل "إلى". تسمح هذه الحقول للمستخدم بتحديد نطاق زمني.

عند النقر فوق حقول الإدخال ، يظهر منتقي البيانات.

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

إذا لم تطلب هذا الزر ، يمكنك إزالته.

مزيد من المعلومات / تنزيل

Datepicker بواسطة جاكوب مونتغمري

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

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

يوجد زر "إغلاق" أسفل حقل النص. يؤدي النقر فوقه إلى إغلاق النموذج.

مزيد من المعلومات / تنزيل

مثال Datepicker بواسطة Javier Buron

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

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

يتم عرضه أيضًا كمخرج أسفل حقل النص. يتم عرض الإخراج على هذا النحو: "النتيجة: 09/22/2029". ضع في اعتبارك حذف قسم الإخراج إذا لم تطلبه.

مزيد من المعلومات / تنزيل

Bootstrap datepicker بواسطة Peter Schoning

هذا المثال المذهل لمنتقي البيانات Bootstrap الذي صنعه Peter Schoning له خلفية خضراء جميلة.

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

يمكنك أيضًا تحديد تاريخ من شهر مختلف عن العام الحالي أو عام مختلف . يظهر التاريخ المحدد في حقل النص هذا: '08 / 15/2029 ′.

يمكنك تغيير تنسيق التاريخ من الكود ، وتكييفه حسب احتياجاتك.

مزيد من المعلومات / تنزيل

مثال منتقي البيانات بواسطة مستخدم CodePen

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

عند النقر فوق حقول الإدخال ، تظهر منتقي البيانات ، والتي يمكن للمستخدم من خلالها اختيار التواريخ للنطاق الزمني. عندما يحدد المستخدم نطاق التاريخ ، يمكنه إجراء عملية بحث بالنقر فوق الزر "بحث".

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

إنه ليس تطبيقًا كاملاً .

مزيد من المعلومات / تنزيل

افكار اخيرة

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

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

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

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