AngularJS: Datepicker directive how to have a today date in the placeholder

Question

I would like to know how to set in the placeholder of a Datepicker a today date. I have a directive and I want to show in the placeholder the today date or in my case is also the minDate. I tried few solution I found online but I cannot show it and I don't know what I'm missing. If you can provide an example like in JSFiddle or Plunker will be appreciated.

This is my input field:

<input type="text " class="datepicker clearTimeField cursor-pointer" name="startDateBanner " id="startDateBanner " ng-model="customStartDate" ng-options="datepickerOptions" jqdatepickerbanner />

My directive:

}).directive('jqdatepickerbanner', function() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
        element.datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            //maxDate: Date.today(),
            maxDate: '+6mm', // 6 Months max date 
            minDate: Date.today(),
            showOn: "both",
            buttonImage: "/img/calendar-o.png",
            onSelect: function(date) {
                ctrl.$setViewValue(date);
                ctrl.$render();
                scope.$apply();
            }
        });
    }
};
});

Veeraj D Poojary · Answer 1 · 2017-05-18T15:23:34.333

0

You can use the ngModel to set today's date. Something like this

//For formatting the date in dd-mm-yy format
    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January will be 0!
    var yy = today.getFullYear().toString().substr(-2));//Since you need yy
    
    if(dd<10) {
        dd='0'+dd
    } 
    
    if(mm<10) {
        mm='0'+mm
    } 
    
    today = dd + '-' + mm + '-' + yy;
    
    // And in the directive just use the var today
        link: function(scope, element, attr, ctrl) {
                    scope.customStartDate = today;
                    element.datepicker({
                        dateFormat: 'dd-mm-yy',
                        changeMonth: true,
                        changeYear: true,
                        //maxDate: Date.today(),
                        maxDate: '+6mm', // 6 Months max date 
                        minDate: Date.today(),
                        showOn: "both",
                        buttonImage: "/img/calendar-o.png",
                        onSelect: function(date) {
                            ctrl.$setViewValue(date);
                            ctrl.$render();
                            scope.$apply();
                        }
                    });

Hope this helps. Happy coding!

edited May 18 '17 at 15:23

answered May 18 '17 at 10:08

Veeraj D Poojary

13
4

I tried and I need to maintain my same date format dd-mm-yy in your way is giving me M-dd-yy and hh which I don't need. Could you please tell me how to fix that just I'm near the solution now? – Jakub May 18 '17 at 13:47
Edited the post as per your need. Cheers! – Veeraj D Poojary May 18 '17 at 15:24
Thank you @VeerajDPoojary if I understood well the first part goes to the controller right? And can I put it under a `$scope.dateBanner = Function(){}` and use it in the same way you suggested? – Jakub May 19 '17 at 07:02
Whatever I'm doing here I receive today is not define and have no idea how to use it in my precise situation – Jakub May 19 '17 at 09:23
@Jakub could you please add a JS Fiddle of whatever you're trying to achieve. – Veeraj D Poojary May 19 '17 at 10:14
I'm trying to have something like it is here http://jsfiddle.net/Blackhole/Vq65z/13/ however with my structure because I'm not allowed to change it. – Jakub May 19 '17 at 10:55

Manikandan Velayutham · Answer 2 · 2017-05-18T10:41:30.230

0

var app = angular.module('exApp',[]);

app.controller('ctrl', function($scope){
$scope.somedate = null;
$scope.customStartDate = new Date();
});

app.directive('jqdatepickerbanner', function() {
return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      /*  element.datepicker({
            dateFormat: 'dd-mm-yy',
            changeMonth: true,
            changeYear: true,
            //maxDate: Date.today(),
            maxDate: '+6mm', // 6 Months max date 
           // minDate: Date.today(),
            showOn: "both",
            buttonImage: "/img/calendar-o.png",
            onSelect: function(date) {
                ctrl.$setViewValue(date);
                ctrl.$render();
                scope.$apply();
            }
        });*/
    }
};
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="exApp" ng-controller="ctrl">{{place}} <br>
<input type="date" class="" name="startDateBanner " id="startDateBanner" ng-model="customStartDate" jqdatepickerbanner />
<input required="" type="text" class="form-control" placeholder="{{customStartDate|date}}"  onfocus="(this.type='date')" onblur="if(this.value==''){this.type='text'}"/>
<body>

edited May 18 '17 at 10:41

answered May 18 '17 at 10:34

Manikandan Velayutham

2,228
1
15
22

This is giving me the today date but I need the format dd/mm/yyyy and I need to maintain the same input type text and use the directive. I did next: `` However is showing me the hour also which I don't need. – Jakub May 18 '17 at 13:46
Use https://angular-ui.github.io/bootstrap/#!#datepicker .. More advance compare html5 date. – Manikandan Velayutham May 19 '17 at 06:33
Hey @ ManikandanVelayutham I know that could be better but I have to stay with the original structure I cannot modify it I'm not allowed. If you could show me an example which works with my specific situation I will appreciate. Thanks :) – Jakub May 19 '17 at 09:25
Hello @Jakub http://stackoverflow.com/questions/29873184/how-to-force-the-input-date-format-to-dd-mm-yyyy – Manikandan Velayutham May 19 '17 at 11:56

AngularJS: Datepicker directive how to have a today date in the placeholder

2 Answers2