How to set the date as a placeholder when view loads?

Question

I am using this plugin with Angular which is actually this extension When the view loads all you see is an empty input, when you click on that input, the calendar comes up and today's date is displayed in that input.

What I need is to load today's date in the input when the view is ready.

Here the way I am using it

<input type='text' datetimepicker
       datetimepicker-options="{format: 'MM/DD/YYYY', useCurrent: true}"/>

what do you recommend ?

EDIT

I added autofocus to the input, and the datepicker it's been displayed, not only the date which is what I need.

MY CONTROLLER:

(function () {
  'use strict';

  angular
    .module('palpatine')
    .controller('RotationsCtrl', RotationsCtrl);

  /* @ngInject */
  function RotationsCtrl (Rotations, $scope, $rootScope, $state) {
    /*jshint validthis: true */
    var vm = this;

    activate();

    function activate () {

      $(document).ready(function () {

        var today = new Date();
        var dd = today.getDate();
        var mm = today.getMonth()+1; //January is 0!
        var yyyy = today.getFullYear();

        if(dd<10) {
            dd='0'+dd
        }

        if(mm<10) {
            mm='0'+mm
        }

        today = mm+'/'+dd+'/'+yyyy;

        $scope.today = moment().format("MM/DD/YYYY");

        console.log(today);

        $scope.datetimepickerOptions = {
          format: 'MM/DD/YYYY',
          defaultDate: today
        };


      });

    }
  }
})();

Answer 1

Just set defaultDate to current date. This will override useCurrent , so it's not needed anymore.

In controller

$scope.datetimepickerOptions = {
    format: 'MM/DD/YYYY', 
    defaultDate: new Date()
};

HTML

<input type='text' 
       datetimepicker
       datetimepicker-options="{{datetimepickerOptions}}"/>

EDIT

It turned out that diosney/angular-bootstrap-datetimepicker-directive had a bug with defaultDate in 0.1.3 release. Solution was to update it to master branch.

bower.json

"angular-bootstrap-datetimepicker-directive": "#master"

and run

bower update

Answer 2

Give focus to the text input then blur it...

 angular.element('.your_input_class_name').trigger('focus');
 angular.element('.your_input_class_name').trigger('blur');

or

 document.getElementById('your_input_id').focus();
 document.getElementById('your_input_id').blur();

Answer 3

Can you try this code?

ref

<input type='text' 
       datetimepicker
       datetimepicker-options="{format: 'MM/DD/YYYY', defaultDate: '01/01/2016'}"/>

Edit

On seeing the updated question i could notice that datetimepicker module is not loaded in the module. Inject the module as given below

angular
  .module('palpatine', [
    // Other injected modules.

    'datetimepicker'
  ]);

Answer 4

If u are just looking for a placeholder as current date. Add placeholder attribute on input and use today as value.