Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
92
rated 0 times [  98] [ 6]  / answers: 1 / hits: 77677  / 8 Years ago, fri, july 29, 2016, 12:00:00

I have a React.js project. I want to use data-picker plugin which require this style of input-attributes:


<input data-enable-time=true />

But webpack doesn't compile the app, when true is without quotes. Plugin doesn't work, when true with quotes.
What I should do?


UPD.


Yes, I run picker in componentDidMount()
It works, but displaying only date, without time.


import React, {Component} from 'react'
const Flatpickr = require('flatpickr');

export default class Date extends Component {

componentDidMount() {
let dateInput = document.getElementById('fPicker');
//init picker
new Flatpickr(dateInput);

}

render() {
return(
<div className="dateInputContainer">
<input id="fPicker" className="flatpickr" data-enable-time="true" />
</div>
)
}
}

But data-enable-time="true" doesn't work.


More From » reactjs

 Answers
22

According to the HTML spec, there is no difference between data-enable-item=true and data-enable-item=true. They will function exactly the same in browsers. Because HTML attributes without quotes are practically never used and can lead to a number of issues, React always uses quoted attributes.



In the snippet below you can check that they do indeed have the exact same effect.



I suspect your plugin not working is probably because you are loading your plugin the wrong way, and not because of the data attribute style. Are you sure you're only starting the date picker after the component has been mounted (for example, in componentDidMount)?





var withoutQuotes = document.getElementById('input-no-attribute-quotes');
var withQuotes = document.getElementById('input-with-attribute-quotes');

console.log('Are the data attributes for test exactly the same? ' + (withoutQuotes.dataset.test === withQuotes.dataset.test ? 'Yes.' : 'No.'));
console.log('Data attributes without quotesn', withoutQuotes.dataset);
console.log('Data attributes with quotesn', withQuotes.dataset);

<input id=input-no-attribute-quotes data-test=true />
<input id=input-with-attribute-quotes data-test=true />




[#61208] Wednesday, July 27, 2016, 8 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
dasias

Total Points: 344
Total Questions: 100
Total Answers: 100

Location: Hong Kong
Member since Tue, Oct 19, 2021
3 Years ago
;