Using boolean-value of attributes in JSX

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 quotes\n', withoutQuotes.dataset);
console.log('Data attributes with quotes\n', withQuotes.dataset);

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

You can just omit the value assignment; the attribute will be assigned a value of true by default.

Instead of doing any of:

<input data-enable-time=true />
<input data-enable-time='true' />
<input data-enable-time={true} />

Do:

<input data-enable-time />

This approach avoids the warning Value must be omitted for boolean attributes [react/jsx-boolean-value] when the code is linted via eslint-plugin-react. (See: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-boolean-value.md)