AngularJs date format converting

Question

I'm converting the date format when I clicked search and the radio button. It's working fine when I search the date but I had faced the problem when I click the radio button.

code Html

<form action="{{URL::current()}}" ng-submit="submit(item)">
    <div class="form-group">
        <label class="control-label">@lang('app.date')</label>
        <div class="input-group ui-datepicker">
            <input type="text" class="form-control datepicker"
                   uib-datepicker-popup name="enddate"
                   ng-model="item.enddate" is-open="enddate_opened"
                   ng-click="enddate_opened = !enddate_opened"/>
        </div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">
            <i class="fa fa-search"></i> @lang('search.search')
        </button>
    </div>
    <!-- //////////Radio button//////////////////////-->
    <div class="radio">
        <label>
            <input type="radio" name="log_date" value="log_date"
                   onchange="this.form.submit()">
            @lang('product.invoice_date')
        </label>
    </div>
</form>

AngularJs

$scope.submit = function (item) {
    angular.forEach(item, function (value, key) {
        var val = value instanceof Date ? moment(value).format('YYYY-MM-DD') : value;
 //var val = key == 'enddate' ? moment(value).format('YYYY-MM-DD') : value;
 //<--tried, not working

        $('form [name=' + key + ']').val(val);
    });
};

The result on URL when I click search

enddate=2017-01-10

The result on URL when I click the radio button

enddate=10%2F01%2F17

The radio button called from same method but why the result will be different?

Answer 1

If you call this.form.submit() you will only call the action of the form. ng-submit is an AngularJS directive and will not be triggered using vanilla javascript. But you have the "submit button" so add a id to it:

<button type="submit" id="submit-button" class="btn btn-primary">
    <i class="fa fa-search"></i> @lang('search.search')
</button>

and call it from the radio button:

<input type="radio" name="log_date" value="log_date"
       onchange="document.getElementById('submit-button').click()">

Answer 2

You are getting different values from the "item.enddate" object.
In the first path (click on search button) you get a Date (javascript object).
In the second path (click on radio button) you get a string.

With this code:

var val = value instanceof Date ? moment(value).format('YYYY-MM-DD') : value;

You are saying: is it a Date object? Ok, convert it to a string (thanks to moment.js). Otherwise return the same value you get.
That would be good only if you have the right string format. If you console log the "value" variable, you will see a Date object in the first case and a string that will look alike this '10/01/17' in the second one.

So console log the value to be shure about the format you receive and use it to make a new moment object with the specific format.

This should work:

var val = value instanceof Date ? moment(value).format('YYYY-MM-DD') : moment(value, 'DD/MM/YY').format('YYYY-MM-DD');