IONIC : datepicker select different date for two date input at same page

Question

I am developing Hybrid mobile app with the help of Angular and Ionic. I used Ionic datepicker : HTML: I have to use two date picker input in same page :

<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};  

        }
    };

I need to update input based on date selection. But selecting on any of date input it is updating for both field. How do I manage that both input will show different date.

Answer 1

Just define two datePickerObjects, each with its own callback function.

$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;  
    }

};

And also change 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>