operation更動

SolarPower/Models/Operation.cs

@@ -161,21 +161,32 @@ namespace SolarPower.Models
             }
             set { endTime = value; }
         } // 結束時間
-        public string FinishTime
+        public string FinishTime { get; set; }
-        {
+        //public string FinishTime
-            get
+        //{
-            {
+        //    get
-                if (!string.IsNullOrEmpty(finishTime))
+        //    {
-                {
+        //        if (!string.IsNullOrEmpty(finishTime))
-                    return Convert.ToDateTime(finishTime).ToString("yyyy-MM-dd");
+        //        {
-                }
+        //            return Convert.ToDateTime(finishTime).ToString("yyyy-MM-dd");
-                else
+        //        }
-                {
+        //        else
-                    return string.Empty;
+        //        {
-                }
+        //            return string.Empty;
-            }
+        //        }
-            set { finishTime = value; }
+        //    }
-        } // 完成時間
+        //    set
+        //    {
+        //        if (!string.IsNullOrEmpty(value))
+        //        {
+        //            finishTime = value;
+        //        }
+        //        else
+        //        {
+        //            finishTime = string.Empty;
+        //        }
+        //    }
+        //} // 完成時間
         public string WorkTime
         {
             get
@@ -253,7 +264,7 @@ namespace SolarPower.Models
         {
             get
             {
-                if(!string.IsNullOrEmpty(StartTime) || !string.IsNullOrEmpty(EndTime))
+                if (!string.IsNullOrEmpty(StartTime) || !string.IsNullOrEmpty(EndTime))
                 {
                     return StartTime + " ~ " + EndTime;
                 }

SolarPower/Repository/Implement/OperationRepository.cs

@@ -63,7 +63,7 @@ namespace SolarPower.Repository.Implement
             List<OperationPlanTable> result;
             var count = 0;
             string Wheresql = "oc.PowerStationId = ";
-            if( id != null)
+            if( id.Count > 0 )
             {
                 foreach (int too in id)
                 {
@@ -218,6 +218,7 @@ namespace SolarPower.Repository.Implement
 
                     if (filter.WorkType > 0)
                     {
+                        filter.WorkType -= 1; 
                         sql += @" AND opr.WorkType = @WorkType";
 
                         if (!string.IsNullOrEmpty(filter.Range))
@@ -228,18 +229,18 @@ namespace SolarPower.Repository.Implement
                     else
                     {
                         sql += @" AND opr.WorkType IN (0, 1)";
-                        sql += @" UNION";
+                        //sql += @" UNION";
-                        sql += @" SELECT
+                        //sql += @" SELECT
-                                opr.*,
+                        //        opr.*,
-                                ps.Name AS PowerStationName,
+                        //        ps.Name AS PowerStationName,
-                                u.Name AS WorkPersonName
+                        //        u.Name AS WorkPersonName
-                                FROM operation_record opr
+                        //        FROM operation_record opr
-                                LEFT JOIN power_station ps ON opr.PowerStationId = ps.Id
+                        //        LEFT JOIN power_station ps ON opr.PowerStationId = ps.Id
-                                LEFT JOIN user u ON opr.WorkPersonId = u.ID
+                        //        LEFT JOIN user u ON opr.WorkPersonId = u.ID
-                                WHERE opr.Deleted = 0
+                        //        WHERE opr.Deleted = 0
-                                AND ps.CityId IN @CityIds
+                        //        AND ps.CityId IN @CityIds
-                                AND ps.Id IN @PowerStationIds
+                        //        AND ps.Id IN @PowerStationIds
-                                AND opr.WorkType = 2";
+                        //        AND opr.WorkType = 2";
                     }
 
                     result = (await conn.QueryAsync<OperationRecodeDataTable>(sql, filter)).ToList();

SolarPower/Views/Operation/Index.cshtml

@@ -288,7 +288,7 @@
                         powerids.push(String(val.id));
                         Allpowerids.push(String(val.id));
                     });
-
+                    OperationPlanTable.ajax.reload();
                 })
             })
             //#endregion
@@ -360,8 +360,8 @@
                     "url": "/Operation/OperationPlanTable",
                     "type": "POST",
                     "data": function (d) {
-/*                        d.id = powerids,*/
+                        d.id = powerids,
-                            d.id = [1],
+/*                            d.id = [1],*/
                         d.type = type
                     },
                     "dataSrc": function (rel) {
@@ -379,6 +379,7 @@
             });
             //#endregion
         })
