IoT platform Design experience: DateTimePicker implementation of choice linkage

The so-called linkage, that is, when I DateTimePicker1 choose February 4, I DateTimePicker2 can only choose February 4 and February 5 two days, of course, you can specify the date you want to choose. This is a very common feature in some chart query conditions. Let's take a look at how to design.

Selection and use of DateTimePicker

Here, we use the DateTimePicker is an open source component, his model name is: Ui.bootstrap.datetimepicker, we can go to this URL to find its related content:/http dalelotts.github.io/angular-bootstrap-datetimepicker/, then download its corresponding package, put it in the project, and make a reference (note that there is no less moment.js, it is built on the basis of this component) ：

    <!--DateTimePicker part-->    <link href= "~/content/front/angular-datetimepicker/css/ Datetimepicker.css "rel=" stylesheet "/>    <script src=" ~/content/front/angular-datetimepicker/js/ Moment.js "></script>    <script src=" ~/content/front/angular-datetimepicker/js/zh-cn.js "></ script>    <script src= "~/content/front/angular-datetimepicker/js/datetimepicker.js" ></script>

Then register in the module:

var app = Angular.module (' Dsbootstrap ', [                                        ' Ui.grid ',                                        ' ui.grid.selection ',                                        ' ui.grid.pagination ',                                        ' Ngcookies ',                                        ' Ui.bootstrap.datetimepicker '                                        ]);

Finally, you can use the layout of the HTML page:

  <div class= "Row" ng-show= "visible" > <div class= "col-md-4" > <div class= "input-gr                    OUP "> <span class=" Input-group-addon "id=" Basic-addon1 "> Start time:</span> <div class= "dropdown" > <a class= "dropdown-toggle" id= "StartTime" role= "button" Data-toggle                                = "Dropdown" data-target= "#" href= "#" > <div class= "Input-group" > <input type= "text" class= "Form-control" data-ng-model= "starttime|date: ' Yyyy-mm-dd '" ><span class= "input- Group-addon "><i class=" Glyphicon Glyphicon-calendar "></i></span> </div&                        Gt                            </a> <ul class= "Dropdown-menu" role= "menu" aria-labelledby= "Dlabel" > <datetimepicker data-ng-model= "StartTime" Data-on-set-time= "Ontimeset (newdate, olddate)" Data-datetimepickeR-config= "{dropdownselector: ' #starttime ', Startview: ' Day ', Minview: ' Day '} '/> </ul>                </div> </div> </div> <div class= "Col-md-4" > <div class= "Input-group" > <span class= "Input-group-addon" id= "Basic-addon1" > End Time:</span> <div class= "dropdown" > <a class= "dropdown-toggle" id= " Endtime "role=" button "data-toggle=" dropdown "data-target=" # "href=" # "> <div class=" input -group "> <input type=" text "class=" Form-control "data-ng-model=" endtime|date: ' yyyy-mm -dd ' "><span class=" Input-group-addon "><i class=" Glyphicon Glyphicon-calendar "></i></span > </div> </a> <ul class= "Dropdo Wn-menu "id=" EndContainer "role="Menu "aria-labelledby=" Dlabel "> </ul> </ div> </div> </div> </div>

So that we can finish the first step of the work. From the above HTML code we can see that starttime and Endtime are passed to the controller in the selected date value. And our Endtime DateTimePicker we did not put to the front desk, we need to build dynamically in the background. Why is it? Because we need to calculate the selection range of the Endtime based on the selected values of StartTime, we need to dynamically generate bindings here.

Linkage of DateTimePicker

Below we begin to design its linkage work.

