Not expected date format - Difference between ng and date input type

Question

I have a form with some date type inputs in a HTML5 page, I want to get the value with Angular. It takes a non expected format as shown on the screenshot. The input type is date and not datetime.

I tested to send this form, I receive the right expected dates so the question is how to get the right dates in angulare ?

Thank you for your help !

Here is the code :

<fieldset>

               <div class="form-group">
                    <label for="start_date" class="col-sm-2 control-label">Date de début</label>
                    <div class="col-sm-10">
                       <input type="date" name="start_date" ng-model="start_date" class="form-control" required="required">
                    </div>
              </div> 

              <div class="form-group">
                    <label for="end_date" class="col-sm-2 control-label">Date de fin</label>
                    <div class="col-sm-10">
                       <input type="date" name="end_date" ng-model="end_date" class="form-control" required="required">
                    </div>
              </div>

              <div class="form-group">
                 <label for="input" class="col-sm-2 control-label">Type de contact:</label>
                 <div class="col-sm-2">
                    <select ng-model="type" id="input" class="form-control" required="required">
                       <option value="all">Tous</option>
                       <option value="fiche">Demande de renseignements ( DR )</option>
                       <option value="telephone">Demande de rappel</option>
                       <option value="contact">Général</option>
                    </select>
                 </div>
              </div>

              <div class="form-group">
                 <div class="col-sm-10 col-offset-2">
                    <button type="submit"  ng-click="getcontacts(start_date, end_date, type);" class="btn btn-primary">Lancer la recherche</button>
                 </div>
              </div>


              {{ start_date}} {{end_date}} {{ type }}

You could use moment.js to format your dates, it's a very powerful solution — Mike Resoli, Mar 04 '16 at 11:39

score 0 · Answer 1 · answered Mar 04 '16 at 12:02

Your input is of type "date", so your model you be of type Date. If you want to get the string representation of your date, you can use the $filter service. Something like this:

https://jsfiddle.net/relferreira/y7y5n62c/2/

angular.module('app', []);

angular.module('app')
    .controller('MainController', mainController);

mainController.$inject = ['$filter'];

function mainController($filter){

    var vm = this;

    vm.date = new Date();
    vm.formatedDate = '';
    vm.selectDate = selectDate;

  function selectDate(){
    vm.formatedDate = $filter('date')(vm.date);
  }

}

HTML:

<div data-ng-app="app">

  <div data-ng-controller="MainController as mainVm">
    <input type="date" data-ng-model="mainVm.date" />
    <button data-ng-click="mainVm.selectDate()">Select</button>
    {{mainVm.formatedDate}}
  </div>

</div>

Thanks you for your answer. To avoid to have to click on the selected button is there a way to convert to format in my already existing controller ? — François-Xavier Gourvès, Mar 04 '16 at 13:10

score 0 · Answer 2 · edited May 23 '17 at 11:59

Thanks to Renan and finding that my question was finally the same as AngularJS - convert dates in controller

I made the following conversion in my Controller after injecting inside $filter

It works as a charm, thanks again !

icademieApp.controller( 'contactsCtrl', ['$scope', '$filter', 'contactService',  function ($scope, $filter, contactService) {   

$scope.getcontacts = function ( start_date, end_date, type ){           

        console.log( start_date + ' & ' +  end_date  );

        start_date  = $filter('date')(start_date, "yyyy-MM-dd");
        end_date  = $filter('date')(end_date, "yyyy-MM-dd");

        console.log( start_date + ' & ' +  end_date  ); 

        ....        
}

}]);

First Log :

Tue Mar 01 2016 00:00:00 GMT+0100 (Paris, Madrid) & Fri Mar 04 2016 00:00:00 GMT+0100 (Paris, Madrid)

Second Log :

2016-03-01 & 2016-03-04

Good that it helped! Mark as it as the right answer if you wish! — Renan Ferreira, Mar 04 '16 at 14:05

Not expected date format - Difference between ng and date input type

2 Answers2