#10639 version 2 datepicker

pandora_console/godmode/setup/setup_visuals.php

@@ -759,6 +759,31 @@ if (enterprise_installed() === true) {
     );
 }
 
+$days_week = [
+    0 => __('Sunday'),
+    1 => __('Monday'),
+    2 => __('Tuesday'),
+    3 => __('Wednesday'),
+    4 => __('Thursday'),
+    5 => __('Friday'),
+    6 => __('Saturday'),
+];
+
+$table_styles->data[$row][] = html_print_label_input_block(
+    __('Datepicker first day of week'),
+    html_print_select(
+        $days_week,
+        'datepicker_first_day',
+        $config['datepicker_first_day'],
+        '',
+        '',
+        false,
+        true,
+        false,
+        false
+    )
+);
+
 $row++;
 
 // Title Header.

pandora_console/include/functions_config.php

@@ -1168,6 +1168,10 @@ function config_update_config()
                         $error_update[] = __('Custom title header');
                     }
 
+                    if (config_update_value('datepicker_first_day', (string) get_parameter('datepicker_first_day'), true) === false) {
+                        $error_update[] = __('Datepicker first day');
+                    }
+
                     if (config_update_value('custom_subtitle_header', (string) get_parameter('custom_subtitle_header'), true) === false) {
                         $error_update[] = __('Custom subtitle header');
                     }
@@ -2736,6 +2740,10 @@ function config_process_config()
         config_update_value('custom_title_header', __('Pandora FMS'));
     }
 
+    if (!isset($config['datepicker_first_day'])) {
+        config_update_value('datepicker_first_day', '0');
+    }
+
     if (!isset($config['custom_subtitle_header'])) {
         config_update_value('custom_subtitle_header', __('the Flexible Monitoring System'));
     }

pandora_console/include/functions_html.php

