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

StackOverflow https://stackoverflow.com/questions/23649042

  •  22-07-2023
  •  | 
  •  

Вопрос

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.

Это было полезно?

Решение

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>
Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top