RSS

  • YouTube
  • LinkedIn
  • Google

Archives for : jQuery

Using jQueryMask Plugin to format dates in different patterns

jQuery Mask Plugin is a great Javascript library to format fields for presentation and/or to force a properly input by users.

Here, I show how to deal with input or another HTML element to display dates when the source date has a different format from target element.

Example:

  • We have a datetime with Year-Month-Day Hour:Minute:Seconds and need to show only the Year/Month/Day part.
  • We have da date in Year-Month-Day and need to format to Day/Month/Year.

jQueryMask is very simple to use. It do not need to much to mask whatever you need. Take a look at examples on his website.

If you need to format a simple date field (even in a non-input element), just use the code below.

The code above can mask and pre-validate dates in YEAR/MONTH/DAY format.

With an input like

would be changed his value to 2018/06/11.

If you try to type another date (after clear, of course) you cannot begin with a number different from 1 or 2. This reason is that our mask have a translation to be done when allowing chars. If the pattern does not match, the char is erased.

The meaning of “TC99/M9/D9” mask is:

  • Must begin with 1 or 2 (Translation T: /[12]/ – Custom format)
  • Must have number 0 or 9 (Translation C: /[09]/ – Custom format)
  • Must have a number (any) (Translation 9 – MaskPlugin Core format)
  • Must have a number (any) (Translation 9 – MaskPlugin Core format)
  • A slash will be added automatic ( / )
  • Must have number 0 or 1 (Translation M: /[01]/ – Custom format)
  • Must have a number (any) (Translation 9: MaskPlugin Core format)
  • A slash will be added automatic ( / )
  • Must have number 0, 1, 2 or 3 (Translation D: /[0-3]/ – Custom format)
  • Must have a number (any) (Translation 9: MaskPlugin Core format)

Of course, there is no real validation. You can type “2999/19/39” and this is not a valid date, but is almost done.

So, to format in another way, just change mask parameter order.

But, if the source date is in a different pattern, like MONTH/DAY/YEAR, the mask do not work. The date output for “06/11/2018 15:40” will be weird “1018/15/0“.

To handle different date formats will be needed more than simple mask. We will need a function.

Look the code below

Now we have two more Translation Pattern (h and m). h means that the n-index position must have numbers 0, 1 or 2 and m numbers between 0 and 5. Keep in mind that CASE matters.

With the above code, we can format and show date in several ways. just change .test() and .replace() pattern to fill your desired pattern.

This is the code that I am using to format Database datetime fields with YEAR-MONTH-DAY HOUR:MINUTE:SECOND in html elements with DAY/YEAR/MONTH HOUR:MINUTE

With an input like

Output will be 11/06/2018 15:40

Hope this help you!

jQuery.html() doesn't work in Internet Explorer

I recently had problems with a javascript code that uses jQuery and it worked in several browsers i.e. Chrome, o Firefox and some versions of Internet Explorer, but that stubbornly refused to work in Internet Explorer 7 and 8.
Here is the code:

After some tests I realized that wasn't a problem in the method, as in other codes it behaved as expected.
So debugging code thoroughly and the answers of the Ajax method realized a small syntax error in HTML and was just correct it and IE 7 displayed correctly the answer.
Then follows the big tip, If you have problems with the method jQuery.html(), check first of all whether the content being written in the element is an html code without errors, because the validation in IE 7/8 will not allow write HTML with errors, no matter how small it is.