@@ -7181,6 +7181,8 @@ function html_print_select_date_range(
     $date_text=SECONDS_1DAY,
     $class='w100p'
 ) {
+    global $config;
+
     if ($selected === 'custom') {
         $display_extend = '';
         $display_range = 'style="display:none"';
@@ -7366,14 +7368,42 @@ function html_print_select_date_range(
             dateFormat: '".DATE_FORMAT_JS."',
             changeMonth: true,
             changeYear: true,
-            showAnim: 'slideDown'
+            showAnim: 'slideDown',
+            firstDay: ".$config['datepicker_first_day'].",
+            beforeShowDay: function (date) {
+                var date_now = date.getTime();
+                var date_ini_split = $('[id^=text-date_init]').val().split('/');
+                var date_ini = new Date(date_ini_split[1]+'/'+date_ini_split[2]+'/'+date_ini_split[0]).getTime();
+                var date_end_split = $('[id^=text-date_end]').val().split('/');
+                var date_end = new Date(date_end_split[1]+'/'+date_end_split[2]+'/'+date_end_split[0]).getTime();
+                if (date_now > date_ini && date_now < date_end) {
+                    return [true, 'ui-date-range-in', 'prueba'];
+                } else if (date_now == date_ini || date_now == date_end){
+                    return [true, 'ui-datepicker-current-day', ''];
+                }
+                return [true, '', ''];
+            }
         });
 
         $('[id^=text-date_end]').datepicker ({
             dateFormat: '".DATE_FORMAT_JS."',
             changeMonth: true,
             changeYear: true,
-            showAnim: 'slideDown'
+            showAnim: 'slideDown',
+            firstDay: ".$config['datepicker_first_day'].",
+            beforeShowDay: function (date) {
+                var date_now = date.getTime();
+                var date_ini_split = $('[id^=text-date_init]').val().split('/');
+                var date_ini = new Date(date_ini_split[1]+'/'+date_ini_split[2]+'/'+date_ini_split[0]).getTime();
+                var date_end_split = $('[id^=text-date_end]').val().split('/');
+                var date_end = new Date(date_end_split[1]+'/'+date_end_split[2]+'/'+date_end_split[0]).getTime();
+                if (date_now > date_ini && date_now < date_end) {
+                    return [true, 'ui-date-range-in', 'prueba'];
+                } else if (date_now == date_ini || date_now == date_end){
+                    return [true, 'ui-datepicker-current-day', ''];
+                }
+                return [true, '', ''];
+            }
         });
 
         $('[id^=text-time_end]').timepicker({
@@ -7388,6 +7418,17 @@ function html_print_select_date_range(
             closeText: '".__('Close')."'
         });
 
+        $(window).scroll(function(e){
+            if ($('#date option:selected').val() == 'chose_range'){
+                if ($('#ui-datepicker-div').html() !== '') {
+                    var css_datepicker = $('#ui-datepicker-div').attr('style').replace('absolute','fixed');
+                    if ($(this).scrollTop() > 0){
+                        $('#ui-datepicker-div').attr('style', css_datepicker);
+                    }
+                }
+            }
+        });
+
 	</script>";
 
     if ($return === true) {

pandora_console/include/styles/js/jquery-ui_custom.css

@@ -107,13 +107,17 @@
   height: 30px;
   width: 90px;
 }
-.ui-widget-header .ui-icon {
-  background-image: url(../images/ui-icons_444444_256x240.png);
+
+.ui-datepicker-prev {
+  margin-top: 5px;
+  background: url(../../../images/arrow_left_green.png) no-repeat 0 0 !important;
 }
-.ui-icon,
-.ui-widget-content .ui-icon {
-  background-image: url(../images/ui-icons_444444_256x240.png);
+
+.ui-datepicker-next {
+  margin-top: 5px;
+  background: url(../../../images/arrow_right_green.png) no-repeat 0 0 !important;
 }
+
 .ui-widget-content {
   background: #fff;
 }
@@ -179,7 +183,7 @@ a.ui-state-default > span:hover {
   border-radius: 15px;
   overflow: hidden;
   position: absolute;
-  width: 400px !important;
+  width: 350px !important;
   border: 2px solid var(--primary-color);
 }
 .ui-datepicker .ui-datepicker-header {
@@ -194,7 +198,7 @@ a.ui-state-default > span:hover {
 }
 .ui-datepicker-month,
 .ui-datepicker-year {
-  width: 80px !important;
+  width: 100px !important;
 }
 .ui-datepicker-month {
   margin-left: -10px !important;

pandora_console/include/styles/pandora.css

@@ -12439,3 +12439,7 @@ tr[id^="network_component-plugin-snmp-fields-dynamicMacroRow-"] input {
   flex-wrap: nowrap;
   justify-content: flex-start !important;
 }
+
+.ui-date-range-in > a {
+  background-color: #81b92e3b !important;
+}

pandora_console/operation/network/network_report.php

@@ -126,95 +126,7 @@ $filterTable->size[0] = '33%';
 $filterTable->size[1] = '33%';
 $filterTable->size[2] = '33%';
 $filterTable->data = [];
-
 $filterTable->data[0][0] = html_print_label_input_block(
-    __('Interval'),
-    html_print_extended_select_for_time(
-        'period',
-        $period,
-        '',
-        '',
-        0,
-        false,
-        true
-    ),
-    [ 'div_id' => 'period_container' ]
-);
-
-$filterTable->data[0][0] .= html_print_label_input_block(
-    __('Start date'),
-    html_print_div(
-        [
-            'class'   => '',
-            'content' => html_print_input_text(
-                'date_lower',
-                $date_lower,
-                false,
-                13,
-                10,
-                true
-            ).html_print_image(
-                'images/calendar_view_day.png',
-                true,
-                [
-                    'alt'   => 'calendar',
-                    'class' => 'main_menu_icon invert_filter',
-                ]
-            ).html_print_input_text(
-                'time_lower',
-                $time_lower,
-                false,
-                10,
-                8,
-                true
-            ),
-        ],
-        true
-    ),
-    [ 'div_id' => 'end_date_container' ]
-);
-
-$filterTable->data[0][1] = html_print_label_input_block(
-    __('End date'),
-    html_print_div(
-        [
-            'content' => html_print_input_text(
-                'date',
-                $date_greater,
-                false,
-                13,
-                10,
-                true
-            ).html_print_image(
-                'images/calendar_view_day.png',
-                true,
-                ['alt' => 'calendar']
-            ).html_print_input_text(
-                'time',
-                $time_greater,
-                false,
-                10,
-                8,
-                true
-            ),
-        ],
-        true
-    )
-);
-
-$filterTable->data[0][2] = html_print_label_input_block(
-    __('Defined period'),
-    html_print_checkbox_switch(
-        'is_period',
-        1,
-        ($is_period === true) ? 1 : 0,
-        true,
-        false,
-        'nf_view_click_period()'
-    )
-);
-
-$filterTable->data[1][] = html_print_label_input_block(
     __('Results to show'),
     html_print_select(
         [
@@ -236,7 +148,7 @@ $filterTable->data[1][] = html_print_label_input_block(
     )
 );
 
-$table->data[1][] = html_print_label_input_block(
+$filterTable->data[0][1] = html_print_label_input_block(
     __('Start date'),
     html_print_select_date_range('date', true)
 );