Date Picker re-init/destroy


Topic: Date Picker re-init/destroy

ingo.schubert pro premium asked 7 years ago

Hi,   I have two date pickers on a page (start and end). The both pickers I already initialized to disable dates before "today-1 day" - that part works fine. What I'd like to do is update the end date picker to disable dates sooner than "start" - so a user can't pick a end date that is before (or on) the start date. I tried just initializing the end-datepicker  again using .pickadate({...}) but that doesn't work. I couldn't find a destroy-like method (as there is for the mdb select component). Do you have a workaround for this problem? Regards, Ingo

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?

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>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
var from_input = $('#startingDate').pickadate(),
  from_picker = from_input.pickadate('picker')
var to_input = $('#endingDate').pickadate(),
  to_picker = to_input.pickadate('picker')
// Check if there’s a “from” or “to” date to start with and if so, set their appropriate properties.
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'))
}
// 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.
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, Kuba

Jakub Strebeyko staff answered 7 years ago

Hi there ingo.schubert, We don't have a workaround in place for the moment, but the functionality you mention seems technically possible and shall be added to our list of ideas. Our best guess for now involves dynamically binding 1st DatePicker's output with 2nd's .disabled() method (line 562). Feel free to fiddle around with picker-date.js and don't forget to let us know about the outcome! With Best Regards, Jake

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

How to do the same scenario in angular?

Arkadiusz Idzikowski staff answered 6 years ago

Dear marami, Here is an example for Angular: HTML:
<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>
TS:
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 };

}
Regards,
Arek

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No