Converting user's input of dd/mm/yyyy to output dd/MMM/yyyy without submitting form or reloading page in javascript

Question

I am extremely new at javascript and I am tasked to edit a piece of code to convert dd/mm/yyyy from user's input, to dd/MMM/yyyy

<p:calendar

id="testDate" 
styleClass="calendar"
maxlength="10"
pattern="dd/MMM/yyyy"
onfocus="$(this).mask('99/99/9999');">

</p:calendar>`

I have already changed the datepicker part (when user picks a date from the datepicker, it will appear as '12/Jan/2013' instead of '12/01/2013') and now i need the fix the manual input part.

So when user inputs '12/12/2012' and user clicks away from that field, the date will be automatically converted to '12/Dec/2012' without reloading of page or submission of form.

I understand that there is a method called 'onblur' but it only returns the date of the day itself and not the date i input. Also, it will be activated even when i click on a date from my datepicker.

The only pages i am given to work on is a xhtml page, a managed bean and a javascript.

*note: javascript and java are two completly different languages — kai, May 14 '14 at 08:16
oh thank you for pointing that out!!! i am extremely weak at coding but my internship requires me to have coding knowledge so i'm learning as i'm working :'( — Carinenxe, May 14 '14 at 08:28

score 0 · Accepted Answer · edited May 23 '17 at 11:50

0

You will need to change the date format through javascript. No need to go to the server.

Do you know how to invoke javascript function? If yes, please refer to this link

Try the answer with the following code from @maerics

function convertDate(inputFormat) {
  function pad(s) { return (s < 10) ? '0' + s : s; }
  var d = new Date(inputFormat);
  return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/');
}

======================= EDIT======================================== Try this

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">

<h:head>
<script  type="text/javascript">
function CompareDates( id)
{
    var weekday = new Array(7);
     weekday[0]=  "Sunday";
     weekday[1] = "Monday";
     weekday[2] = "Tuesday";
     weekday[3] = "Wednesday";
     weekday[4] = "Thursday";
     weekday[5] = "Friday";
     weekday[6] = "Saturday";

     var months = new Array(12);
     months[0]=  "JAN";
     months[1] = "FEB";
     months[2] = "MAR";
     months[3] = "APR";
     months[4] = "MAY";
     months[5] = "JUN";
     months[6] = "JUL";
     months[0]=  "AUG";
     months[1] = "SEP";
     months[2] = "OCT";
     months[3] = "NOV";
     months[4] = "DEC";

    var d = new Date(id);
    var retVal =weekday[d.getDay()]+' '+ d.getDate()+' '+ months[d.getDate()]+','+d.getFullYear()
    return retVal;     }

</script>
</h:head>
<h:body>
    <h1>Hello World PrimeFaces</h1>

    <h:form>
        <p:calendar id="testDate" styleClass="calendar" maxlength="10"
            pattern="EEE, dd MMM, yyyy" onfocus="$(this).mask('99/99/9999');"
                onchange="$(this).val(CompareDates($(this).val()))"
            >
        </p:calendar>

<Br/>
                <p:calendar id="testDate1" styleClass="calendar" maxlength="10"
            pattern="EEE, dd MMM, yyyy" onfocus="$(this).mask('99/99/9999');"

            >
        </p:calendar>
    </h:form>

</h:body>
</html>

edited May 23 '17 at 11:50

Community

1
1

answered May 14 '14 at 08:18

Hirak

3,601
1
22
33

Hi Hirak! Please don't laugh at me but uhm is it this way....? – Carinenxe May 14 '14 at 08:34
IMHO the portion will be in the head section of you html (outside P:calendar). I cannot test it but hopefully that should work. – Hirak May 14 '14 at 08:41
it does not.... the error message says "Error 500: javax.servlet.ServletException: Error Parsing /viewMetadata/test.xhtml: Error Traced[line: 30] The content of elements must consist of well-formed character data or markup." :"( – Carinenxe May 14 '14 at 08:47
What is your P:calendar ? What taglib is this? – Hirak May 14 '14 at 08:51
how i can identify what taglib is it...? please do bear with me because i am extremely new to coding. – Carinenxe May 14 '14 at 08:59
What is your requirement exactly? Can you give some background of the current task that you are stuck with? Maybe that will help – Hirak May 14 '14 at 09:05
uhm is it possible if we could communicate via email? – Carinenxe May 14 '14 at 09:06
Everything depends on how big the task is... considering we are in this forum just to help others, in parallel to our regular jobs; I might not be able to help with a complete project :( – Hirak May 14 '14 at 09:10
oh sorry, because the page is reminding me to avoid extended discussions. Okay so i'm tasked to convert the format of the user's input from dd/mm/yyyy to dd/MMM/yyyy without the user having to reload the page or submit the form. simply said, the user will input a date such as '12/12/2013' and as soon as the user's cursor is at another field or outside the field, the date will become '12/Dec/2013' – Carinenxe May 14 '14 at 09:14
i have tried the 'onblur' method, but it did not convert whatever i input into datestring and instead only today's date (or the date or whichever day i tried). – Carinenxe May 14 '14 at 09:19
Hi @Carinenxe let me solve your problem today.... can I move this conversation to chat? Also, before you do that, can you replace the "pattern" attribute of your p:calendar with this pattern="dd/MM/yyyy" – Hirak May 15 '14 at 04:43
yes certainly! if i change it to "dd/MM/yyyy", the date displayed from the datepicker would become '12/12/2012' and i need the month to be in the month name. does that affect much? @Hirak – Carinenxe May 15 '14 at 06:19
You want full month name? – Hirak May 15 '14 at 06:25
the function that i require is something similar to date fields from http://www.flyscoot.com/index.php/en/?gclid=CJrt7Mmnrb4CFVUnjgodipIA3A – Carinenxe May 15 '14 at 06:34
Can you check with pattern="EEE, dd MMM, yyyy" ? – Hirak May 15 '14 at 06:35
oh except for the day. In their website, even if you manually enter '12122014' and then click outside of the field, the date would automatically be converted to 'EEE, dd MMM, yyyy' and that's what i need. – Carinenxe May 15 '14 at 06:37
Oh! I get you.. I will give it a try and let you know if I find anything. – Hirak May 15 '14 at 06:52
I have edited my answer and put a xhtml. Please try that and let me know if that solves your purpose. – Hirak May 15 '14 at 08:15
IT DOES!!!!!!!!!!!!! I AM SO THANKFUL!!!! Thank you SO much Hirak!! However, i have some questions: why 'onchange' and not 'onblur'? – Carinenxe May 15 '14 at 08:56
onblur didn't work for me first... so I tried onchange. call it a professional guess :) glad it helped. – Hirak May 15 '14 at 08:59
I have another problem, now, when i go back to the field, instead of the date being highlighted, the field goes blank. may i know what could be the cause of this? – Carinenxe May 15 '14 at 09:13
Maybe change the onfocus to onfocus="$(this).val();" – Hirak May 15 '14 at 09:25
that removes the slashes and causes 'onchange' to not work. is it possible if i used something like 'onclick'? – Carinenxe May 15 '14 at 09:31

Converting user's input of dd/mm/yyyy to output dd/MMM/yyyy without submitting form or reloading page in javascript

1 Answers1