There seems to be an issue that I'm encountering:
https://i.sstatic.net/7aFqA.png
Whenever I click on the datepicker input, the calendar appears overlapped. This is evident because when I hide the dialog, the calendar displays correctly:
https://i.sstatic.net/Jv7bZ.png
I've attempted multiple solutions from StackOverflow related to z-index without success. The default z-index is specified as 10 but changing it with zIndexOffset didn't resolve the issue either. Here's the code snippet:
<dialog ng-if="controller.iView" class="rounded" style="position: fixed;width:750px;overflow-y: scroll;" id="feDialog">
<div class="dialogHeader horizontalLayout">
<span style="width:280px">Text:</span>
<div class="flex"></div>
<input type="text" style="width:100px; position: relative;" date-picker class="materialInput" ng-model="controller.date">
<div class="materialButton colorButton" ng-click="controller.date = controller.getNowDate()">Today</div>
</div>
<div ng-if="controller.feDialogOpened" class="dialogContent flex verticalLayout">
...
</div>
<div class="buttons horizontalLayout">
<div class="materialButton" ng-click="controller.closeFeDialog();">Cancel</div>
<div class="flex"></div>
<div class="materialButton disabledButton" ng-if="!controller.isValid()">Save</div>
<div class="materialButton colorButton" ng-if="controller.isValid()" ng-click="controller.setState('state');f.closeFeDialog();">Save</div>
</div>
</dialog>
The datePicker directive in Typescript is defined as follows:
app.directive('datePicker', function() {
/** Dev notes: in comments is an attempt to enable dynamic limits */
return {
restrict: 'A',
/**scope: {
limits: "=?"
},*/
link: function (scope: ng.IScope, element: JQuery, attrs: ng.IAttributes) {
var view = attrs.datePickerStartView || 'month';
var minView = attrs.datePickerMinView || 'month';
var format = attrs.datePickerFormat || 'dd/mm/yyyy';
if (attrs.endDate === 'today') {
attrs.endDate = moment().format('DD-MM-YYYY');
}else if (attrs.endDate === 'none'){
attrs.endDate = moment().add(1, 'years').format('DD-MM-YYYY');
}else if(attrs.endDate != ''){
attrs.endDate = attrs.endDate;
}
var endDate = attrs.endDate || new Date();
if (attrs.startDate === 'today') {
attrs.startDate = new Date();
}
var startDate = attrs.startDate || '01-01-1900';
$(element)['datetimepicker']({
format: format,
endDate: endDate,
startDate: startDate,
autoclose: true,
startView: view,
minView: minView,
language: 'es',
todayBtn: attrs.unknownDate });
// set input elements as readonly, so you cannot input free text.
if (attrs.setReadonly) {
$(element).find('input').attr('readonly', 'true');
}
/**
scope.$watch(() => {
return scope["limits"]
}, (newVal,oldVal) => {
if (!_.isEmpty(newVal)) {
const min = scope["limits"].min
const startDate = min ? moment(min).format('DD-MM-YYYY') : '01-01-1900'
const max = scope["limits"].max
const endDate = max ? moment(max).format('DD-MM-YYYY') : '01-01-2500'
$(element)['datetimepicker']({
endDate: endDate,
startDate: startDate,
});
}
})*/
}
};
});
The CSS classes used are:
.dialogHeader{
color: #2A323F;
margin: 15px 15px 0;
font-size: 18px;
}
.horizontalLayout{
display : flex;
flex-direction : row;
align-items : center;
}