Please consider this Plunk.

I have a controller set up like this:

app.controller("myController", [
      "$scope",
      function($scope){
        $scope.DateFormat = "DD/MM/YYYY";

        $scope.From = '15/01/2015'; // DD/MM/YYYY
        $scope.To = '31/12/2015'; // DD/MM/YYYY
      }]);

And usage at Html level is:

<input type="text" 
    ng-model="From" 
    data-provide="datepicker" 
    date-format="DateFormat" />

Regardless of the format identifier, the date is provided as MM/DD/YYYY, which would cause errors on the backend.

Any suggestions?

Please consider this Plunk.

I have a controller set up like this:

app.controller("myController", [
      "$scope",
      function($scope){
        $scope.DateFormat = "DD/MM/YYYY";

        $scope.From = '15/01/2015'; // DD/MM/YYYY
        $scope.To = '31/12/2015'; // DD/MM/YYYY
      }]);

And usage at Html level is:

<input type="text" 
    ng-model="From" 
    data-provide="datepicker" 
    date-format="DateFormat" />

Regardless of the format identifier, the date is provided as MM/DD/YYYY, which would cause errors on the backend.

Any suggestions?

• javascript
• html
• css
• angularjs
• twitter-bootstrap

3 Answers 3

The "date-format" attribute used in the datepicker elements should be changed to "data-date-format" and assigning "DateFormat" using template in the element, that is, data-date-format={{DateFormat}} and also the date format must be changed to "dd/mm/yyyy". modified plunker for your reference, http://plnkr.co/edit/Ep7LcJHpssFb4vnZXdC6?p=preview Hope it helps.

script.js:

$scope.DateFormat = "dd/mm/yyyy";

index.html:

<input type="text" 
    ng-model="From" 
    data-provide="datepicker" 
    data-date-format={{DateFormat}} />

  <input type="text" 
    ng-model="To" 
    data-provide="datepicker" 
    data-date-format={{DateFormat}} />

bootstrap-datepicker reference: https://bootstrap-datepicker.readthedocs/en/latest/options.html

Since you are binding string value ('15/01/2015') to angular $scope variable, you can't get desired output. In order to do it, I have changed your plnkr a bit. I hope you will not mind with it.

updated working http://plnkr.co/edit/PRbDW1g1JmmkUb7T7NJr?p=preview

You need to go with this, (bootstrap datepicker)

<script type="text/javascript">
                    $(document).ready(function () {
                        $('.myDP').each(function(){
                                        $(this).datepicker({
                                           format: "dd/mm/yyyy",
                                           autoclose: true
                                        });;
                        });

        });
   </script>

you controller would have below code,

       var fromDate=new Date(2015,00,15);
        var toDate=new Date(2015,11,31);
        $scope.From =$filter('date')( fromDate,'dd/MM/yyyy'); // DD/MM/YYYY
        $scope.To = $filter('date')( toDate,'dd/MM/yyyy') ; // DD/MM/YYYY

Please find the solution and let me know if something is wrong.

You can set format using uib-datepicker-popup attribute.

 <input type="text" 
    ng-model="From" 
    data-provide="datepicker" 
    date-format="DateFormat"
    uib-datepicker-popup="DD/MM/YYYY" />