AngularJS：Datepicker 指令如何在占位符中有今天的日期
Posted
技术标签:
【中文标题】AngularJS：Datepicker 指令如何在占位符中有今天的日期【英文标题】：AngularJS: Datepicker directive how to have a today date in the placeholder 【发布时间】：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();
);
;
);
【问题讨论】：
【参考方案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 ***.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 你想要实现的任何东西。以上是关于AngularJS：Datepicker 指令如何在占位符中有今天的日期的主要内容，如果未能解决你的问题，请参考以下文章
需要帮助来验证 angular jquery UI datepicker 指令
AngularJS UI Bootstrap Datepicker点击外部后下次不打开
如何删除 ui bootstrap datepicker 页脚 angularjs