Pickadate select week, month or year (or day)

I have a use case where the user can select between

daily avarage
weekly avarage
monthly average
yearly average

If the use selects 'daily average', I plan to use pat-pickadate to choose a date.
If they choose 'weekly average', I hope to to also use pickadate to choose week, hopefully looking like this:
... and the same for month (and maybe year)

Is this doable or should I use another javascript (library)?

I think using drop-downs are much simpler for year/month selection. PickADate is confusing if you are not picking something like a discrete day (or as in the jsfiddle a row is clearly highlighted for week).

In any case, I suggest you consider writing a custom widget that wraps PickADate and uses it when appropriate. I also suggest you have some kind of storage scenario planned out for this, you likely need a custom converter or a way of having a exemplary date value representing a period.

PickADate is not mandatory here, but wrapping it uses something that ships OOTB, so that's a plus.

By wrapping, I specifically mean:

  1. Make your own patternslib / mockup pattern;
  2. Have your pattern's init initialize PickADate, if appropriate, on some DOM input element your wrapper widget uses and/or creates;
  3. Have your pattern make after-the-fact customization to the PickADate config as necessary;