Categories
JavaScript Answers

How to format current time into yyyy-mm-dd format with JavaScript?

To format current time into yyyy-mm-dd format with JavaScript, we call toLocaleString, toLocaleDateString or toLocaleTimeString.

For instance, we write

const d = new Date();
console.log(d.toLocaleString('en-SE'));
console.log(d.toLocaleDateString('en-SE'));

to create date d with the current datetime.

And then we call toLocaleString to return a string with the human readable locale datetime string with date and time being the values in d.

We call toLocaleDateString to return a string with the human readable locale date string with date and time being the values in d.

We call them all with a locale that has dates in yyyy-mm-dd format to return a date string in this format.

Conclusion

To format current time with JavaScript, we call toLocaleString, toLocaleDateString or toLocaleTimeString.

Categories
React Answers

How to Fix the “Warning: validateDOMNesting(…): ‘div’ cannot appear as a descendant of ‘p’. ” Error When Developing React Apps?

To fix the "Warning: validateDOMNesting(…): <div> cannot appear as a descendant of <p>. " error when developing React apps, we should make sure we don’t nest div elements within p elements.

For instance, we instead of writing:

<p>
    <div></div>
</p>

which is invalid HTML, we write:

<p></p>
<div></div>

Browsers will fix the HTML when the code is rendered, which will make React’s virtual DOM different from what’s rendered.

Categories
JavaScript Answers

How to set custom validation message for HTML5 form required attribute with JavaScript?

Sometimes, we want to set custom validation message for HTML5 form required attribute with JavaScript.

In this article, we’ll look at how to set custom validation message for HTML5 form required attribute with JavaScript.

How to set custom validation message for HTML5 form required attribute with JavaScript?

To set custom validation message for HTML5 form required attribute with JavaScript, we call the setCustomValidity method.

For instance, we write

<input
  type="text"
  id="username"
  required
  placeholder="Enter Name"
  oninvalid="this.setCustomValidity('Enter User Name Here')"
  oninput="this.setCustomValidity('')"
/>

to call setCustomValidity with the validation message we want to show.

oninput is run as we type and oninvalid is run when the input is invalid.

Conclusion

To set custom validation message for HTML5 form required attribute with JavaScript, we call the setCustomValidity method.

Categories
JavaScript Answers

How to get value of selected radio button with JavaScript?

Sometimes, we want to get value of selected radio button with JavaScript.

In this article, we’ll look at how to get value of selected radio button with JavaScript.

How to get value of selected radio button with JavaScript?

To get value of selected radio button with JavaScript, we use querySelector.

For instance, we write

const value = document.querySelector('input[name="rate"]:checked').value;

to select the radio button with name rate that’s selected with :checked and querySelector.

And we get its value attribute value with value.

Conclusion

To get value of selected radio button with JavaScript, we use querySelector.

Categories
JavaScript Answers

How to create a style tag tag with JavaScript?

Sometimes, we want to create a style tag tag with JavaScript.

In this article, we’ll look at how to create a style tag tag with JavaScript.

How to create a style tag tag with JavaScript?

To create a style tag tag with JavaScript, we call createElement.

For instance, we write

const ss = document.createElement("link");
ss.type = "text/css";
ss.rel = "stylesheet";
ss.href = "style.css";
document.head.appendChild(ss);

to call createElement to create a link element.

Then we set its attributes by setting its properties.

Next, we call document.head.appendChild to append the link element as the last child of the head element.

Conclusion

To create a style tag tag with JavaScript, we call createElement.