Bug / Enhancement: Multiple Instance with One Invocation about datepicker

[qodesmith]

Hey @Abourass . You were using the original multiPickers function I gave you in the wrong way. It functioned under the assumption that each <input> had the same class and only took 2 arguments - a single selecter and an options argument to pass down to datepicker. In your case, since you have a unique id for each input, you can do this instead:

// Add any id or class to this array that represents an input on the screen.
const ids = [
  '#completionDate',
  '#lastSaleDate',
  '#originalListDate',
  '#listDate',
  '#saleOneListDate',
  'saleTwoListDate'
]

// You only need the 2nd argument to datepicker if you're using options.
// Feel free to leave it out if you're not using any options.
const pickers = ids.map(id => datepicker(id, { ... }))

[Abourass]

Ahh that makes sense, I switched to .fancyDatePicker and it works perfectly. Thank you so much! This is absolutely perfect, I can't thank you enough.

[qodesmith]

Not sure I follow... are you trying to attach multiple datepickers to the same element? That will throw an error. Check your console to make sure. For example, if you are doing this...

const calendar1 = datepicker('.fancyDatePicker', { ... })
const calendar2 = datepicker('.fancyDatePicker', { ... })
const calendar3 = datepicker('.fancyDatePicker', { ... })

... then only the first calendar will work. Each calendar's element needs to be unique. You can't attach 2 calendars to the same element. Normally, the calendar is attached to an input field, so in the case you mentioned there would be separate input fields for sale date, date listed, etc. Help me understand your setup better.

[Abourass]

First, sorry about the duplicate, I submitted right as GitHub had downtime for issues -> https://status.github.com/messages

Second, my bad on not being more clear. What I was saying is that it would be nice to not have to initialize for every instance of the datepicker, as for my application that means 6 - 8 initialization per form page:

const calendar1 = datepicker('#dateSold', { ... })
const calendar2 = datepicker('#dateBought', { ... })

Not that that's a huge deal, but when making hundreds of form pages it's a tad tedious. If instead it could be initialized and use a class rather than having to have a unique I.D. (same as materialize-css's datepicker, with that you you define it once, then just use the class datepicker on a text input) then this would make using this as simple as defining it in the header and using the correct class.

This may be totally not doable the way this has been made, I'm unsure, I didn't dig into the code. If so, you can totally close this. Since you mentioned in the description of the project you can use a class name, I figured it was supposed to work as I mentioned above, otherwise I would have just file this as enhancement. Thanks for answering so quickly.

[qodesmith]

I think I get what you mean. So let's suppose for your form you have 5 inputs, each needing a datepicker. And each of those inputs has the same class, let's say .fancyDatePicker. You want to do something like this...

const pickers = datepicker('.fancyDatePicker', { ... })

... and have a datepicker automatically set up on each input? I could bake that feature into the library, but perhaps you simply need a helper function to do it for you. Since datepicker can take in a DOM object as opposed to a string selector, you could use something like this:

function multiPickers(selector, options) {
  const elements = document.querySelectorAll(selector)

  return Array
    .from(elements)
    .map(element => datepicker(element, options))
}

Now anywhere in your app that you have a crazy form that you want multiple pickers set up, you'd do:

const pickers = multiPickers('.fancyDatePicker', { ... })

And now your pickers variable is an array of datepicker instances corresponding to the inputs on the page (in that order). Let me know if this was what you were referring to.

[qodesmith]

Playing around with that shows I need to ensure that the original options object isn't mutated. Currently it is. I'm bout to push an update.

[qodesmith]

Update pushed. Use the latest version & let me know about the helper fxn mentioned above.

[qodesmith]

Closing this issue. Let me know if you still have troubles.

[Abourass]

Hello,

Sorry about the long response time. I'm only hired for Monday and Tuesday, and last Tuesday I was out of town. So, I've brought in the latest version of the javascript and css sources, and set up the following:

function multiPickers(selector, options) {
            const elements = document.querySelectorAll(selector)
            return Array
              .from(elements)
              .map(element => datepicker(element, options))
          }
 const pickers = multiPickers('#completionDate', '#lastSaleDate', '#originalListDate', '#listDate', '#saleOneListDate', 'saleTwoListDate');

However now I'm getting:

Uncaught TypeError: Cannot create property 'disabledDates' on string '#lastSaleDate'
    at t (datepicker.min.js:1)
    at e (datepicker.min.js:1)
    at Array.from.map.element ((index):559)
    at Array.map (<anonymous>)
    at multiPickers ((index):559)
    at HTMLDocument.<anonymous> ((index):561)

I can get rid of the error by defining options:
const pickers = multiPickers('#completionDate', {}, '#lastSaleDate', {}, '#originalListDate', {}, '#listDate', {}, '#saleOneListDate', {}, 'saleTwoListDate', {});
But it still only works on the first date picker on the page.

Just in case, the page in question is:
https://github.com/Abourass/AssetVal_Beta/blob/master/views/forms/classicV3SL.handlebars

And the function / initialization can be found in the main template:
https://github.com/Abourass/AssetVal_Beta/blob/master/views/layouts/main.handlebars