Use ionic self-DatePicker Plugin _ Summary

Recently in the project, a selection box was encountered that required a date. Find a lot on the Internet, very laborious. The Ionic plug-in needs to be bower again, and the command is:

Bower Install Ionic-datepicker--save

Download complete you can see the DatePicker file below your Lib directory, introduce in index

Can be used, note to inject in the module

<script src= "Lib/ionic-datepicker/dist/ionic-datepicker.bundle.min.js" ></script>
angular.module (' Starter.controllers ', [' Ionic-datepicker '])

I'm using pop-up (popup), in the page you want to pop up, put the following tag

<ionic-datepicker input-obj= "Datepickerobjectend" >
<button class= "button Button-positive" > {{ Datepickerobjectend.inputdate | Date:datepickerobjectend.dateformat}}</button>
</ionic-datepicker>

In the corresponding controller, put in the configuration you want

This is an optional list of dates var disableddates = [New Date (1437719836326), new Date (), new Date (2016, 7,),//months
      Are 0-based, this is August, 10th!  New Date (' Wednesday, August, 2015 '),//works with any valid date formats like long format new date ("08-14-2016"),
Short format New Date (1439676000000)//unix format];
    Convenient day and month to set the way, and I mean, can be arbitrarily changed.
    var weekdayslist = ["s", "M", "T", "W", "T", "F", "S"];
    Default values: ["s", "M", "T", "W", "T", "F", "S"]; var monthlist = ["January", "February", "March", "April", "may", "June", "July", "August", "September", "October", "Novemb
    Er "," December "]; Default values: ["January", "February", "March", "April", "may", "June", "July", "August", "September", "October", "November", "Dec

Ember "];
            callback function after date selection var datepickercallbacks = function (val) {if (typeof (val) = = ' undefined ') {} else {
            Console.log (' Selected date is: ', Val);  $scope. datepickerobjectend.inputdate = val; The line OfficerNo, no, the selected date can not be backfill to the page.
}
    }; The principal object $scope. Datepickerobjectend = {titlelabel: ' select ',//optional Closebuttontype: ' button-assertive ',/ /optional Setbuttontype: ' button-assertive ',//optional Todaybuttontype: ' button-assertive ',//optional INP
        Utdate:new date (),//optional, input value sundayfirst:true,//optional, Monday opening disableddates:disableddates,//optional, not optional Weekdayslist:weekdayslist,//optional monthlist:monthlist,//optional Templatetype: ' popup ',//optional i.e. mode modal or popup (compatibility mode. ) Showtodaybutton: ' true ',//optional Modalheadercolor: ' bar-positive ',//optional Modalfootercolor: ' Bar-posi tive ',//optional From:new date (2008, 8, 2),//optional to:new date (2030, 8, 25),//optional callback:function (
        val) {//mandatory datepickercallbacks (val); }, DateFormat: ' Yyyy-mm-dd ',//optional closeonselect:true,//optional, if you want to turn off the interface after setting the selection date.
    Oh, the original is false. };

Click on the button on the page here, you can pop-up calendar, as shown

If it is ionic default, the bottom row has three button, respectively, Close,set and Todaybutton, but in my project, you need to use set, the other two not, and refer to the Ionic-datepicker API, I tried for a long time did not find a solution, the last whim, to modify the introduction of the source code. It hurts to find the meat, The contents of the ionic-datepicker-modal.html, found that the actual page has no effect, but in addition to the other places there is no page label content, want to break the head, and finally in JS, the definition of the three ButtonType only to find the problem, deleted the other two, the page will show I want the effect. This is a small achievement. After all, the code is compressed, looking for an afternoon, eyes are looking at the flower, now only need to set the style I want to color on it.