pickr | 🎨 Flat , simple , multi-themed , responsive and hackable Color | User Interface library

I'm trying to use the Node package vue-flatpickr-component in a Vue class component, with the following vue template code:

I have using date pickr in reactive form

date picker ionic

The example is in template driven form..am using reactive form.

Is some one using reactive form date picker ..How to do that? Please let me know i need (only display DD-MM-YYYY) and send date to server ...thanks

Im using a watcher in vue for updating the values in the component Persons.vue as soon as an array Im passing from the App.vue to the Persons.vue as a prop changes. It works fine and updates when Im updating the prop by using the optionlist. But as soon as Im using a datepicker to set the a new date the array that is saved to the prop personData is updated correctly in the console log but is not received in the watcher.

Any hint of solving this is very much apreciated!

This is i fictive codesetup based on a much bigger application but I hope you get the problem.

App.vue

in my html form I am using flatPickr (calendar picker) component that generates input field on the form. I am trying to figure out how do I change the input field class dynamically if the error class function returns true.

Here is the flatPickr component in the html form, below which is also an span that displays error message that came back via ajax. What I would like to achieve is, if there is an error that came back from server, I would like to add a "is-invalid" class to the input generated by flatPickr component.

I am trying to style the Flatpickr input box, and not sure how to apply the style.

I have a component that uses imports a Flatpickr component. I am trying to apply style in the

Trying to apply style

I use pickr plugin: https://github.com/Simonwep/pickr

In a form where I can dynamically add multiple input fields for the pickers, I don't know how to instantiate each of it. It work only for first. I can't use ID, only classes.

Plugin is built to instantiate single inputs. But my form need to add N. dynamic inputs (unknown quantity)

A jsfiddle where only first is instantiated.

https://jsfiddle.net/dvx79gz1/2/

I actually insert this code in a function called each time a new row is added:

I want to use a color picker library called pickr in a react.js project.

How can I add the library to my react.js component ?

• I imported the library : @simonwep/pickr
• Then I imported the classic theme : @simonwep/pickr/dist/themes/classic.min.css
• Created a function called ColorPicker and pasted some code from the github repository in it
• That function returns a div tag containing the parameter : className="color-picker"

here is the source code :

I have a simple program where you can select a color and fill a box with it. I have a 4x4 grid of boxes(divs) and I want to check if the backgroundColor of all the divs(boxes) has a value, so that when all the boxes are filled with a color the grid resets and all the boxes are blank again.

However, I am having some problems implementing this. My first idea was to check that every div in the array (I've used querySelectorAll) has a backgroundColor 'red' or 'blue'. I've tried to store the backgroundColor of the array item into a variable but that doesn't return the string when I console log it.

I also tried the every() method on the Array but that didn't seem to work.

So my question would be, how do I get the backgroundColor of an element in a nodelist and check to see if that element has a backgroundColor.

Here is my JavaScript code:

I have two colored divs on which I want to put events on. I have selected them using getElementById and that worked fine - when I console.log the variable I get the right div.

However, the click event doesn't seem to fire at all. I basically just wanted to check if it works with console.log so that is what the function returns.

Here is the HTML code: