the daterangepicker and the text input are not update while updating model manually

[danhnguyeen]

Hello every body. Thank you for your plugin, it's very nice. But i think there is an issue. When i update the model manually, the text input and the daterangepicker is not updated. Can you help me to fix? Many thank

[vincez]

+1

[danhnguyeen]

@vincez i'm using this one https://github.com/fragaria/angular-daterangepicker if you can not wait to fix, you can use it

[vincez]

@trangchuvn , thanks so much for the quick reply! Are there any other issues with fragaria? Is it better than luisfarzati?

[danhnguyeen]

yes. it's good. i'm using it for my application. this issue is not appear on fragaria

[danhnguyeen]

index.html

<div class="input-group">
     <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
     <input date-range-picker id="daterange3" name="daterange3" class="form-control" type="text" ng-model="data.dateRange" options="data.opts" readonly="true"/>
</div>

Controller.js

$scope.data = {
 opts:{
        opens:"right",
        format:"DD MMM, YYYY",
        ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 days': [moment().subtract(7, 'days'), moment()],
                    'Last 30 days': [moment().subtract(30, 'days'), moment()],
                    'This month': [moment().startOf('month'), moment().endOf('month')]}
    },
    dateRange:{ startDate: moment().startOf('month'), endDate: moment().endOf('month') },
}

[eeMarcello]

Basically when daterangepickers 'show:' function triggers, it should redraw calendar in case input value has been changed or not (which can happen, for ex: when we get input after rest service response, it takes time you know). As a hotfix, I've injected value recheck code into show: function:

// marek_helmes 16/03/2016
// Fix bug when date wasn't updating with angular trigger
var dateString = $(this.element).val(), start = null, end = null;
    if(dateString.length) {
        var dateSplit = dateString.split(this.separator);
        if (dateSplit.length === 2) {
            start = moment(dateSplit[0], this.format);
            end = moment(dateSplit[1], this.format);
        }
        if (this.singleDatePicker || start === null || end === null) {
            start = moment(dateString, this.format);
            end = start;
        }
    this.startDate = start;
    this.endDate = end;
    this.setCustomDates(start, end);
}
// fix end

It should be inserted after:

show: function (e) {
    if (this.isShowing) {
        return;
    }

Hope it helps.