+
         //#region 縣市全選
         function Allcity()
         {
@@ -389,7 +390,6 @@
                 document.getElementById(cityid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
                 ids.push(val);
             });
-            alert(ids + "..........." + powerids);
             var send_data = {
                 cityid: ids
             }
@@ -422,7 +422,7 @@
         }
         //#endregion
 
-        //#region 縣市全選
+        //#region 電站全選
         function Allpowerstation() {
             powerids = [];
             $.each(Allpowerids, function (index,val) {

SolarPower/Views/Operation/OperationRecord.cshtml

@@ -19,13 +19,13 @@
 <div id="panel-5" class="panel">
     <div class="panel-container show">
         <div class="panel-content">
-            <div class="row mb-5 d-flex justify-content-start">
+            <div class="row mb-3 d-flex justify-content-start px-3">
                 <div class="pr-3">
                     <div class="btn-group btn-group-md">
-                        <button type="button" class="btn btn-success waves-effect waves-themed">全部</button>
+                        <button type="button" class="btn btn-success waves-effect waves-themed" onclick="ChangeType(0)" id="button0">全部</button>
-                        <button type="button" class="btn btn-secondary waves-effect waves-themed">維修</button>
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeType(3)" id="button3">維修</button>
-                        <button type="button" class="btn btn-secondary waves-effect waves-themed">巡檢</button>
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeType(2)" id="button2">巡檢</button>
-                        <button type="button" class="btn btn-secondary waves-effect waves-themed">清洗</button>
+                        <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="ChangeType(1)" id="button1">清洗</button>
                     </div>
                 </div>
                 <div class="pr-3">
@@ -33,11 +33,37 @@
                 </div>
                 <div class="pr-3">
                     <div class="form-group">
-                        <input class="form-control" id="example-date" type="date" name="date" value="2023-07-23">
+                        <input class="form-control" id="example-date" type="text" name="date" value="2023-07-23">
+                    </div>
+                </div>
+            </div>
+            <div class="row mb-3 d-flex align-items-center px-3">
+                <div class="pr-3">
+                    <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="Allcity()">全部縣市</button>
+                </div>
+                <div class="pr-3">
+                    <div class="frame-wrap" id="citytest" style="display:none">
+                        <button type="button" class="btn btn-outline-success waves-effect waves-themed">
+                            新北市
+                            <span class="badge bg-success-700 ml-2" id="acount">4</span>
+                        </button>
+                    </div>
+                    <div class="frame-wrap" id="city">
+
                     </div>
                 </div>
             </div>
 
+            <div class="row mb-5 d-flex align-items-center px-3">
+                <div class="pr-3">
+                    <button type="button" class="btn btn-secondary waves-effect waves-themed" onclick="Allpowerstation()">全選</button>
+                </div>
+                <div class="pr-3">
+                    <div class="frame-wrap" id="CheckPowerStation">
+
+                    </div>
+                </div>
+            </div>
 
             <div class="row d-flex justify-content-end px-3">
                 <button type="button" class="btn btn-info waves-effect waves-themed mb-3 mr-2" onclick="ExportExcel()">
@@ -79,7 +105,7 @@
                             <th>狀態</th>
                             <th>執行人員</th>
                             <th>本次作業預計</th>
-                            <th>照片</th>
+                            @*<th>照片</th>*@
                             <th>完成時間</th>
                         </tr>
                     </thead>
@@ -217,11 +243,66 @@
         var recode;
         var countOperationRecodeFile = 0;
         var recodeFileDropzone;
+        var ids = new Array(0);//當前選擇縣市
+        var powerids = new Array(0);//當前選擇電站
+        var Allids = new Array(0);//全部縣市
+        var Allpowerids = new Array(0);//全部電站
+        var Type = 0; // 項目
 
+        //#region Array.Remove
+        Array.prototype.remove = function (val) {
+            var index = this.indexOf(val);
+            if (index > -1) {
+                this.splice(index, 1);
+            }
+        };
+        //#endregion
 
         $(function () {
+            $('input[id="example-date"]').daterangepicker({
+                opens: 'left'
+            }, function (start, end, label) {
+                console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
+            });
+
             //#region 預設載入該使用者可以選擇的電站
-            GetPowerStation();
+            //#region 載入縣市
+            var Nurl = "/PowerStation/GetSolarCitySummary";
+            $.post(Nurl, function (rel) {
+                if (rel.code != "0000") {
+                    toast_error(rel.msg);
+                    return;
+                }
+                for (var i = 0; i < rel.data.length; i++) {
+                    $('#city').append("<button type='button' class='btn btn-success waves-effect waves-themed ml-2' id='" + 'cityID_' + rel.data[i].cityId + "'>" +
+                        rel.data[i].city +
+                        "<span class= 'badge bg-success-700 ml-2' >" + rel.data[i].amount + "</span >" +
+                        "</button >");
+                    ids.push(String(rel.data[i].cityId));
+                    Allids.push(String(rel.data[i].cityId));
+                }
+                var send_data = {
+                    cityid: ids
+                }
+                ids.sort();
+                var Nurl = "/PowerStation/GetSolarByCity";
+                $.post(Nurl, send_data, function (rel) {
+                    if (rel.code != "0000") {
+                        toast_error(rel.msg);
+                        return;
+                    }
+                    $('#CheckPowerStation').empty();
+                    $.each(rel.data, function (index, val) {
+                        $('#CheckPowerStation').append("<div class='custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
+                        $('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "' checked>");
+                        $('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
+                        powerids.push(String(val.id));
+                        Allpowerids.push(String(val.id));
+                    });
+                    operationRecodeTable.ajax.reload();
+                })
+            })
+            //#endregion
             //#endregion
 
             //#region 切換電站時，載入該電站運維人員
@@ -251,8 +332,6 @@
                             $("#work_person_select_modal").val(recode.workPersonId);
                         }
                     }
-                    //#endregion
-
                 });
             });
             //#endregion
@@ -282,9 +361,12 @@
                     "data": "workPersonName"
                 }, {
                     "data": "operationPredict"
-                }, {
+                    },
-                    "data": "fileList"
+                    //{
-                }, {
+                    //"data": "fileList"
+                    //}
+                    //,
+                    {
                     "data": "finishTime"
                 }],
                 "language": {
@@ -318,8 +400,8 @@
                     "type": "POST",
                     "data": function (d) {
                         d.CityIds = [3];
-                        d.PowerStationIds = [1];
+                        d.PowerStationIds = powerids;
-                        d.WorkType = $('#company_phone').val();
+                        d.WorkType = Type;
                         d.Range = $('#company_taxIDNumber').val();
                     },
                     "dataSrc": function (rel) {
@@ -339,8 +421,25 @@
                 }
             });
             //#endregion
