DatePicker bootstrap date from filled filed angularjs

Question

I'm using bootstrap in my application web.

I created a method that initialize all input of type date with a class called form_datetime:

 function initDatepicker(){
        $(".form_datetime").datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            language: "it",
            todayHighlight: true,
            autoclose: true,
            orientation:"auto"
        });
 }

The input html:

<input name="date" class="form-control form_datetime date"
                                type="text"
                                ng-model="date"                             
                                required  >

Here the issue is that when i pick the field of date , the input will be empty and i losed the value that is setted before (value getted from dataBase).

The date value comming in format string "dd/mm/yyyy".

How can i get the date in the calender of the actual date of the input?

score 0 · Answer 1 · answered Nov 07 '17 at 16:29

0

If you use AngularJS Material Datepicker and the moment plugin, you can force that format with

  .config(function($mdDateLocaleProvider) {
      $mdDateLocaleProvider.formatDate = function(date) {
        return moment(date).format('DD/MM/YYYY');
      };
      $mdDateLocaleProvider.parseDate = function(dateString) {
        var m = moment(dateString, 'DD/MM/YYYY', true);
        return m.isValid() ? m.toDate() : new Date(NaN);
      };
   });

See it implemented.

answered Nov 07 '17 at 16:29

vinays84

394
4
14

no i'm using bootstrap datepicker, the issue that when i click trough the input without selected any date from the calender, i losed the actual date and the input field will be empty – Hassen Nov 08 '17 at 08:43

score 0 · Answer 2 · answered Nov 08 '17 at 09:06

The solution is in the followin link

 function initDatepicker(){
        $(".form_datetime").datepicker({
            format: "dd/mm/yyyy",
            weekStart: 1,
            language: "it",
            todayHighlight: true,
            autoclose: true,
            orientation:"auto",
            forceParse: false //
        });
 }

DatePicker bootstrap date from filled filed angularjs

2 Answers2