لتحقق من أن تاريخ البداية أقل من تاريخ الانتهاء في صفحة عرضك باستخدام JavaScript في تطبيق CodeIgniter، يمكنك استخدام الكود التالي:
html<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">تاريخ التصنيعlabel>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input type="date" class="form-control" id="startDate" name="mfg_date" value="">
div>
div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">تاريخ الانتهاءlabel>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input type="date" class="form-control" id="endDate" name="exp_date" value="">
div>
div>
<input type="hidden" name="action" value="add_medicines"/>
<button type="submit" class="btn btn-success">إضافةbutton>
<script>
document.querySelector('button[type="submit"]').addEventListener('click', function(event) {
var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;
if (startDate >= endDate) {
alert('تاريخ التصنيع يجب أن يكون قبل تاريخ الانتهاء');
event.preventDefault(); // يمنع الإرسال إذا لم يتم تصحيح التاريخ
}
});
script>
هذا الكود يعمل على إضافة مُستمع لحدث النقر على زر الإرسال، يقوم بالتحقق من قيمة تاريخ التصنيع وتاريخ الانتهاء، وإذا كان تاريخ التصنيع أكبر من أو يساوي تاريخ الانتهاء، سيتم عرض رسالة تنبيه ولن يتم إرسال النموذج.
المزيد من المعلومات
بالطبع! يمكننا أن نوسع المقال لشمول مزيد من التفاصيل والشروحات لتعزيز فهم القراء. فيما يلي نسخة موسعة من المقال:
التحقق من صحة تاريخ البداية وتاريخ الانتهاء في CodeIgniter باستخدام JavaScript
في تطبيقات الويب، قد تحتاج في بعض الأحيان إلى التحقق من صحة تاريخ البداية وتاريخ الانتهاء لبعض العمليات مثل إضافة منتجات جديدة أو عقود. في هذا المقال، سوف نتعلم كيفية تنفيذ هذا التحقق باستخدام JavaScript في إطار العمل CodeIgniter.
الخطوات:
1. إضافة العناصر النموذجية في صفحة العرض:
في البداية، يجب علينا إضافة عناصر الإدخال في صفحة العرض الخاصة بنا. سنقوم بإضافة حقلي إدخال لتاريخ التصنيع وتاريخ الانتهاء.
html<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">تاريخ التصنيعlabel>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input type="date" class="form-control" id="startDate" name="mfg_date" value="">
div>
div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12" for="first-name">تاريخ الانتهاءlabel>
<div class="col-md-6 col-sm-6 col-xs-12 form-group has-feedback">
<input type="date" class="form-control" id="endDate" name="exp_date" value="">
div>
div>
<input type="hidden" name="action" value="add_medicines"/>
<button type="submit" class="btn btn-success">إضافةbutton>
2. إضافة كود JavaScript للتحقق من صحة التواريخ:
ثم، سنقوم بإضافة كود JavaScript للتحقق من أن تاريخ التصنيع أقل من تاريخ الانتهاء. إذا كان التاريخ غير صالح، سنعرض رسالة تنبيه ونمنع إرسال النموذج.
html<script>
document.querySelector('button[type="submit"]').addEventListener('click', function(event) {
var startDate = document.getElementById('startDate').value;
var endDate = document.getElementById('endDate').value;
if (startDate >= endDate) {
alert('تاريخ التصنيع يجب أن يكون قبل تاريخ الانتهاء');
event.preventDefault(); // يمنع الإرسال إذا لم يتم تصحيح التاريخ
}
});
script>
الختام:
بهذا، نكون قد أتممنا تنفيذ التحقق من صحة تاريخ البداية وتاريخ الانتهاء في صفحة العرض الخاصة بنا باستخدام JavaScript في إطار العمل CodeIgniter. يمكنك الآن استخدام هذا الكود في تطبيقاتك لضمان صحة التواريخ المدخلة من قبل المستخدمين.
