Bootstrap-dateTimePicker هو مكون إضافي لاختيار الوقت الخفيف يدعم اختيار الوقت ، والتدويل ، وهو سهل التقدم. TOPLOADIFY عبارة عن مكون إضافي يدعم تحميلات الملفات المتعددة. لقد قمت بتطبيق هذين المكونات الإضافية مؤخرًا لإنشاء بعض التطبيقات الصغيرة ، والتي تشعر بالرضا ، لذلك سأقدم ملخصًا موجزًا.
1. احتياطات تقديم المكونات الإضافية
لتنزيل موقع الويب الرسمي لـ bootstrap-datetimepicker ، يجب استخدام ثلاثة ملفات لتطبيق bootstrap-datetimepicker: bootstrap-dateTimepicker.min.js ، bootstrap-datetimepicker.min.cs ((style) ، bootstrap-table-zh-cn.min.js (صيني). jquery.uploadify.min.js ، eploadify.css ، eploadify-cancel.png ، eploadify.swf
2. bootstrap-datetimepicker اختيار الوقت
<div> <label for = "starttime"> startTime: </label> <div data-link-field = "dtp_input1"> <input id = "showtime" th: value = "$ {#dates.format (Activity.StartTime ،" Yyyy-MM-DD HH: MM: SS ')} type = "text" value = "" readonly = "readonly"/> <span> <span> </span> </span> </span> </viv> <input type = "hidden" id = "dtp_input1" name = "starttime"/> <br/> HH: MM: SS '، // اللغة الصينية:' ZH-CN '، // أي يوم من أيام الأسبوع يبدأ ، 0 (الأحد) إلى 6 (السبت) في الأسبوع: 1 ، // إظهار زر "اليوم" في أسفل مكون محدد التاريخ لتحديد تاريخ اليوم: 1 ، // العرض المعروض لأول مرة بعد فتح محدد وقت التاريخ: 2 ، // عندما يتم إغلاق المحدد ، هل يجبر على تحليل القيمة في صندوق الإدخال: 0 ، Showmeridian: 1 ، // يتم استخدام هذه القيمة كقيمة خطوة لبناء ساعة عرض Minutestep: 1}) ؛التأثير النهائي هو على النحو التالي:
3. تحميل تحميل الصورة
$ ("#file_upload"). UploadIfy ({'method': 'post' ، 'auto': true ، // endloy upload تلقائيًا بعد اختيار الصورة 'buttontext': 'upload image' ، 'simuploadlimit': 1 ، 'cancelImg': '../../../resources/images/uploadive-cancel. "/uploadimage؟_csrf="+ (("#_csrf")رمز من جانب الخادم
@responsebody@requestmapping (value = "/eploadImage") public string exploadImage (httpservletrequest request) يلقي الاستثناء {responseObject <String> reponseObject = new receptoBject <string> multipartrequest.getFilenames () ؛ multipartfile multipartfile = multipartrequest.getFile (fildenames.next ()) ؛ ... احفظ عدة خطوط هنا url ؛}تأثير العرض النهائي:
ما سبق هو ملخص لأمثلة التطبيق لـ DateTimePicker وتحميل المكون الإضافي في Bootstrap الذي قدمه لك المحرر. آمل أن يكون ذلك مفيدًا لك. إذا كان لديك أي أسئلة ، فيرجى ترك رسالة لي وسوف يرد المحرر إليك في الوقت المناسب. شكرا جزيلا لدعمكم لموقع wulin.com!