+
+
         });
 
+        //#region 改變項目
+        function ChangeType(type)
+        {
+            Type = type;
+            for (var i = 0; i < 4; i++)
+            {
+                var name = "button" + i; 
+                document.getElementById(name).setAttribute("class", "btn btn-secondary waves-effect waves-themed");
+            }
+            document.getElementById("button" + type).setAttribute("class", "btn btn-success waves-effect waves-themed");
+            operationRecodeTable.ajax.reload();
+
+        }
+        //#endregion
+
         //#region 新增維修單
         function AddRecode() {
             selected_id = 0;
@@ -355,6 +454,123 @@
         }
         //#endregion
 
+        //#region 縣市全選
+        function Allcity() {
+            var Newpowerids = new Array(0);
+            ids = [];
+            $.each(Allids, function (index, val) {
+                var cityid = 'cityID_' + val;
+                document.getElementById(cityid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
+                ids.push(val);
+            });
+            var send_data = {
+                cityid: ids
+            }
+            var Nurl = "/PowerStation/GetSolarByCity";
+            $.post(Nurl, send_data, function (rel) {
+                if (rel.code != "0000") {
+                    toast_error(rel.msg);
+                    return;
+                }
+                $('#CheckPowerStation').empty();
+                Allpowerids = [];
+                $.each(rel.data, function (index, val) {
+                    if (powerids.includes(String(val.id))) {
+                        $('#CheckPowerStation').append("<div class='custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
+                        $('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "' checked>");
+                        $('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
+                        Newpowerids.push(String(val.id));
+                    }
+                    else {
+                        $('#CheckPowerStation').append("<div class='custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
+                        $('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "'>");
+                        $('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
+                    }
+                    Allpowerids.push(String(val.id));
+                });
+                powerids = [];
+                powerids = Newpowerids;
+            })
+
+        }
+        //#endregion
+
+        //#region 電站全選
+        function Allpowerstation() {
+            powerids = [];
+            $.each(Allpowerids, function (index, val) {
+                $('#check_' + val).prop("checked", true);
+                powerids.push(val);
+            })
+            OperationPlanTable.ajax.reload();
+        }
+        //#endregion
+
+        //#region 選擇縣市
+        $('#city').on("click", "button", function () {
+            var clickid = $(this).attr('id');
+            var classid = clickid.split("_");
+            var Newpowerids = new Array(0);
+            var value = document.getElementById(clickid).className;
+            ids.sort(function (a, b) {
+                return a - b;
+            });
+            var send_data = {
+                cityid: ids
+            }
+            if (value == 'btn btn-outline-success waves-effect waves-themed ml-2') {  //選擇
+                document.getElementById(clickid).setAttribute("class", 'btn btn-success waves-effect waves-themed ml-2');
+                ids.push(classid[1]);
+            }
+            else { //取消
+                document.getElementById(clickid).setAttribute("class", 'btn btn-outline-success waves-effect waves-themed ml-2');
+                ids.remove(classid[1]);
+            }
+            ids.sort();
+            var Nurl = "/PowerStation/GetSolarByCity";
+            $.post(Nurl, send_data, function (rel) {
+                if (rel.code != "0000") {
+                    toast_error(rel.msg);
+                    return;
+                }
+                $('#CheckPowerStation').empty();
+                Allpowerids = [];
+                $.each(rel.data, function (index, val) {
+                    if (powerids.includes(String(val.id))) {
+                        $('#CheckPowerStation').append("<div class='custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
+                        $('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "' checked>");
+                        $('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
+                        Newpowerids.push(String(val.id));
+                    }
+                    else {
+                        $('#CheckPowerStation').append("<div class='custom-control custom-checkbox custom-control-inline' id='station_" + val.id + "' > ");
+                        $('#station_' + val.id).append("<input type='checkbox' class='custom-control-input' id='check_" + val.id + "'>");
+                        $('#station_' + val.id).append("<label class='custom-control-label' for='check_" + val.id + "'>" + val.name + "</label>");
+                    }
+                    Allpowerids.push(String(val.id));
+                });
+                powerids = [];
+                powerids = Newpowerids;
+            })
+        })
+        //#endregion
+
+        //#region 選擇電站checkbox
+        $('#CheckPowerStation').on("click", "input", function () {
+            var clickid = $(this).attr('id');
+            var classid = clickid.split("_");
+            var job = document.getElementById(clickid);
+            if (job.checked == true) {
+                powerids.push(classid[1]);
+            }
+            else {
+                powerids.remove(classid[1]);
+            }
+            OperationPlanTable.ajax.reload();
+        })
+
+        //#endregion
+
         //#region 編輯表單內容
         $('#operation_recode_table').on("click", "a.edit-btn", function () {
 
@@ -465,7 +681,7 @@
 
                         var myDropzone = Dropzone.forElement("#recode-file-div");
 
-                        if (myDropzone.getAcceptedFiles().length > 1) {
+                        //if (myDropzone.getAcceptedFiles().length > 1) {
 
                             myDropzone.processQueue();
 
@@ -481,12 +697,12 @@
 
                                 operationRecodeTable.ajax.reload();
                             });
-                        } else {
+                        //} else {
-                            $('#recode-form-modal').modal('hide');
+                        //    $('#recode-form-modal').modal('hide');
-                            myDropzone.removeAllFiles();
+                        //    myDropzone.removeAllFiles();
 
-                            operationRecodeTable.ajax.reload();
+                        //    operationRecodeTable.ajax.reload();
-                        }
+                        //}
                     }
                 });
             }

SolarPower/Views/Shared/_Layout.cshtml

@@ -36,6 +36,8 @@
     <!--Custome CSS-->
     <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
 
+    <link rel="stylesheet" type="text/css" media="all" href="~/css/daterangepicker.css">
+
 </head>
 <body class="mod-bg-1">
 
@@ -1115,7 +1117,11 @@
     <!-- Custome JS -->
     <script src="~/js/site.js" asp-append-version="true"></script>
 
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
+    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
+    <!--<script src="~/js/daterangepicker.js"></script>-->
+
     @*各頁面的JavaScript*@
     @RenderSection("Scripts", required: false)
 </body>
-</html>
+    </html>

SolarPower/wwwroot/css/daterangepicker.css

@@ -0,0 +1,410 @@
+.daterangepicker {
+  position: absolute;
+  color: inherit;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #ddd;
+  width: 278px;
+  max-width: none;
+  padding: 0;
+  margin-top: 7px;
+  top: 100px;
+  left: 20px;
+  z-index: 3001;
+  display: none;
+  font-family: arial;
+  font-size: 15px;
+  line-height: 1em;
+}
+
+.daterangepicker:before, .daterangepicker:after {
+  position: absolute;
+  display: inline-block;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.daterangepicker:before {
+  top: -7px;
+  border-right: 7px solid transparent;
+  border-left: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+}
+
+.daterangepicker:after {
+  top: -6px;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #fff;
+  border-left: 6px solid transparent;
+}
+
+.daterangepicker.opensleft:before {
+  right: 9px;
+}
+
+.daterangepicker.opensleft:after {
+  right: 10px;
+}
+
+.daterangepicker.openscenter:before {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.openscenter:after {
+  left: 0;
+  right: 0;
+  width: 0;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.daterangepicker.opensright:before {
+  left: 9px;
+}
+
+.daterangepicker.opensright:after {
+  left: 10px;
+}
+
+.daterangepicker.drop-up {
+  margin-top: -7px;
+}
+
+.daterangepicker.drop-up:before {
+  top: initial;
+  bottom: -7px;
+  border-bottom: initial;
+  border-top: 7px solid #ccc;
+}
+
+.daterangepicker.drop-up:after {
+  top: initial;
+  bottom: -6px;
+  border-bottom: initial;
+  border-top: 6px solid #fff;
+}
+
+.daterangepicker.single .daterangepicker .ranges, .daterangepicker.single .drp-calendar {
+  float: none;
+}
+
+.daterangepicker.single .drp-selected {
+  display: none;
+}
+
+.daterangepicker.show-calendar .drp-calendar {
+  display: block;
+}
+
+.daterangepicker.show-calendar .drp-buttons {
+  display: block;
+}
+
+.daterangepicker.auto-apply .drp-buttons {
+  display: none;
+}
+
+.daterangepicker .drp-calendar {
+  display: none;
+  max-width: 270px;
+}
+
+.daterangepicker .drp-calendar.left {
+  padding: 8px 0 8px 8px;
+}
+
+.daterangepicker .drp-calendar.right {
+  padding: 8px;
+}
+
+.daterangepicker .drp-calendar.single .calendar-table {
+  border: none;
+}
+
+.daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span {
+  color: #fff;
+  border: solid black;
+  border-width: 0 2px 2px 0;
+  border-radius: 0;
+  display: inline-block;
+  padding: 3px;
+}
+
+.daterangepicker .calendar-table .next span {
+  transform: rotate(-45deg);
+  -webkit-transform: rotate(-45deg);
+}
+
+.daterangepicker .calendar-table .prev span {
+  transform: rotate(135deg);
+  -webkit-transform: rotate(135deg);
+}
+
+.daterangepicker .calendar-table th, .daterangepicker .calendar-table td {
+  white-space: nowrap;
+  text-align: center;
+  vertical-align: middle;
+  min-width: 32px;
+  width: 32px;
+  height: 24px;
+  line-height: 24px;
+  font-size: 12px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.daterangepicker .calendar-table {
+  border: 1px solid #fff;
+  border-radius: 4px;
+  background-color: #fff;
+}
+
+.daterangepicker .calendar-table table {
+  width: 100%;
+  margin: 0;
+  border-spacing: 0;
+  border-collapse: collapse;
+}
+
+.daterangepicker td.available:hover, .daterangepicker th.available:hover {
+  background-color: #eee;
+  border-color: transparent;
+  color: inherit;
+}
+
+.daterangepicker td.week, .daterangepicker th.week {
+  font-size: 80%;
+  color: #ccc;
+}
+
+.daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date {
+  background-color: #fff;
+  border-color: transparent;
+  color: #999;
+}
+
+.daterangepicker td.in-range {
+  background-color: #ebf4f8;
+  border-color: transparent;
+  color: #000;
+  border-radius: 0;
+}
+
+.daterangepicker td.start-date {
+  border-radius: 4px 0 0 4px;
+}
+
+.daterangepicker td.end-date {
+  border-radius: 0 4px 4px 0;
+}
+
+.daterangepicker td.start-date.end-date {
+  border-radius: 4px;
+}
+
+.daterangepicker td.active, .daterangepicker td.active:hover {
+  background-color: #357ebd;
+  border-color: transparent;
+  color: #fff;
+}
+
+.daterangepicker th.month {
+  width: auto;
+}
+
+.daterangepicker td.disabled, .daterangepicker option.disabled {
+  color: #999;
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+.daterangepicker select.monthselect, .daterangepicker select.yearselect {
+  font-size: 12px;
+  padding: 1px;
+  height: auto;
+  margin: 0;
+  cursor: default;
+}
+
+.daterangepicker select.monthselect {
+  margin-right: 2%;
+  width: 56%;
+}
+
+.daterangepicker select.yearselect {
+  width: 40%;
+}
+
+.daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {
+  width: 50px;
+  margin: 0 auto;
+  background: #eee;
+  border: 1px solid #eee;
+  padding: 2px;
+  outline: 0;
+  font-size: 12px;
+}
+
+.daterangepicker .calendar-time {
+  text-align: center;
+  margin: 4px auto 0 auto;
+  line-height: 30px;
+  position: relative;
+}
+
+.daterangepicker .calendar-time select.disabled {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.daterangepicker .drp-buttons {
+  clear: both;
+  text-align: right;
+  padding: 8px;
+  border-top: 1px solid #ddd;
+  display: none;
+  line-height: 12px;
+  vertical-align: middle;
+}
+
+.daterangepicker .drp-selected {
+  display: inline-block;
+  font-size: 12px;
+  padding-right: 8px;
+}
+
+.daterangepicker .drp-buttons .btn {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: bold;
+  padding: 4px 8px;
+}
+
+.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
+  border-right: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.rtl .drp-calendar.right {
+  border-right: 1px solid #ddd;
+}
+
+.daterangepicker.show-ranges.ltr .drp-calendar.left {
+  border-left: 1px solid #ddd;
+}
+
+.daterangepicker .ranges {
+  float: none;
+  text-align: left;
+  margin: 0;
+}
+
+.daterangepicker.show-calendar .ranges {
+  margin-top: 8px;
+}
+
+.daterangepicker .ranges ul {
+  list-style: none;
+  margin: 0 auto;
+  padding: 0;
+  width: 100%;
+}
+
+.daterangepicker .ranges li {
+  font-size: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+}
+
+.daterangepicker .ranges li:hover {
+  background-color: #eee;
+}
+
+.daterangepicker .ranges li.active {
+  background-color: #08c;
+  color: #fff;
+}
+
+/*  Larger Screen Styling */
+@media (min-width: 564px) {
+  .daterangepicker {
+    width: auto;
+  }
+
+  .daterangepicker .ranges ul {
+    width: 140px;
+  }
+
+  .daterangepicker.single .ranges ul {
+    width: 100%;
+  }
+
+  .daterangepicker.single .drp-calendar.left {
+    clear: none;
+  }
+
+  .daterangepicker.single .ranges, .daterangepicker.single .drp-calendar {
+    float: left;
+  }
+
+  .daterangepicker {
+    direction: ltr;
+    text-align: left;
+  }
+
+  .daterangepicker .drp-calendar.left {
+    clear: left;
+    margin-right: 0;
+  }
+
+  .daterangepicker .drp-calendar.left .calendar-table {
+    border-right: none;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .daterangepicker .drp-calendar.right {
+    margin-left: 0;
+  }
+
+  .daterangepicker .drp-calendar.right .calendar-table {
+    border-left: none;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .daterangepicker .drp-calendar.left .calendar-table {
+    padding-right: 8px;
+  }
+
+  .daterangepicker .ranges, .daterangepicker .drp-calendar {
+    float: left;
+  }
+}
+
+@media (min-width: 730px) {
+  .daterangepicker .ranges {
+    width: auto;
+  }
+
+  .daterangepicker .ranges {
+    float: left;
+  }
+
+  .daterangepicker.rtl .ranges {
+    float: right;
+  }
+
+  .daterangepicker .drp-calendar.left {
+    clear: none !important;
+  }
+}