تحليل أمثلة على استخدام ملفات selector datetimepicker وdaterangepicker في Bootstrap

في bootstrap هناك نوعان من اختيار التوقيت: dateTimePicker وdateRangePicker

1、dateTimePicker يبدو أنه إضافة رسمية:

需要的文件：

<link rel="stylesheet" href="css/bootstrap-datetimepicker.min.css">
<script src="js/bootstrap-datetimepicker.min.js"></script>
<script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="js/daterangepicker.js"></script> 

مراجعة API مباشرة:http://www.bootcss.com/p/bootstrap-datetimepicker/

2、dateRangePicker يبدو أنه وسيط ثالث، ويمكنه في النهاية تحقيق اختيار فترة الزمنية.

需要的文件：　

الملفات المطلوبة:}
<link rel="stylesheet" href="css/daterangepicker-bs3.css">
<script src="js/daterangepicker.js"></script> 

<script src="js/moment.min.js"></script>　

كود html:
 <div class="container-fluid">
 <div class="row-fluid" style="margin-top:5px">
 <div class="span4">
 <div class="control-group">
  <label class="control-label">
 تاريخ:
 </label>
  <div class="controls">
  <div id="reportrange" class="pull-left dateRange" style="width:350px">
  <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
  <span id="searchDateRange"></span>
  <b class="caret"></b>
 <b class="caret"></b>
 <b class="caret"></b>
 <b class="caret"></b>
 <b class="caret"></b>
<b class="caret"></b>

　

