Category: JavaScript

Categories
JavaScript Answers

How to parse a “dd/mm/yyyy” or “dd-mm-yyyy” or “dd-mmm-yyyy” formatted date string using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to parse a "dd/mm/yyyy" or "dd-mm-yyyy" or "dd-mmm-yyyy" formatted date string using JavaScript.

In this article, we’ll look at how to parse a "dd/mm/yyyy" or "dd-mm-yyyy" or "dd-mmm-yyyy" formatted date string using JavaScript.

How to parse a "dd/mm/yyyy" or "dd-mm-yyyy" or "dd-mmm-yyyy" formatted date string using JavaScript?

To parse a "dd/mm/yyyy" or "dd-mm-yyyy" or "dd-mmm-yyyy" formatted date string using JavaScript, we use moment.js.

For instance, we write

const day = moment("12-25-1995", "MM-DD-YYYY");

to call moment with the date string we want to parse and a string with the format of the date string being parsed.

MM stands for the 2 digit month.

DD stands for the 2 digit day.

And YYYY stands for the 4 digit year.

Conclusion

To parse a "dd/mm/yyyy" or "dd-mm-yyyy" or "dd-mmm-yyyy" formatted date string using JavaScript, we use moment.js.

Categories
JavaScript Answers

How to check confirm password field in form without reloading page with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to check confirm password field in form without reloading page with JavaScript.

In this article, we’ll look at how to check confirm password field in form without reloading page with JavaScript.

How to check confirm password field in form without reloading page with JavaScript?

To check confirm password field in form without reloading page with JavaScript, we can check the input values.

For instance, we write

<label
  >password :
  <input name="password" id="password" type="password" />
</label>
<br />
<label
  >confirm password:
  <input type="password" name="confirm_password" id="confirm_password" />
  <span id="message"></span>
</label>

to add the password inputs.

Then we write

const check = () => {
  if (
    document.getElementById("password").value ===
    document.getElementById("confirm_password").value
  ) {
    document.getElementById("message").style.color = "green";
    document.getElementById("message").innerHTML = "matching";
  } else {
    document.getElementById("message").style.color = "red";
    document.getElementById("message").innerHTML = "not matching";
  }
};

const passwordInput = document.querySelector("#password");
const confirmPasswordInput = document.querySelector("#confirm_password");
passwordInput.onkeyup = check;
passwordInput.confirmPasswordInput = check;

to define the check function.

In it, we select the inputs with getElementById.

Then we get the value from each input with the value property.

And then we set the color and text content of the span according to whether the 2 values match or not.

Then we select the inputs and set their onkeyup property to the check function to call check as we type into the inputs.

Conclusion

To check confirm password field in form without reloading page with JavaScript, we can check the input values.

Categories
React Answers

How to allow input type=file to select the same file in a React component?

Labrador retriever puppy walking on green grass

Sometimes, we want to allow input type=file to select the same file in a React component.

In this article, we’ll look at how to allow input type=file to select the same file in a React component.

How to allow input type=file to select the same file in a React component?

To allow input type=file to select the same file in a React component, we set the file selection to null after we click on the file input button.

For instance, we write

const Comp = () => {
  //...

  return (
    <input
      id="upload"
      ref="upload"
      type="file"
      accept="image/*"
      onInput={(event) => {
        readFile(event);
      }}
      onClick={(event) => {
        event.target.value = null;
      }}
    />
  );
};

to add a file input.

We set the onInput prop to a function that calls readFile to get the file.

And we set the onClick prop to a function that sets event.target.value to null so we can select the same file again.

Conclusion

To allow input type=file to select the same file in a React component, we set the file selection to null after we click on the file input button.

Categories
React Answers

How to add a br tag in React between two strings?

Labrador retriever puppy walking on green grass

Sometimes, we want to add a br tag in React between two strings.

In this article, we’ll look at how to add a br tag in React between two strings.

How to add a br tag in React between two strings?

To add a br tag in React between two strings, we can use the white-space CSS property.

For instance, we write

const Comp = () => {
  const message = `No results. \n Please try another search term.`;
  return <div className="new-line">{message}</div>;
};

to add the \n new line characters into the message string.

Then we make them render with

.new-line {
  white-space: pre-line;
}

in our CSS file.

Conclusion

To add a br tag in React between two strings, we can use the white-space CSS property.

Categories
JavaScript Answers

How to check if string contains Latin characters only with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to check if string contains Latin characters only with JavaScript.

In this article, we’ll look at how to check if string contains Latin characters only with JavaScript.

How to check if string contains Latin characters only with JavaScript?

To check if string contains Latin characters only with JavaScript, we use a regex.

For instance, we write

if (str.match(/[a-z]/i)) {
  // ...
}

to check if string str has only a to z in a case insensitive manner.

We call match to find any matches with this pattern.

Conclusion

To check if string contains Latin characters only with JavaScript, we use a regex.