IONIC：datepicker选择同一页面上两个日期输入的不同日期

Question

我正在Angular和Ionic的帮助下开发混合移动应用程序。 我使用了Ionic datepicker： HTML：我必须在同一页面中使用两个日期选择器输入：

<label class="item item-input">
                    <ionic-datepicker input-obj="datepickerObject"> 
                        <input type="text" ng-model="reshedule.StartDate" placeholder="Select Start Date" name="uSDate" required="">
                    </ionic-datepicker>
                </label>
                <br>
                   <label class="item item-input">
                    <ionic-datepicker input-obj="datepickerObject"> 
                        <input type="text" ng-model="reshedule.EndDate" placeholder="Select End Date" name="uEDate" required="">
                    </ionic-datepicker>
                </label>

JS：

$scope.datepickerObject = {
        titleLabel: 'Title',  //Optional
        todayLabel: 'Today',  //Optional
        closeLabel: 'Close',  //Optional
        setLabel: 'Set',  //Optional
        setButtonType : 'button-assertive',  //Optional
        todayButtonType : 'button-assertive',  //Optional
        closeButtonType : 'button-assertive',  //Optional
        inputDate: new Date(),  //Optional
        mondayFirst: true,  //Optional
        disabledDates: disabledDates, //Optional
        weekDaysList: weekDaysList, //Optional
        monthList: monthList, //Optional
        templateType: 'popup', //Optional
        showTodayButton: 'true', //Optional
        modalHeaderColor: 'bar-positive', //Optional
        modalFooterColor: 'bar-positive', //Optional
        from: new Date(2012, 8, 2), //Optional
        to: new Date(2018, 8, 25),  //Optional
        callback: function (val) {  //Mandatory
            datePickerCallback(val);
        },
        //dateFormat: 'dd-MM-yyyy', //Optional
        dateFormat: 'yyyy-MM-dd', //Optional
        closeOnSelect: false, //Optional
    }

    var disabledDates = [
        new Date(1437719836326),
        new Date(),
        new Date(2015, 7, 10), //months are 0-based, this is August, 10th!
        new Date('Wednesday, August 12, 2015'), //Works with any valid Date formats like long format
        new Date("08-14-2015"), //Short format
        new Date(1439676000000) //UNIX format
    ];

    var weekDaysList = ["Sun", "Mon", "Tue", "Wed", "thu", "Fri", "Sat"];

    var monthList = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

    var datePickerCallback = function (val) {
        if (typeof(val) === 'undefined') {
            console.log(' : No date selected');
        } else {
            console.log('Selected date is : ', val);
            $scope.reshedule = { StartDate : val, EndDate : val};  

        }
    };

我需要根据日期选择更新输入。 但是在任何日期输入上选择它都会更新两个字段。 如何管理两个输入将显示不同的日期。

Answer 1

只需定义两个datePickerObjects，每个都有自己的回调函数。

$scope.datepickerObject = {
        titleLabel: 'Title',  //Optional
        todayLabel: 'Today',  //Optional
        closeLabel: 'Close',  //Optional
        setLabel: 'Set',  //Optional
        setButtonType : 'button-assertive',  //Optional
        todayButtonType : 'button-assertive',  //Optional
        closeButtonType : 'button-assertive',  //Optional
        inputDate: new Date(),  //Optional
        mondayFirst: true,  //Optional
        disabledDates: disabledDates, //Optional
        weekDaysList: weekDaysList, //Optional
        monthList: monthList, //Optional
        templateType: 'popup', //Optional
        showTodayButton: 'true', //Optional
        modalHeaderColor: 'bar-positive', //Optional
        modalFooterColor: 'bar-positive', //Optional
        from: new Date(2012, 8, 2), //Optional
        to: new Date(2018, 8, 25),  //Optional
        callback: function (val) {  //Mandatory
            datePickerCallback(val);
        },
        //dateFormat: 'dd-MM-yyyy', //Optional
        dateFormat: 'yyyy-MM-dd', //Optional
        closeOnSelect: false, //Optional
    }

$scope.datepickerObject2 = {
        titleLabel: 'Title',  //Optional
        todayLabel: 'Today',  //Optional
        closeLabel: 'Close',  //Optional
        setLabel: 'Set',  //Optional
        setButtonType : 'button-assertive',  //Optional
        todayButtonType : 'button-assertive',  //Optional
        closeButtonType : 'button-assertive',  //Optional
        inputDate: new Date(),  //Optional
        mondayFirst: true,  //Optional
        disabledDates: disabledDates, //Optional
        weekDaysList: weekDaysList, //Optional
        monthList: monthList, //Optional
        templateType: 'popup', //Optional
        showTodayButton: 'true', //Optional
        modalHeaderColor: 'bar-positive', //Optional
        modalFooterColor: 'bar-positive', //Optional
        from: new Date(2012, 8, 2), //Optional
        to: new Date(2018, 8, 25),  //Optional
        callback: function (val) {  //Mandatory
            datePickerCallback2(val);
        },
        //dateFormat: 'dd-MM-yyyy', //Optional
        dateFormat: 'yyyy-MM-dd', //Optional
        closeOnSelect: false, //Optional
    }

var disabledDates = [
        new Date(1437719836326),
        new Date(),
        new Date(2015, 7, 10), //months are 0-based, this is August, 10th!
        new Date('Wednesday, August 12, 2015'), //Works with any valid Date formats like long format
        new Date("08-14-2015"), //Short format
        new Date(1439676000000) //UNIX format
    ];

var weekDaysList = ["Sun", "Mon", "Tue", "Wed", "thu", "Fri", "Sat"];

var monthList = ["Jan", "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"];

var datePickerCallback = function (val) {
    if (typeof(val) === 'undefined') {
        console.log(' : No date selected');
    } else {
        console.log('Selected date is : ', val);
        $scope.reshedule.StartDate = val;  

}

 var datePickerCallback2 = function (val) {
        if (typeof(val) === 'undefined') {
            console.log(' : No date selected');
        } else {
            console.log('Selected date is : ', val);
            $scope.reshedule.EndDate = val;  
    }

};

并且还改变了html

<label class="item item-input">
                    <ionic-datepicker input-obj="datepickerObject"> 
                        <input type="text" ng-model="reshedule.StartDate" placeholder="Select Start Date" name="uSDate" required="">
                    </ionic-datepicker>
                </label>
                <br>
                   <label class="item item-input">
                    <ionic-datepicker input-obj="datepickerObject2"> 
                        <input type="text" ng-model="reshedule.EndDate" placeholder="Select End Date" name="uEDate" required="">
                    </ionic-datepicker>
                </label>