</div>

 كود js:
 <script type="text/javascript">
 // أداة الوقت
 $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
 $('#reportrange').daterangepicker(
 {
  // startDate: moment().startOf('day'),
  //endDate: moment(),
  //minDate: '01/01/2012', // الوقت الأدنى
  maxDate : moment(), // الوقت الأقصى 
  dateLimit : {
  days : 30
  }, // أقصى فترة زمنية بين البداية والنهاية
  showDropdowns : true,
  showWeekNumbers : false, // اعرض رقم الأسبوع
  timePicker : true, // اعرض الساعة والدقيقة
  timePickerIncrement : 60, // زيادة الوقت، وحدة هي دقيقة
  timePicker12Hour : false, // استخدم النظام الزمني ال12 ساعي لعرض الوقت
  ranges : {
  //'الساعة الأخيرة': [moment().subtract('hours',1), moment()],
  'اليوم': [moment().startOf('day'), moment()],
  'البارحة': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
  'ال7 أيام الأخيرة': [moment().subtract('days', 6), moment()],
  'ال30 يوماً الأخيرة': [moment().subtract('days', 29), moment()]
  },
  opens : 'اليمين', // موقع انبثاق مربع اختيار التاريخ
  buttonClasses : [ 'النقر الأزرق الافتراضي' ],
  applyClass : 'النقر الصغير النقر الأساسي الأزرق',
  cancelClass : 'النقر الصغير',
  fromLabel : 'وقت البداية',
  toLabel : 'وقت النهاية',
  customRangeLabel : 'مخصص',
  daysOfWeek : [ 'يوم', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت' ],
  monthNames : [ 'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
  monthNames : [ 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر' ],
  firstDay : 1
  }, function(start, end, label) { //ت格式ية مربع عرض التاريخ
  $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
  //إعداد قائمة تاريخ التحديد --بداية--
  var dateOption ;
  if("${riqi}"=='day') {
  }
 }
  dateOption = "اليوم";
 });
 else if("${riqi}"=='yday') {
 $(document).ready(function (){
 }
 dateOption = "اليوم السابق";
 else if("${riqi}"=='week') {
 }
 dateOption ="7 يومًا الماضية";
 else if("${riqi}"=='month') {
 }
 dateOption ="30 يومًا الماضية";
 else if("${riqi}"=='year') {
 }
 dateOption ="السنة الماضية";
 }
 dateOption = "مخصص";
 }
 $(".daterangepicker").find("li").each(function (){
 إذا ($(this).hasClass("active")) {
 $(this).removeClass("active");
 }
 إذا (dateOption==$(this).html()) {
 $("this").addClass("active");
 }
 /*
 //تعيين الخيارات في قائمة التواريخ --نهاية--
 });*/
</script>

لكن هناك مشكلة في ترجمة الشهور هنا، يُنصح بتعديل ملف moment.min.js.　

يمكن أيضًا ترجمة الكود لاحقًا، الكود الكامل:　

var table;
 $(function () {
 table = $('#example').DataTable({
 "ajax": {
 "url":"/example/resources/server_processing_customCUrl.php",
 "data": function ( d ) {
  //إضافة معلمات إضافية لنقلها إلى الخادم
  d.extra_search = $('#reportrange span').html();
 }},
 processing": صحيح
 serverSide": صحيح
 "language": {
 "sProcessing": "جارٍ المعالجة..."
 "sLengthMenu": "عرض _MENU_ نتائج"
 "sZeroRecords": "لا توجد نتائج تتطابق مع البحث"
 "sInfo": "عرض _START_ إلى _END_ من النتائج، مجموع _TOTAL_ نتائج"
 "sInfoEmpty": "عرض 0 إلى 0 من النتائج، مجموع 0 نتائج"
 "sInfoFiltered": "(تم تصفية _MAX_ من نتائج)",
 "sInfoPostFix": "",
 "sSearch": "البحث:",
 "sUrl": "",
 "sEmptyTable": "لا توجد بيانات في الجدول"
 "sLoadingRecords": "جارٍ التحميل..."
 "sInfoThousands": ",",
 "oPaginate": {
  "sFirst": "أول صفحة",
  "sPrevious": "صفحة السابقة",
  "sNext": "صفحة التالية",
  "sLast": "آخر صفحة"
 },
 "oAria": {
  "sSortAscending": ": ترتيب هذا السطر بترتيب تصاعدي",
  "sSortDescending": ": ترتيب هذا السطر بتنازلي"
 }
 },
 "dom":
  "<'row'<'span9'l<'#mytoolbox'>><'span3'f>r>"+
  "t"+
  "<'row'<'span6'i><'span6'p>>" ,
 initComplete:initComplete
 });
 });
 /**
 * تنفيذ هذا الطريقة بعد تحميل وتنسيق الجدول
 * @param data
 */
 function initComplete(data){
 var dataPlugin =
 '<div id="reportrange" class="pull-left dateRange" style="width:400px;margin-left: 10px"> '+
 'تاريخ：<i class="glyphicon glyphicon-calendar fa fa-calendar"></i> '+
 '<span id="searchDateRange"></span> '+
 '<b class="caret"></b></div> ';
 الإضافة إلى $mytoolbox .append (dataPlugin);
 // أداة الوقت
 $('#reportrange span').html(moment().subtract('hours', 1).format('YYYY-MM-DD HH:mm:ss') + ' - ' + moment().format('YYYY-MM-DD HH:mm:ss'));
 $('#reportrange').daterangepicker(
 {
  // startDate: moment().startOf('day'),
  //endDate: moment(),
  //minDate: '01/01/2012', // الوقت الأدنى
  maxDate : moment(), // الوقت الأقصى
  dateLimit : {
  days : 30
  }, // أقصى فترة زمنية بين البداية والنهاية
  showDropdowns : true,
  showWeekNumbers : false, // اعرض رقم الأسبوع
  timePicker : true, // اعرض الساعة والدقيقة
  timePickerIncrement : 60, // زيادة الوقت، وحدة هي دقيقة
  timePicker12Hour : false, // استخدم النظام الزمني ال12 ساعي لعرض الوقت
  ranges : {
  //'الساعة الأخيرة': [moment().subtract('hours',1), moment()],
  'اليوم': [moment().startOf('day'), moment()],
  'البارحة': [moment().subtract('days', 1).startOf('day'), moment().subtract('days', 1).endOf('day')],
  'ال7 أيام الأخيرة': [moment().subtract('days', 6), moment()],
  'ال30 يوماً الأخيرة': [moment().subtract('days', 29), moment()]
  },
  opens : 'اليمين', // موقع انبثاق مربع اختيار التاريخ
  buttonClasses : [ 'النقر الأزرق الافتراضي' ],
  applyClass : 'النقر الصغير النقر الأساسي الأزرق',
  cancelClass : 'النقر الصغير',
  fromLabel : 'وقت البداية',
  toLabel : 'وقت النهاية',
  customRangeLabel : 'مخصص',
  daysOfWeek : [ 'يوم', 'الإثنين', 'الثلاثاء', 'الأربعاء', 'الخميس', 'الجمعة', 'السبت' ],
  monthNames : [ 'يناير', 'فبراير', 'مارس', 'أبريل', 'مايو', 'يونيو',
  monthNames : [ 'يوليو', 'أغسطس', 'سبتمبر', 'أكتوبر', 'نوفمبر', 'ديسمبر' ],
  firstDay : 1
  }, function(start, end, label) { //ت格式ية مربع عرض التاريخ
  $('#reportrange span').html(start.format('YYYY-MM-DD HH:mm:ss') + ' - ' + end.format('YYYY-MM-DD HH:mm:ss'));
  //إعداد قائمة تاريخ التحديد --بداية--
  var dateOption ;
  if("${riqi}"=='day') {
  }
 }
  dateOption = "اليوم";
 });
 else if("${riqi}"=='yday') {
 }
 dateOption = "اليوم السابق";
 else if("${riqi}"=='week') {
 }
 dateOption ="7 يومًا الماضية";
 else if("${riqi}"=='month') {
 }
 dateOption ="30 يومًا الماضية";
 else if("${riqi}"=='year') {
 }
 dateOption ="السنة الماضية";
 }
 dateOption = "مخصص";
 }
 $(".daterangepicker").find("li").each(function (){
 إذا ($(this).hasClass("active")) {
 $(this).removeClass("active");
 }
 إذا (dateOption==$(this).html()) {
 $("this").addClass("active");
 }
 });
 //تعيين الخيارات في قائمة التواريخ --نهاية--
 //مетод إعادة تحميل البيانات عند اختيار الوقت
 $("#reportrange").on('apply.daterangepicker',function(){
 //مетод إعادة تحميل البيانات عند اختيار الوقت
 table.ajax.reload();
 //الحصول على بيانات الطلب dt
 var args = table.ajax.params();
 console.log("الإضافات المرسلة إلى الخلفية extra_search هي: " + args.extra_search);
 });
 function getParam(url) {
 var data = decodeURI(url).split("?")[1];
 var param = {};
 var strs = data.split("&");
 for(var i = 0; i<strs.length; i++){
 param[strs[i].split("=")[0]] = strs[i].split("=")[1];
 }
 return param;
 }
 }

مكافأة صغيرة سعيدة:　

عند البحث عن معلومات daterangepicker على الإنترنت، يمكنك العثور على موقع رسمي: http://www.daterangepicker.com/، يحتوي على api شاملة، ولكن عادةً ما يكون التشغيل غير مريح؛ لذا أوصي بدلاً من ذلك بdaterangepicker-bs3.

إذا كنت ترغب في التعلم العميق، يمكنك الضغط هنا للتعلم، وأقدم لك أيضًا موضوعين رائعين: تعليم Bootstrap، تعليم Bootstrap العملي

هذا هو نهاية محتوى المقالة، آمل أن يكون هذا المقال مفيدًا لكم في تعلم، وأتمنى أن تدعموا تعليمات النفخ.