First, when the start time is selected, it enters the Ontimeset event, in which we first dynamically generate the end time selector:

 $scope. Ontimeset = function (Newdate, olddate) {var starttimefmt = Moment ($scope. starttime). Format ("yyyy-mm-d        D ");             var endtimefmt = Moment (STARTTIMEFMT). Add (1, ' Day '). Format ("Yyyy-mm-dd");        The time box is empty $ ("#endtime input"). Val ("");        Removes the original DateTimePicker object $ ("#endContainer"). Children (). remove ();        Set config $scope. config = {dropdownselector: ' #endtime ', Startview: ' Day ', Minview: ' Day '}; Dynamically compiled DateTimePicker directive var compiledehtml = $compile (' <datetimepicker data-ng-model= ' Endtime ' data-befor E-render= "BeforeRender ($view, $dates, $leftDate, $upDate, $rightDate)" data-datetimepicker-config= "{{config}}"/>        ') ($scope);    Put the HTML container $ ("#endContainer"). Append (compiledehtml); }

Then, when the above method executes to $compile, it triggers its BeforeRender event, which allows some related actions to be made before the control is loaded. We use this event to throw a Days-check event in order to dynamically load the time range:

    When the start time is selected, the Ontimeset event is entered, and when executed to $compile, it triggers the following BeforeRender event    //Trigger Beforereder event, which throws a Days-check event out, And comes with all the When page time objects.    $scope. BeforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) {        $timeout (function () {            $ Scope. $broadcast (' Days-check ', $dates);        });    

Finally, we receive this event:

//Receive events and reset page $scope. $on (' Days-check ', function (e, D) {for (var i = 0; i < d.length; i++) {            The initial setting is not selectable, the status D[i].active = False is not selected;            D[i].selectable = false;            The value of the current loop var currentdate = Moment (d[i].utcdatevalue). Format ("Yyyy-mm-dd");            The currently selected start time var starttimefmt = Moment ($scope. starttime). Format ("Yyyy-mm-dd");            Allows the selected maximum end time var endtimefmt = Moment (STARTTIMEFMT). Add (1, ' Day '). Format ("Yyyy-mm-dd"); Compare and set optional dates if (currentdate >= starttimefmt && currentdate <= endtimefmt) {D[I].S            electable = true; }        }    });

When we receive this Days-check event, we will first reset all the dates to be non-selectable and then determine the selection based on the pre-set values. Thus, with the above setting, our end time can be linked according to the choice of the start time. Isn't it convenient? Finally, the controller population Code is attached:

