修改運維和歷史資料時間流程

Frontend/_historyData.html

@@ -31,13 +31,13 @@
                 </div>
                 <div class="col-auto">
                     <div class="form-group">
-                        <input class="form-control" id="startdate" type="date" name="date" value="">
+                        <input class="form-control" id="startdate" data-val="" type="date" name="date" value="">
                         <input class="form-control" id="getmonth" type="month" style="display: none"/>
                     </div>
                 </div>
                 <div class="col-auto" id="enddate" style="display: none">
                     <div class="form-group">
-                        <input class="form-control" type="date" name="date" value="">
+                        <input class="form-control" type="date" data-val="" name="date" value="">
                     </div>
                 </div>
                 <div class="col-auto">
@@ -71,7 +71,7 @@
     var historyTable = null;
     $(function () {
         initList();
-
+		$(loadEle).Loading("close");
         // default list filter
         initApp.listFilter($('#js_default_list'), $('#js_default_list_filter'));
         // custom response message
@@ -90,9 +90,34 @@
         onEvent('change', '#startdate', function () {
             let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
 			let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
-            console.log(today);
+
-			console.log(ytd);
+            if (pageAct.dateType == 'range') {
-            if ($(this).val() == today) {
+				if ($('#startdate').val() > $('#enddate input').val() && ($('#startdate').val() != "" && $('#enddate input').val() != "")) {
+					$('#startdate').val($('#startdate').data('val'));
+					toast_error('不可選擇大於結束時間');
+				}
+				else {
+					$('#startdate').data('val', $('#startdate').val());
+                    $('#enddate input').data('val', $('#enddate input').val());
+
+					$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
+					$(`[onclick="setDateType('today', this)"]`).removeClass('btn-dark');
+					$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
+					$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-dark');
+
+                    if ($('#startdate').val() == $('#enddate input').val()) {
+                        if ($('#startdate').val() == today) {
+                            $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
+                            $(`[onclick="setDateType('today', this)"]`).addClass('btn-dark');
+                        }
+                        else if ($('#startdate').val() == ytd) {
+							$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
+							$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-dark');
+						}
+					}
+				}
+			}
+            else if ($(this).val() == today) {
                 $(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
                 $(`[onclick="setDateType('today', this)"]`).addClass('btn-dark');
 				$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
@@ -104,13 +129,37 @@
                 $(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
                 $(`[onclick="setDateType('ytd', this)"]`).addClass('btn-dark');
             }
-            else {
-				$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
-                $(`[onclick="setDateType('today', this)"]`).removeClass('btn-dark');
-				$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
-				$(`[onclick="setDateType('ytd', this)"]`).removClass('btn-dark');
-			}
         });
+
+		onEvent('change', '#enddate input', function () {
+			let today = displayDate(new Date(Date.now()), 'date').replaceAll('/', '-');
+			let ytd = displayDate(new Date(new Date().setDate(new Date(Date.now()).getDate() - 1)), 'date').replaceAll('/', '-');
+			
+			if ($('#startdate').val() > $('#enddate input').val() && ($('#startdate').val() != "" && $('#enddate input').val() != "")) {
+				$('#enddate input').val($('#enddate input').data('val'));
+				toast_error('不可選擇大於結束時間');
+			}
+			else {
+				$('#startdate').data('val', $('#startdate').val());
+				$('#enddate input').data('val', $('#enddate input').val());
+
+				$(`[onclick="setDateType('today', this)"]`).addClass('btn-secondary');
+				$(`[onclick="setDateType('today', this)"]`).removeClass('btn-dark');
+				$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-secondary');
+				$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-dark');
+
+				if ($('#startdate').val() == $('#enddate input').val()) {
+					if ($('#startdate').val() == today) {
+						$(`[onclick="setDateType('today', this)"]`).removeClass('btn-secondary');
+						$(`[onclick="setDateType('today', this)"]`).addClass('btn-dark');
+					}
+					else if ($('#startdate').val() == ytd) {
+						$(`[onclick="setDateType('ytd', this)"]`).removeClass('btn-secondary');
+						$(`[onclick="setDateType('ytd', this)"]`).addClass('btn-dark');
+					}
+				}
+			}
+		});
     });
 
     function initList() {
@@ -283,7 +332,9 @@
             $('#enddate').css('display', 'block');
             $('#getmonth').css('display', 'none');
             $('#startdate').val(now);
+			$('#startdate').data('val', now);
             $('#enddate input').val(tmr);
+            $('#enddate input').data('val', tmr);
         }
         else if (type == "month") {
 			$(`[onclick="setDateType('today', this)"], [onclick="setDateType('ytd', this)"]`).removeClass('btn-dark');

Frontend/_operation.html

@@ -19,12 +19,12 @@
 				</div>
 				<div class="col-auto">
 					<div class="form-group">
-						<input class="form-control" id="startdate" type="date" name="date" value="">
+						<input class="form-control" id="startdate" data-val="" type="date" name="date" value="">
 					</div>
 				</div>
 				<div class="col-auto">
 					<div class="form-group">
-						<input class="form-control" id="enddate" type="date" name="date" value="">
+						<input class="form-control" id="enddate" type="date" data-val="" name="date" value="">
 					</div>
 				</div>
 				<div class="col-auto" style="display: none">
@@ -572,23 +572,50 @@
 		pageAct.startdate = startdate;
 		pageAct.enddate = enddate;
 
-		if (dateType == 'tdy') {
+		if ($('#startdate').val() > $('#enddate').val()) {
-			pageAct.startdate = new Date(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date'));
+			$('#startdate').val($('#startdate').data('val'));
-		}
+			$('#enddate').val($('#enddate').data('val'));
-		else if (dateType == 'ytd') {
+			toast_error('不可選擇大於結束時間');
-			pageAct.startdate = new Date(displayDate(new Date(new Date().setDate(new Date().getDate() - 1)), 'date'));
 		}
 		else {
-			$(`[onclick^=setDate]`).removeClass('btn-dark');
+			let today = displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-');
-			$(`[onclick^=setDate]`).addClass('btn-secondary');
+			let ytd = displayDate(new Date(new Date().setDate(new Date().getDate() - 1)), 'date').replaceAll('/', '-')
-		}
 
-		refTable();
+			if (dateType == 'tdy') {
+				pageAct.startdate = new Date(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date'));
+				$('#startdate').val(today);
+				$('#startdate').data('val', today);
+				$('#enddate').val(today);
+				$('#enddate').data('val', today);
+			}
+			else if (dateType == 'ytd') {
+				pageAct.startdate = new Date(displayDate(new Date(new Date().setDate(new Date().getDate() - 1)), 'date'));
+				$('#startdate').val(ytd);
+				$('#startdate').data('val', ytd);
+				$('#enddate').val(ytd);
+				$('#enddate').data('val', ytd);
+			}
+			else {
+				$(`[onclick^=setDate]`).removeClass('btn-dark');
+				$(`[onclick^=setDate]`).addClass('btn-secondary');
+				if ($('#startdate').val() == $('#enddate').val()) {
+					if ($('#startdate').val() == today)
+						$(`[onclick="setDate('tdy')"]`).click();
+					else if ($('#startdate').val() == ytd)
+						$(`[onclick="setDate('ytd')"]`).click();
+				}
+				$('#startdate').data('val', $('#startdate').val());
+				$('#enddate').data('val', $('#enddate').val());
+			}
+
+			refTable();
+		}
 	}
 
 	function initDate() {
-		$('#startdate').val(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-'));
+		//$('#startdate').val(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-'));
-		$('#enddate').val(displayDate(new Date(new Date().setDate(new Date().getDate() + 1)), 'date').replaceAll('/', '-'));
+		//$('#enddate').val(displayDate(new Date(new Date().setDate(new Date().getDate())), 'date').replaceAll('/', '-'));
+		$(`[onclick="setDate('tdy')"]`).click();
 	}
 
 	function clearPageAct() {

Frontend/index.html

@@ -2129,6 +2129,9 @@ License: You must have a valid license purchased only from wrapbootstrap.com (li
                         "n4js/historybaja",
                         "lib/statistics/flot/flot.bundle",
                         "lib/statistics/peity/peity.bundle",
+						"lib/jquery-validation/dist/jquery.validate",
+						"lib/jquery-validation/dist/additional-methods.min",
+                        "lib/jquery-validation/dist/localization/messages_zh_TW",
                     ], loadedMasterPack);
             }
             /**