带有 MD 菜单的 md-date-picker
md-date-picker with md-menu
我在md菜单中有一个md-date-picker,但是当我点击日期选择器时,md菜单关闭了。这是为此编写的代码笔。它与ng材料的这个错误有关。对此有什么解决方法?
.HTML:
<div class="md-menu-demo menudemoBasicUsage" ng-controller="BasicDemoCtrl as ctrl" ng-app="MyApp">
<div class="menu-demo-container" layout-align="center center" layout="column">
<h2 class="md-title">Month Select</h2>
<p>Select a month by clicking the input</p>
<md-menu>
<input md-menu-origin="" aria-label="Open phone interactions menu" ng-focus="ctrl.openMenu($mdOpenMenu, $event)" ng-model="ctrl.selectedMonth">
<md-menu-content width="4" ng-click="$event.stopPropagation()">
<md-datepicker ng-model="dateFilter" md-placeholder="Till date" md-min-date="dateFilter.fromDate"></md-datepicker>
</md-menu-content>
</md-menu>
</div>
</div>
.JS:
angular
.module('MyApp')
.controller('BasicDemoCtrl', function DemoCtrl($mdDialog) {
var originatorEv;
this.openMenu = function($mdOpenMenu, ev) {
originatorEv = ev;
$mdOpenMenu(ev);
};
this.setMonth = function(val) {
this.month = val;
this.setSelectedMonth();
};
this.notificationsEnabled = true;
this.toggleNotifications = function() {
this.notificationsEnabled = !this.notificationsEnabled;
};
this.nextYear = function() {
this.year++;
this.setSelectedMonth();
};
this.preYear = function() {
this.year = this.year - 1;
this.setSelectedMonth();
};
}).directive('stopEvent', function() {
return {
restrict: 'A',
link: function(scope, element, attr) {
if (attr && attr.stopEvent)
element.bind(attr.stopEvent, function(e) {
e.stopPropagation();
});
}
};
});
我找到了一个有效的解决方案,但不是最好的答案。
HTML:
<md-datepicker id="myDatePicker"
ng-model="dateFilter"
md-placeholder="Till date"
md-min-date="dateFilter.fromDate">
</md-datepicker>
JS:
function setupDateButton()
{
var dateButtonFix = document.getElementById("myDatePicker").children;
for (var i = 0; i < dateButtonFix.length; i++)
{
if (dateButtonFix[i].tagName == 'BUTTON' || dateButtonFix[i].tagName == 'DIV')
{
if (dateButtonFix[i].tagName == 'DIV')
{
var child2 = dateButtonFix[i].children;
for (var j = 0; j < child2.length; j++)
{
if (child2[j].tagName == 'BUTTON')
{
child2[1].setAttribute("md-prevent-menu-close", "md-prevent-menu-close");
}
}
}
else
dateButtonFix[0].setAttribute("md-prevent-menu-close", "md-prevent-menu-close");
}
}
}
setupDateButton();
我相信有更好的方法可以做到这一点,但截至目前,它有效。
今天我遇到了同样的问题,我创建了一个类限制指令来解决这个问题。
这是我的指令代码:
const TRUE = 'true';
const PREVENT_CLOSE = 'md-prevent-menu-close';
class CalendarBtnFixDirective {
constructor() {
this.restrict = 'C';
this.require = '^^mdDatepicker'
}
link(scope, element, attrs, datePickerCtrl) {
const nativeElement = element[0];
const preventMenuClose = datePickerCtrl.$attrs.mdPreventMenuClose;
if ([TRUE, PREVENT_CLOSE].indexOf(preventMenuClose) !== -1) {
nativeElement.setAttribute(PREVENT_CLOSE, PREVENT_CLOSE);
}
}
}
export const MdCalendarFixModule = angular
.module('md.calendar.fix.module', [])
.directive('mdDatepickerTriangleButton', () => new CalendarBtnFixDirective())
.name;
现在在您的md-datepicker
中,您可以使用 md-prevent-menu-close
属性
将 md-prevent-menu-close="true" 添加到按钮或图标。这将阻止菜单关闭。https://material.angularjs.org/1.0.3/api/directive/mdMenu
相关文章:
- 在事件上打开Materialize Date Picker
- 为什么要对define.md和module.exports进行条件检查,以及条件何时通过
- 在经过DATE验证的列中创建null值
- 如何将Date字段设置为等于另一个Date+Int值,该值表示月份值
- 如何为Angular Material's”;md菜单”;
- 有没有添加一个ng点击到md背景
- 为什么要做新的.Date()与new相差1小时.日期().到ISOString()
- 返回值+new Date()与Date.now()是否不同
- Javascript Date.toString() formatting?
- Javascript返回错误的Date值(NodeJS)
- 如何在Angular Material中的md背景后面接收ng点击事件
- date对象未在javascript中返回正确的日期值
- 当点击今天按钮时,Bootstrap Date Time Picker未选择当前时间
- Slider和Date Picker未显示JQuery
- Javascript date picker asp.net mvc
- jQuery Tablesorter Date Picker
- 带有 MD 菜单的 md-date-picker
- JQM Click Event Delegate: Date picker with JQM Datebox &
- 如果JQuery Date Picker等于Sunday,则显示不同的选项集
- 如何在PhoneGap/Android中实现DATE PICKER