Reusing a widget or using it in multiple Pickr-instances

[4URGB]

Hi,

i 've some input fields, and add the color-picker class to each of them.

Only the first input field, will work with the picker. Is that not possible to use your picker for multiple fields at same page or did i something wrong?

best regards,
Rene

[simonwep]

Hello :)

I think it's a duplicate of #30
Tried to reproduce it here but everything works fine. Could you provide a JSFiddle where this issue persist?
It's also helpful if you show me your browser(-version) and your current OS / environment.

[simonwep]

Ah, I got what you mean, no. This is not possible, you need for each of your pickr-container an individual selector / Pickr instance.

[drkokai]

Hi,
Are you working on this implementation?

[simonwep]

@drkokai No, how should this get solved? How would you distinguish which event is from which instance? Use a for loop to archive something like this :)

[ange007]

@drkokai No, how should this get solved? How would you distinguish which event is from which instance? Use a for loop to archive something like this :)

Perhaps by storing a global match list?

Just like that, really bad:

Its many color picker elements (for edit many options in one time)

[simonwep]

@ange007 Reusing the overlay, could be possible if not always visible. I'll reopen this issue :)

[insad]

If you use only one picker at a time, it's rather easy to simulate the button and launch / destroy the color picker each time... using the same here in a big application, even built it out for setting gradients and showing more color swatches in groups and tabbed (material colors / bootstrap colors / theme colors... you name it)

[tarhkar]

hi

Hi,

i 've some input fields, and add the color-picker class to each of them.

Only the first input field, will work with the picker. Is that not possible to use your picker for multiple fields at same page or did i something wrong?

best regards,
Rene

hi,
if Each element has a unique identifier you can use click function for get element ID and use it for select color example:
html :
<button type="button" id="1" class="color-picker">select color</button> <button type="button" id="2" class="color-picker">select color</button> <button type="button" id="3" class="color-picker">select color</button>
and js :
<script> jQuery(document).ready(function($){ $('.color-picker').click(function() { const ID = this.id; const inputElement = document.querySelector('#'+ID); const pickr = Pickr.create({ useAsButton: true, el: inputElement, ... }); }); }); </script>