Unable to allow date to be in dd/mmm/yyyy

Question

I would need to allow the date to be in this format: dd/mmm/yyyy from this code here. When I select the data from the datepicker, the value appear is in "dd MMM yyyy" format.

But if I typed in the date that I want manually, eg if I typed "02032014", it just read it as it is and won't change it to "02 MAR 2014."

Javascript:

function CompareDates(id) 
{
    var monName = new Array("Jan", "Feb", "Mar", "Apr", "May", "Jun",
        "Jul", "Aug", "Sept", "Oct", "Nov", "Dec");

    var d = new Date(id);
    var curr_date = d.getDate();
    var curr_month = d.getMonth(monName);
    var curr_year = d.getFullYear();

    return d.format(curr_date + " " + curr_month + " " + curr_year);
}

and my calendar tag:

<td>
    <p:calendar 
        value="#{pc_Rpt2202.asat_date}"
        id="rp2202_input_as_at" 
        styleClass="calendar" 
        maxlength="10"
        pattern="dd MMM yyyy"
        onchange="$(this).val(CompareDates($(this).val()))"
        onfocus="$(this).mask('99/99/9999');"
    >
        <p:watermark for="rp2202_input_as_at" value="dd/MMM/yyyy" />
        <f:convertDateTime pattern="dd MMM yyyy" />
    </p:calendar>
    </td> 

May I know how can I solve it by allowing the data validation to work?
Here's an example of what I want: http://www.flyscoot.com/index.php/en/?gclid=CLvPseXn_74CFQyTjgodz5sAEQ

After I typed in the date manually, it will auto change to dd MMMM yyyy format instead of selecting it from the datepicker.

Answer 1

You can use a regular expression in order to match your date string against it:

var dateReg = /^\d{2}[/s]+\d{2}[/s]+\d{4}$/

Then you can determine if your string matches the regular expression using:

yourStr.match(dateReg)

Answer 2

In order to validate a date string, you need to specify what the format is so that it can be parsed. You need to do that regardless of whether you write your own parser or use someone else's. Guessing the format is not a good idea as there are many ambiguous formats, and some that are ambiguous sometimes but not others.

In this case, if you want input as ddmmyyy (I'd suggest you use something like dd/mm/yyy), you can parse it, create a date object, then test the date against the input to check that it's valid, e.g.:

// Input format ddmmyyy
function parseDMY(s) {
    var d = s.substr(0,2);
    var m = s.substr(2,2)
    var y = s.substr(4);
    var date = new Date(y, --m, d);

    // Check that date is valid, return NaN if not
    return (date && date.getFullYear() == y && date.getDate() == d)? date : NaN;
}

However, if you use a format like d/m/y, then it's simpler:

// Input format d/m/yyyy, separator can be any non-digit character (-, /, space, etc.)
// d and m can be one or two digits (e.g. 5 or 05)
function parseDMY(s) {
  var b = s.split(/\D+/);
  var d = new Date(b[2], --b[1], b[0]);
  return (d && d.getFullYear() == y && d.getDate() == d)? d : NaN;
}

Note that the above will return NaN for two digit years, as say 1/1/05 will become 1/1/1905. However most date fields require 4 digit years so you should too.

You can specify the format using a screen tip. Don't just use a placeholder as that will disappear as soon as the user starts to type, so they no longer have a reference for the required format unless they remove their input, and those who use a browser that doesn't support placeholders will never see it.