2

is there an angular 2 datepicker component that enables me to disable an array of specific dates?

I know that creating a custom wrapper for jquery datepicker is an option.

I found these 3 datepickers, but no one seem to capable of disabling certain dates.

https://github.com/kekeh/mydatepicker

https://github.com/jkuri/ng2-datepicker

www.primefaces.org/primeng/#/calendar

EDIT:

I will be getting the list in an http request. In addition, I need to disable all dates before the current date.

EDIT2:

It is a reservation use case. I need to disable all dates before today and I need to disable all dates from an array I will get in an http request.

The usage of validator is not a good option, because the user needs to see what he cannot choose.

EDIT3:

I have just found this one https://github.com/valor-software/ng2-bootstrap/tree/master/components/datepicker, I will go with this one and later post an answer.

Michael.D
  • 179
  • 1
  • 15

1 Answers1

1

This one has it. http://www.primefaces.org/primeng/#/calendar

See the Date Restriction section

<p-calendar [(ngModel)]="dateValue" minDate="-1m" maxDate="+1m" [readonlyInput]="true">></p-calendar>

+it uses jquery UI datepicker so you can use some of this: Jquery UI datepicker. Disable array of Dates

But...

Best way of doing this is probably just make an validator for this, and prevent user of selecting the value. You are 3rd party independent with this solution. Which can be pretty helpful in angular2 dynamic world.

AFTER QUESTION EDIT

I will be getting the list in an http request. In addition, I need to disable all dates before the current date.

If you don't want to code it in angular (validator or some change detection). The primeNG restrict will give you ability to disable a range of dates. (max/min date)

Community
  • 1
  • 1
jmachnik
  • 1,120
  • 9
  • 19
  • See edit: you can take advantage of primeng using jquery ui, so you can try to restrict those dates there – jmachnik Oct 17 '16 at 09:09
  • Since he's using angular2. Why don't do it in angular way? – hdotluna Oct 17 '16 at 09:12
  • 1
    Just made the edit ;) why you just don't post a proper answer instead of only pointing out other's mistakes? – jmachnik Oct 17 '16 at 09:14
  • I'm not pointing it. I am just asking. I know your answer is perfect. – hdotluna Oct 17 '16 at 09:16
  • Doing this angular2 way is simply the best answer, but the question was about choosing 3rd library. – jmachnik Oct 17 '16 at 09:18
  • What do you mean by angular2 way? – Michael.D Oct 17 '16 at 09:19
  • Validator is the simplest solution, but I am afraid it will hurt the ux experience. – Michael.D Oct 17 '16 at 09:20
  • @Michael.D 1. see my answer edit 2.you can use some change detection + validation in angular2 (on datepicker control). Are you familiar with forms validation? – jmachnik Oct 17 '16 at 09:21
  • @jmachnik the validator/change option is not a valid option, the user will select the date he wants to choose and than I will present him with the information that is not available. This breaks on of the basic rules of the usability. – Michael.D Oct 17 '16 at 09:28
  • Of course. But if your dates are just ranges (your edit shows that it's the case) you can use the primeng restrict, can't you? – jmachnik Oct 17 '16 at 09:29
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/125891/discussion-between-jmachnik-and-michael-d). – jmachnik Oct 17 '16 at 09:41
  • Perfect answer. I don't know why is it (-1) instead of (+50). –  Oct 18 '16 at 03:35
  • PrimeNG not using jquery for p-calendar component it is all native angular 2 now they are on their version 4. – Mertcan Diken Apr 20 '17 at 07:42