AngularJS：Datepicker 指令如何在占位符中有今天的日期答案

【问题标题】：AngularJS: Datepicker directive how to have a today date in the placeholderAngularJS：Datepicker 指令如何在占位符中有今天的日期
【发布时间】：2017-10-18 01:09:46
【问题描述】：

我想知道如何在 Datepicker 的占位符中设置今天的日期。我有一个指令，我想在占位符中显示今天的日期，或者在我的情况下也是 minDate。我尝试了一些我在网上找到的解决方案，但我无法展示它，我不知道我错过了什么。如果您可以提供 JSFiddle 或 Plunker 中的示例，我们将不胜感激。

这是我的输入框：

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

我的指令：

}).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();
            }
        });
    }
};
});

【问题讨论】：

标签： javascript jquery angularjs datepicker

【解决方案1】：

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>

【讨论】：

这给了我今天的日期，但我需要 dd/mm/yyyy 格式，我需要保持相同的输入类型文本并使用指令。我做了下一个：<input type="text " class="datepicker clearTimeField cursor-pointer" name="startDateBanner " id="startDateBanner " ng-model="customStartDate" ng-options="datepickerOptions" placeholder="{{customStartDate|date}}" jqdatepickerbanner /> 但是也显示了我不需要的时间。
使用angular-ui.github.io/bootstrap/#!#datepicker .. 更高级的比较html5日期。
嘿@ ManikandanVelayutham 我知道这可能会更好，但我必须保持原来的结构，我不能修改它，我不允许。如果您能向我展示一个适用于我的具体情况的示例，我将不胜感激。谢谢:)
你好@Jakub stackoverflow.com/questions/29873184/…

【解决方案2】：

您可以使用ngModel 设置今天的日期。像这样的

//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();
                        }
                    });

希望这会有所帮助。编码愉快！

【讨论】：

我试过了，我需要保持我相同的日期格式 dd-mm-yy 以你的方式给我 M-dd-yy 和 hh 我不需要。你能告诉我如何解决这个问题，我现在已经接近解决方案了吗？
根据您的需要编辑帖子。干杯！
谢谢@VeerajDPoojary，如果我理解得很好，第一部分就交给控制器了，对吧？我可以将它放在$scope.dateBanner = Function(){} 下并按照您建议的方式使用它吗？
无论我在这里做什么我今天收到的不是定义，也不知道如何在我的具体情况下使用它
@Jakub 你能添加一个 JS Fiddle 你想要实现的任何东西。