Topic: Date Picker re-init/destroy
ingo.schubert
premium
asked 8 years ago
Arkadiusz Idzikowski
staff
answered 7 years ago
<mdb-date-picker (dateChanged)="onDateChanged($event)" [options]="startOptions" [placeholder]="'Selected start date'"></mdb-date-picker> <mdb-date-picker [options]="endOptions" [placeholder]="'Select end date'"></mdb-date-picker>
import { Component, OnInit } from '@angular/core';
import { IMyOptions } from 'ng-uikit-pro-standard';
@Component({
selector:'app-root',
templateUrl:'./app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
startOptions:IMyOptions= { };
endOptions:IMyOptions= {};
ngOnInit() {
constdate=newDate();
constyear=date.getFullYear();
constmonth=date.getUTCMonth() +1;
constday=date.getDate() -1;
constyesterdayDate= { year, month, day };
this.startOptions= { disableUntil:yesterdayDate };
this.endOptions= { disableUntil:yesterdayDate };
}
onDateChanged(event:any) {
this.endOptions= {...this.endOptions, disableUntil:event.date };
}
Jakub Strebeyko
staff
answered 7 years ago
For anyone still wondering about the way to bond together a "to" and a "from" datepicker - good news. It's achieved with help of getters and setters and here's how:
<div class="md-form">
<input placeholder="Selected starting date" type="text" id="startingDate" class="form-control datepicker">
<label for="startingDate">start</label>
<input placeholder="Selected ending date" type="text" id="endingDate" class="form-control datepicker">
<label for="endingDate">end</label>
</div>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~// Check if there’s a “from” or “to” date to start with and if so, set their appropriate properties.
var from_input = $('#startingDate').pickadate(),
from_picker = from_input.pickadate('picker')
var to_input = $('#endingDate').pickadate(),
to_picker = to_input.pickadate('picker')
// Apply event listeners in case of setting new "from" / "to" limits to have them update on the other end. If 'clear' button is pressed, reset the value.
if ( from_picker.get('value') ) {
to_picker.set('min', from_picker.get('select'))
}
if ( to_picker.get('value') ) {
from_picker.set('max', to_picker.get('select'))
}
from_picker.on('set', function(event) {
if ( event.select ) {
to_picker.set('min', from_picker.get('select'))
}
else if ( 'clear' in event ) {
to_picker.set('min', false)
}
})
to_picker.on('set', function(event) {
if ( event.select ) {
from_picker.set('max', to_picker.get('select'))
}
else if ( 'clear' in event ) {
from_picker.set('max', false)
}
})
Regards,
Kuba
ingo.schubert premium commented 7 years ago
Very good! I'll give that a try, thanks!Jakub Strebeyko staff commented 7 years ago
Please do provide feedback - hope it helps! Best, Kuba
Jakub Strebeyko
staff
answered 8 years ago
ingo.schubert premium commented 8 years ago
Thanks for the answer Jake. If I find time I'll see if I can hack something together in picker-date.js.FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Premium
- Premium support: Yes
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
ingo.schubert premium commented 8 years ago
MDB Team: could you please have a look at the question and let me know if this is at all possible or not?