I have made the customized selection of date start Date & Start Time . For the Start Date , im using the ng2 datetime picker library & for the start time , using the two placeholders with the dropdown for selection of hours and minutes. And for the Everyday frequency only , i have give the customization of From Date-Time & To Date-Time selection. That From Date-Time & To Date-Time is set using the Start Date & Start-Time.
But, When I give the input of start Date & Start Time , then for Everyday frequency only , the dropdown is there , in that fromDate-time & toDate-Time date-time picker is there. When I give the input of start Date & Start Time, then fromDate-time &toDate-TIme is set & we can manually also select date & time.
But when I again change the start Date or Start Time , then the fromDate-Time & toDate-Time date-time picker is not showing calender & time or not giving the access for manual change of date & time
enter image description here , My UI preview
enter image description here , Problem im facing for that
<HTML Code>
<div class="col-md-3 ">
<label extraFun="Task_Add_Start_Date" for="startDate">Start Date
<span style="color:red;">*</span>:</label>
<input [(ngModel)]="startdateMoment" (ngModelChange)="updateDateTimeRange()" [disabled]="true" [disabled]="isViewOnly == 1 || viewReport || (!addBtnView && !viewReport)"
class="form-control" ng2-datetime-picker [date-format]="'DD-MM-YYYY'" date-only="true"
[close-on-select]="false" [show-close-layer]="true" year="2018" month="12" day="31"
style="background-color: white;" [disabled]="true"
[style.background-color]="(disableStartDateInput == true || taskView == true || IsOnlyStatusView == true) ? '#eeeeee' : '#fff'"
placeholder="Start Date" />
{{startdateMoment | json}}
</div>
<!--[disabled] ="TaskstartDate"--->
<div class="col-md-4 ">
<label for="ex3">Start Time<span style="color:red">*</span>:</label>
<div class="input-group" style="display:flex;">
<div class="input-group-prepend">
</div>
<ng-select [items]="hours" [disabled]="isViewOnly == 1 || viewReport || (!addBtnView && !viewReport)"
[clearable]="false" class="pull-left" [(ngModel)]="strtTime" style="display:flex;"
style="width:40%;height:34px" (ngModelChange)="updateDateTimeRange()">
<!-- <option value="HH" selected hidden disabled>HH</option>
<option *ngFor="let hour of hours" style="width:16%;" class="form-control" value="{{hour}}" required>
{{hour}}</option> -->
</ng-select>
<ng-select [items]="mintunes" [disabled]="isViewOnly == 1 || viewReport || (!addBtnView && !viewReport)"
[clearable]="false" class="pull-left" [(ngModel)]="strtTimeMins" style="width:40%;height:34px"
(ngModelChange)="updateDateTimeRange()">
<!-- <option value="MM" name="mins" selected hidden disabled>MM</option>
<option *ngFor="let mins of mintunes" name="mins" class="form-control" style="width:16%;"
value="{{mins}}" required>{{mins}}</option> -->
</ng-select>
</div>
<div *ngIf="ShowStartTimeHoursError" style="color:red">Start Time Should be Same or Greater than
Current Time
</div>
<!-- row end-->
</div>
<ng-container *ngIf="getfrequencyid === 2">
<div class="col-md-12 top10">
<div class="form-check">
<label class="form-check-label" for="enableDateTime">
Date-Time Input
</label>
<input class="form-check-input" type="checkbox" [(ngModel)]="isDateTimeEnble"
(change)="updateTime($event.target.checked)" [disabled]="!checkboxEnabled && isEdit">
</div>
<div *ngIf="isDateTimeEnble">
<div class="col-md-3 marginBottom">
<label for="startDate">From Date-Time:</label>
<div class="input-group">
<div class="input-group-prepend"></div>
<input [(ngModel)]="fromDateTime" class="form-control" ng2-datetime-picker date-format="DD-MM-YYYY HH:mm:ss"
[close-on-select]="false" [show-close-layer]="true" year="2018" month="12" day="31"
style="background-color: white; border-radius: 4px;" placeholder="From Time" />
{{fromDateTime | json}}
<div><button id="from-tooltip" class="btn-group" data-toggle="tooltip"
title="From Date-Time derived from selected start date and time. Accordingly, it calculates date and time which gives the timeframe of 24 hours."
data-placement="top"><i class="fa fa-info-circle"></i>
</button></div>
</div>
</div>
</div>
<div *ngIf="isDateTimeEnble">
<div class="col-md-3 marginBottom">
<label for="endDate">To Date-Time:</label>
<div class="input-group">
<div class="input-group-prepend">
</div>
<input [(ngModel)]="toDateTime" class="form-control" ng2-datetime-picker date-format="DD-MM-YYYY HH:mm:ss"
[close-on-select]="false" [show-close-layer]="true" year="2018" month="12" day="31"
style="background-color: white; border-radius: 4px;" placeholder="To Time" />
{{toDateTime | json}}
<div><button id="from-tooltip" class="btn-group" data-toggle="tooltip"
title="To Date-Time derived from selected start date and time. Accordingly, it calculates date and time which gives the timeframe of 24 hours."
data-placement="top"><i class="fa fa-info-circle"></i>
</button></div>
</div>
</div>
</div>
</div>
</ng-container>
<TS Code>
isDateTimeEnble: boolean = true;
isEnabled: boolean = false;
today = new Date();
startdateObj: any;
startdateMoment: any;
enddateObj: any;
hours = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09",
"10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"];
mintunes = [...this.hours,
"24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37",
"38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51",
"52", "53", "54", "55", "56", "57", "58", "59"]
getTimeZ() {
debugger;
this.strtTime = 'HH';
this.strtTimeMins = 'MM';
this.fromHrsTime = 'HH';
this.fromMinsTime = 'MM';
this.toHrsTime = 'HH';
this.toMinsTime = 'MM';
this.startdateMoment = moment().startOf('day');
this.startdateObj = this.today.getDate().toString();
let date = new Date();
let hours: any;
let mins: any;
if (date.getHours() < 10) {
hours = '0' + date.getHours().toString();
} else {
hours = date.getHours().toString();
}
if (date.getMinutes() < 10) {
mins = '0' + date.getMinutes().toString();
} else {
mins = date.getMinutes().toString();
}
this.strtTime = "00";
this.strtTimeMins = "00";
this.fromHrsTime = "00";
this.fromMinsTime = "00";
this.toHrsTime = "00";
this.toMinsTime = "00";
this.strthrs = "00";
this.strtmins = "00";
this.enddateObj = (this.today.getDate()).toString();
return this.startdateObj, this.enddateObj;
}
updateDateTimeRange() {
const startDateTime = moment(this.startdateMoment + ' ' + this.strtTime + ':' + this.strtTimeMins, 'DD-MM-YYYY HH:mm');
this.fromDateTime = moment(startDateTime).subtract(1, 'days');
const toDateTime = moment(startDateTime);
this.toDateTime = moment(toDateTime);
console.log('fromDate', this.fromDateTime.format('YYYY-MM-DD HH:mm'));
console.log('toDate', this.toDateTime.format('YYYY-MM-DD HH:mm'));
}
degugger;
updateTime(event: any) {
this.isDateTimeEnble == this.isEnabled;
if (this.isDateTimeEnble == this.isEnabled) {
this.isUnchecked = false;
return;
}
else {
this.isUnchecked = true;
return;
}
}
I have tried this but im getting this error as When I change the start Time or start Date , then when I select the from date-time or To date-time , then the calender is not give the access for the manual change & this error is appearing . I think the problem is with the date type ,Im using the moment type, its correct but still im not getting it.
