How to format the date in the Alert Box?

[hotelsinger]

Hi Folks,

I'm brand spankin' new to developing but was assigned a web app to develop in ASP.NET 4 with C#.

I am using JavaScript for validation. The problem I'm having is that the date validation alert box that pops up displays a lot of unneccesary time and timezone information, making it hard for the enduser to read.

How can I format the alert message (which is based on variables) to be more readable?

What I want: Date must be between Sun Sep 30 and Sat Oct 13
INSTEAD of THIS: Date must be between Sun Sep 30 00:00:00 PDT 2012 and Sat Oct 13 00:00:00 PDT 2012

Below is my code which falls within the $("form").validate(); code block...

//Date logic for Pay Period Ending/WorkDate triggered by the .datepickerCompleted function.
// selectedPPE is a DateTime variable which holds a date value chosen by the user from a dropbox control.

// Event: .datepicker completes. Create new Date variables:

$('.datepickerCompleted').change(function () {
        var endDate = new Date('<%=selectedPPE%>'); 
        var startDate = new Date('<%=selectedPPE%>');

// subtract 13 days to get beginning of payroll period:

    startDate.setDate(startDate.getDate() - 13);  

    var enteredDate = $('.hasDatepicker').val();

// Compare user input to make sure the enteredDate is between startDate and endDate:

    if ((Date.parse(enteredDate) >= Date.parse(startDate) && Date.parse(enteredDate) <= Date.parse(endDate)) == false)

        alert("Date must be between " + startDate + " and " + endDate);

    else {

    alert("Date within range");

    }
});

[stbuchok]

Have a read

http://www.w3schools.com/jsref/jsref_obj_date.asp

[hotelsinger]

@stbuchock: The link is informative, but did not help me. Fortunately, my problem is now solved. For anybody who might encounter something similar in the future, here's the code that formats the date in the alert using variables, and it works!:

// Date logic for PPE/WorkDate validation, triggered by the datepickerCompleted function

    $('.datepickerCompleted').change(function () {
        var endDate = new Date('<%=selectedPPE%>');
        var startDate = new Date('<%=selectedPPE%>');

// subtract 13 days give you start of payroll period

        startDate.setDate(startDate.getDate() - 13);  

        var enteredDate = $('.hasDatepicker').val();

// Compare to make sure the enteredDate is between startDate and endDate

        if ((Date.parse(enteredDate) >= Date.parse(startDate) && Date.parse(enteredDate) <= Date.parse(endDate)) == false) 

          {
// New code below: create 3 variables for both startDate and endDate
// Each new variable grabs a necessary portion of the date for display later

   // Format startDate
            var s_date = startDate.getDate();
            var s_month = startDate.getMonth() + 1; //Months are zero based
            var s_year = startDate.getYear();

   // Format endDate

            var e_date = endDate.getDate();
            var e_month = endDate.getMonth();
            var e_year = endDate.getYear();

// Alert: All 6 new variables displaying the message in a much more user friendly way            

            alert("Date must be between " + s_month + "-" + s_date + "-" + s_year + " and " + e_month + "-" + e_date + "-" + e_year);

          }

    // Date logic for PPE/WorkDate validation, triggered by the datepickerCompleted function

        $('.datepickerCompleted').change(function () {
            var endDate = new Date('<%=selectedPPE%>');
            var startDate = new Date('<%=selectedPPE%>');

    // subtract 13 days give you start of payroll period

            startDate.setDate(startDate.getDate() - 13);  

            var enteredDate = $('.hasDatepicker').val();

    // Compare to make sure the enteredDate is between startDate and endDate

            if ((Date.parse(enteredDate) >= Date.parse(startDate) && Date.parse(enteredDate) <= Date.parse(endDate)) == false) 

              {
    // New code below: create 3 variables for both startDate and endDate
    // Each new variable grabs a necessary portion of the date for display later

       // Format startDate
                var s_date = startDate.getDate();
                var s_month = startDate.getMonth() + 1; //Months are zero based
                var s_year = startDate.getYear();

       // Format endDate

                var e_date = endDate.getDate();
                var e_month = endDate.getMonth();
                var e_year = endDate.getYear();

    // Alert: All 6 new variables displaying the message in a much more user friendly way            

                alert("Date must be between " + s_month + "-" + s_date + "-" + s_year + " and " + e_month + "-" + e_date + "-" + e_year);

              }

[JorgeM]

@hotelsinger- thanks for providing the update. I am saving this for a future need...

[hotelsinger]

PLEASE NOTE: In the solution below, I mistakenly put the code in twice

@JorgeM, Cool. You're welcome!