Topic: Date Picker re-init/destroy
ingo.schubert pro premium asked 7 years ago
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 pro 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, KubaJakub Strebeyko staff answered 7 years ago
ingo.schubert pro premium commented 7 years ago
Thanks for the answer Jake. If I find time I'll see if I can hack something together in picker-date.js.marami pro answered 6 years ago
Arkadiusz Idzikowski staff answered 6 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 }; }
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
ingo.schubert pro premium commented 7 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?