Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

select Maximum 30 days in ngx Bootstrap date range picker #5636

Closed
neerajmadaad opened this issue Feb 3, 2020 · 9 comments
Closed

select Maximum 30 days in ngx Bootstrap date range picker #5636

neerajmadaad opened this issue Feb 3, 2020 · 9 comments

Comments

@neerajmadaad
Copy link

Hi
I want that user should be able to maximum select maximum 30 days in the date range picker.
Is this functionality available in this?

@daniloff200
Copy link
Contributor

hi, @neerajmadaad , what do you mean by maximum 30 days in daterangepicker ?

Does it mean functionality, which does not allow, for example, 1st of April, if today is 1st of March, or, you mean, that you want to allow to see only one month in daterangepicker?

Could you provide some example, or, at least more info about your idea?
Thanks!

@daniloff200
Copy link
Contributor

daniloff200 commented Feb 4, 2020

We have maxDate property, you can use it, if you want not to allow user to select some date, after 30 days.

That will be something like that:

in your component:
this.maxDate = new Date(); this.maxDate.setDate(this.maxDate.getDate() + 30);

in template:
<input class="form-control" placeholder="Daterangepicker" bsDaterangepicker [maxDate]="maxDate">

@neerajmadaad
Copy link
Author

For example in Date range picker user select April 1 2019(as From date) then all dates after 30 April (April 1+ 30 days) should be disabled.
Another: if user select From date as 1 January 2020, all dates after 30 Jan 2020 will get disabled automatically even before To date is selected.

I hope I have cleared my question.

@daniloff200
Copy link
Contributor

daniloff200 commented Feb 4, 2020

Yeah, now it's more understandable
Right now ngx-bootstrap doesn't have functionality, which allows to disable dates after first range selection, also depending on some custom values
That needs to be implemented.
I hope to have time this week to investigate this feature to library

@neerajmadaad
Copy link
Author

Can you please help me with any event that I can use which is triggered when "From date" is chosen from the daterange picker, I would try to set max date on "From date selection" and then will try to remove it(Max date) once the user has selected "To Date".

@neerajmadaad
Copy link
Author

Hi @daniloff200
Do you have any update on this, will we have any enhancement like this in near future? If yes, could you please update till when will it be available.
As of now I am working with an alternate solution and it still has some problems:
Here maxSelectableDate is the max date,

onDatepickerShown() {
const datepicker: HTMLElement = document.querySelector('bs-daterangepicker-container');
datepicker.addEventListener('click', (e: Event) => {
if ((e.target as HTMLElement).hasAttribute('bsdatepickerdaydecorator')) {
const clickedDayNum: string = (e.target as HTMLElement).innerText;
const monthYearButtons: NodeListOf = datepicker
.querySelector('.bs-datepicker-head')
.querySelectorAll('.current');
const language = 'en'; //assuming the current language is en
const clickedDate = moment(${clickedDayNum} ${monthYearButtons[0].innerText} ${monthYearButtons[1].innerText}, 'DD MMMM YYYY', language).locale('en').toDate();
const tempMaxSelectableDate = moment(moment(clickedDate).add(30, 'days')).toDate();
if(moment().toDate()> tempMaxSelectableDate)
this.maxSelectableDate = moment(moment(clickedDate).add(30, 'days')).toDate();
}
});
}

Thanks
Neera Madad

@daniloff200 daniloff200 self-assigned this Feb 19, 2020
@neerajmadaad
Copy link
Author

Hi @daniloff200
Any update on this?

@llaz00
Copy link

llaz00 commented Jul 13, 2020

I think instead of a property true/false for selecting a fixed duration, there should be an option to specify the maximum duration in days from the selected date.
There should be an option also to have fixed duration or "flexible" duration. For example, with a 7 days duration, a flexible duration would allow you to select an endDate within the next 7 days, and the fixed duration would select automatically the endDate 7 days after the startDate.

@rafaelss95
Copy link

@daniloff200 Since this is already available using maxDateRange (6.1.0+) I guess this could be closed.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants