Date issue uib-datepicker and $filter Angular JS

Question

I'm dealing with an issue with dates format: in my formular I'm using uib-datepicker-popup to get the calendar and in the controller I need to format this date so I'm using a $filter('date'),

so here is the input field:

<div class="input-group">
    <input id="fechasolicitudc" type="text" class="form-control"
        ng-class="(form.fechasolicitudc.$invalid) && (submitted) ? 'error': '' "
        ng-style="(form.fechasolicitudc.$invalid) && (submitted) && {'background-color':'pink'}"
        name="fechasolicitudc" uib-datepicker-popup="dd/MM/yyyy"
        ng-model="vm.peticion.contacto.fechaSol" 
        is-open="vm.datePickerOpenStatus.fechasolicitudc"/>
    <span class="input-group-btn">
        <button type="button" class="btn btn-default"
            ng-click="vm.openCalendar('fechasolicitudc')">
            <i class="glyphicon glyphicon-calendar"></i>
        </button>
    </span>
</div>

and in my controller:

if (vm.peticion.contacto.fechaSol != null) {
    var d = $filter('date')(vm.peticion.contacto.fechaSol, 'yyyy-MM-dd');
    vm.peticion.contacto.fechaSol = d;
}

what happenes is that the date is updated in the DB but the field becomes erased. When I try give the input type="date" the field is not erased but the calendar popup does not work.

flashjpr flashjpr · Accepted Answer · 2017-02-17T10:26:54

In your markup:

//...
uib-datepicker-popup="{{dateFormat}}" ng-model="vd"
datepicker-options="vdOptions"
// ...

In your controller:

$scope.dateFormat = 'dd MMM yyyy';  // or your custom date

// and if you want to have your date set as today
$scope.vd = new Date();
$scope.vdOptions = {
      formatYear: 'yy',
      formatMonth: 'MM',
      maxDate: new Date(),
      minDate: minDate,
      startingDay: 1,
      showWeeks: false,
      yearRows: 2,
      yearColumns: 2
};

vd = valueDate

I do not see the point of using $filter in this case.

Date issue uib-datepicker and $filter Angular JS

1 Answers