Category: JavaScript

Categories
JavaScript Answers

How to convert 24 hour time to 12 hour time with AM & PM using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to convert 24 hour time to 12 hour time with AM & PM using JavaScript.

In this article, we’ll look at how to convert 24 hour time to 12 hour time with AM & PM using JavaScript.

How to convert 24 hour time to 12 hour time with AM & PM using JavaScript?

To convert 24 hour time to 12 hour time with AM & PM using JavaScript, we use the toLocaleString method.

For instance, we write

const date = new Date("February 04, 2022 19:00:00");
const options = {
  hour: "numeric",
  minute: "numeric",
  hour12: true,
};
const timeString = date.toLocaleString("en-US", options);
console.log(timeString);

to call toLocaleString with the locale string and the options object.

In options, we set hour12 to true to return a string with 12 hour time and AM or PM.

hour and minute are set to numeric to return them as numbers.

Conclusion

To convert 24 hour time to 12 hour time with AM & PM using JavaScript, we use the toLocaleString method.

Categories
Vue Answers

How to add attribute dynamically in Vue.js?

Labrador retriever puppy walking on green grass

Sometimes, we want to add attribute dynamically in Vue.js.

In this article, we’ll look at how to add attribute dynamically in Vue.js.

How to add attribute dynamically in Vue.js?

To add attribute dynamically in Vue.js, we use v-bind.

For instance, we write

<template>
  <input
    type="text"
    :disabled="disabled"
    :placeholder="placeholder"
    v-model="value"
  />
</template>

to add the disabled and placeholder attributes dynamically.

:disabled is short for v-bind:disabled.

And :placeholder is short for v-placeholder.

We set disabled to the value of the disabled reactive property.

And we set placeholder to the value of the placeholder reactive property.

Conclusion

To add attribute dynamically in Vue.js, we use v-bind.

Categories
React Answers

How to fix Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks?

Labrador retriever puppy walking on green grass

To fix Uncaught Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement in React Hooks, we should put hook calls at the top level of a component.

For instance, we write

const { useState } = React;

function App() {
  const [name, setName] = useState("Mary");
  const [age, setAge] = useState(16);
  const [license, setLicense] = useState("A123456");

  return (
    <div>
      Name:{" "}
      <input
        value={name}
        onChange={(e) => {
          setName(e.target.value);
        }}
      />
      <br />
      Age:{" "}
      <input
        value={age}
        type="number"
        onChange={(e) => {
          setAge(+e.target.value);
        }}
      />
      {age >= 16 && (
        <span>
          <br />
          Driver License:
          <input
            value={license}
            onChange={(e) => {
              setLicense(e.target.value);
            }}
          />
        </span>
      )}
    </div>
  );
}

to call useState at the top of the App component only.

Then React can call all the hooks in order.

We should not nest any hooks in our component.

Otherwise, we’ll get this error.

Categories
React Answers

How to fix React form setState is one step behind onChange?

Labrador retriever puppy walking on green grass

Sometimes, we want to fix React form setState is one step behind onChange

In this article, we’ll look at how to fix React form setState is one step behind onChange.

How to fix React form setState is one step behind onChange?

To fix React form setState is one step behind onChange, we call setState with an object with the states we want to change and a function that’s called after the states are changed.

For instance, we write

class Comp extends Component {
  //...
  handleChange = (e) => {
    console.log(e.target.value);
    this.setState({ message: e.target.value }, this.handleSubmit);
  };
  //...
}

to call setState with { message: e.target.value } to set the message state to e.target.value.

After the states are set then this.handleSubmit is called.

Conclusion

To fix React form setState is one step behind onChange, we call setState with an object with the states we want to change and a function that’s called after the states are changed.

Categories
JavaScript Answers

How to change select option and trigger events with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to change select option and trigger events with JavaScript.

In this article, we’ll look at how to change select option and trigger events with JavaScript.

How to change select option and trigger events with JavaScript?

To change select option and trigger events with JavaScript, we trigger the event manually.

For instance, we write

<select id="sel">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected>Three</option>
</select>
<input type="button" value="Change option to 2" />

to add a select and input element.

Then we write

const select = document.querySelector("#sel");
const input = document.querySelector('input[type="button"]');

select.addEventListener("change", () => {
  alert("changed");
});

input.addEventListener("click", () => {
  select.value = 2;
  select.dispatchEvent(new Event("change"));
});

to select both elements with querySelector.

And then we listen for the change event on the select element with select.addEventListener.

Then we add a click event listener to the input button to set the select’s value when it’s clicked and trigger the change event on it with dispatchEvent.

Conclusion

To change select option and trigger events with JavaScript, we trigger the event manually.