App.controller (' Collectorcontroller ', [' $scope ', ' $cookies ', ' $timeout ', ' $compile ', ' baseservice ', ' Collectorservice ', ' uigridconstants ', function ($scope, $cookies, $timeout, $compile, Baseservice, Collectorservice,    uigridconstants) {var = this; $scope.    Provincedata = null; $scope.    Citydata = null; $scope.    Districtdata = null;    $scope. Companydata = null; $scope.    Machinedata = null; $scope.    RealTimeData = null; $scope.    Historydata = null;    $scope. selectedprovince = null;    $scope. selectedcity = null;    $scope. selecteddistrict = null;    $scope. Selectedcompany = null;    $scope. Selectedmachine = null;    $scope. starttime = null;    $scope. Endtime = null;  $scope. Visible = false; DateTimePicker whether to show//art.dialog ({title: ' Loading hint ', Icon: ' Face-smile ', Fixed:true,left: ' 50% ', top:0, Time:3, content: " The date selection span should not be too large, or it will be too large to load the chart and list!    ", padding:0}); Monitor changes in the province, and if so, load the city list $scope. $watchCollection (' Selectedprovince ', function (Oldval, newval) {$sCope.    Getcitylist ();    }); Monitor city changes and load the region list $scope if a change occurs. $watchCollection (' selectedcity ', function (Oldval, newval) {$scope.    Getdistrictlist ();    }); Monitor regional changes and, if changes occur, load the company list $scope. $watchCollection (' Selecteddistrict ', function (Oldval, newval) {$scope.    Getcompanylist ();    }); Monitor company changes and load the machine list $scope if a change occurs. $watchCollection (' Selectedcompany ', function (Oldval, newval) {$scope.    Getmachinelist ();    }); Binding list $scope. Gridoptions = {enablerowselection:true, enableselectall:false, Selectionrowheader Width:35, rowheight:35, Showgridfooter:false, Multiselect:true, Enablepaginationcontrols:    True, paginationpagesizes: [9, +], paginationpagesize:9};            $scope. gridoptions.columndefs = [{name: ' Param_name ', displayName: ' parameter name '},{name: ' Param_unit ', displayName: ' Parameter unit '}, {name: ' Param_data ', displayName: ' parameter value '}, {name: ' Param_time ', DisplaynaMe: ' Acquisition Time '}];    $scope. Gridoptions.onregisterapi = function (GRIDAPI) {$scope. Gridapi = Gridapi;    };        Province bound Collectorservice.getprovincedata (). Then (function (data) {var flag = data.data.success; if (flag) {$scope.            Provincedata = Data.data.data; $scope. selectedprovince = Baseservice.getselecteddatamapper ($scope.        Provincedata, ' Province ');    }}, NULL); $scope.        Getcitylist = function () {var Selectedprovinceid;        if ($scope. selectedprovince! = undefined) Selectedprovinceid = $scope. selectedprovince.id;        else return; City bound Collectorservice.getcitydata (Selectedprovinceid). Then (function (data) {var flag = DATA.DATA.SUCC            Ess if (flag) {$scope.                Citydata = Data.data.data; $scope. selectedcity = Baseservice.getselecteddatamapper ($scope.            Citydata, ' city ');    }}, NULL); } $scope. Getdistrictlist = functIon () {var Selectedcityid;        if ($scope. selectedcity! = undefined) Selectedcityid = $scope. selectedcity.id;        else return; County Bound Collectorservice.getdistrictdata (Selectedcityid). Then (function (data) {var flag = DATA.DATA.SUCC            Ess if (flag) {$scope.                Districtdata = Data.data.data; $scope. selecteddistrict = Baseservice.getselecteddatamapper ($scope.            Districtdata, ' District ');    }}, NULL); } $scope.        Getcompanylist = function () {var selecteddistrictid;        if ($scope. selecteddistrict! = undefined) Selecteddistrictid = $scope. selecteddistrict.id;        else return; Company Bound Collectorservice.getcompanydata (Selecteddistrictid). Then (function (data) {var flag = Data.data.s            uccess;                if (flag) {$scope. Companydata = Data.data.data; $scope. Selectedcompany = Baseservice.getselEcteddatamapper ($scope. Companydata, ' company ');    }}, NULL); } $scope.        Getmachinelist = function () {var Selectedcompanyid;        if ($scope. selectedcompany! = undefined) Selectedcompanyid = $scope. selectedcompany.id;        else return; Device Bindings Collectorservice.getmachinelist (Selectedcompanyid). Then (function (data) {var flag = data.data.su            ccess; if (flag) {$scope.                Machinedata = Data.data.data; $scope. Selectedmachine = Baseservice.getselecteddatamapper ($scope.            Machinedata, ' machine ');    }}, NULL); }//Get real-time data $scope.        Getrealtimedatabymachine = function () {Timecheck ($scope. StartTime, $scope. Endtime);        var starttimefmt = timefmt ($scope. starttime);        var endtimefmt = timefmt ($scope. Endtime);        Get real-time data var MachineID = $scope. selectedmachine.machine_id; Collectorservice.getrealdatalist (MachineID). Then (function (Data) {var flag = data.data.success; if (flag) {$scope.            RealTimeData = Data.data.data;        }}, NULL); Gets the list data collectorservice.gethistorydatalist (MACHINEID,STARTTIMEFMT,ENDTIMEFMT). Then (function (data) {V            AR flag = data.data.success; if (flag) {$scope.                Historydata = Data.data.data;            $scope. gridoptions.data = data.data.list;        }}, NULL);        Place cascading list items in a cookie so that the subsequent operations are simplified by var expiredate = new Date ();        Expiredate.setdate (Expiredate.getdate () + 7);        Delete $cookies [' frontselection '];            var cookiedata = json.stringify ({province: $scope. Selectedprovince, City: $scope. selectedcity, District: $scope. Selecteddistrict, Company: $scope. Selectedcompany, Machine: $scope. selectedm        Achine}); $cookies. Put (' frontselection ', Cookiedata, {' Expires ': ExpireDate});   } $scope.        Clicktogetparamdatalist = function (paramid) {Timecheck ($scope. StartTime, $scope. Endtime);        var starttimefmt = timefmt ($scope. starttime);        var endtimefmt = timefmt ($scope. Endtime);        var MachineID = $scope. selectedmachine.machine_id;            Collectorservice.gethistorydatalistbyparamid (MachineID, Paramid, Starttimefmt, endtimefmt). Then (function (data) {            var flag = data.data.success;            if (flag) {$scope. Gridoptions.data = data.data.list;    }        }); }//Show hidden time period select $scope.    Clicktoshowtimepicker = function () {$scope. Visible =! $scope. Visible; } $scope. Ontimeset = function (Newdate, olddate) {var starttimefmt = Moment ($scope. starttime). Format ("yyyy-mm-d        D ");             var endtimefmt = Moment (STARTTIMEFMT). Add (1, ' Day '). Format ("Yyyy-mm-dd");        The time box is empty $ ("#endtime input"). Val ("");  Removes the original DateTimePicker object $ ("#endContainer"). Children (). remove ();      Set config $scope. config = {dropdownselector: ' #endtime ', Startview: ' Day ', Minview: ' Day '}; Dynamically compiled DateTimePicker directive var compiledehtml = $compile (' <datetimepicker data-ng-model= ' Endtime ' data-befor E-render= "BeforeRender ($view, $dates, $leftDate, $upDate, $rightDate)" data-datetimepicker-config= "{{config}}"/>        ') ($scope);    Put the HTML container $ ("#endContainer"). Append (compiledehtml);            }//Receive events and reset page $scope. $on (' Days-check ', function (e, D) {for (var i = 0; i < d.length; i++) {            The initial setting is not selectable, the status D[i].active = False is not selected;            D[i].selectable = false;            The value of the current loop var currentdate = Moment (d[i].utcdatevalue). Format ("Yyyy-mm-dd");            The currently selected start time var starttimefmt = Moment ($scope. starttime). Format ("Yyyy-mm-dd");            Allows the selected maximum end time var endtimefmt = Moment (STARTTIMEFMT). Add (1, ' Day '). Format ("Yyyy-mm-dd"); Compare and set optional date if (currentdAte >= starttimefmt && currentdate <= endtimefmt) {d[i].selectable = true;    }        }    }); When the start time is selected, the Ontimeset event is entered, and when executed to $compile, it triggers the following BeforeRender event//Trigger Beforereder event, which throws a Days-check event out,    And comes with all the When page time objects.            $scope. BeforeRender = function ($view, $dates, $leftDate, $upDate, $rightDate) {$timeout (function () {        $scope. $broadcast (' Days-check ', $dates);    }); } var Timecheck = function (start,end) {if (start = = NULL && end!=null) {Art.dialo G ({title: ' Hint ', Icon: ' Error ', Time:6, content: "The start date must be selected, please try again!)            ", padding:0});        Return if (start!=null && end = null) {art.dialog {title: ' Hint ', Icon: ' Error ', Time:6, con Tent: "The end date must be selected, please try again!"            ", padding:0});        Return } if (start! = NULL && end! = null && Start > End) {art.dialog ({title: ' Hint ', icon: ' Error ', Time:6, content:"The start time cannot be greater than the end time, please try again!"            ", padding:0});        Return        }} var timefmt = function (time) {if (time = = null) time = "";        else time = time.tolocaledatestring ();    return time; }}]);

IoT platform Design experience: DateTimePicker Implementation Selection linkage