JavaScript Date Format for ColdFusion Date Field

Question

Is it possible to add something to this function that will set up the date format and require the user to enter MM/DD/YYYY? MASK is not working..

Fee Calculator Function:

function getDatePrice() { 
      var datePrice = 0;
      var theForm = document.forms.form;      
      var purchasedate = theForm.elements.purchasedate; 
      var date = new Date(purchasedate.value);
      if (Object.prototype.toString.call(date) !== '[object Date]') {
        date = new Date();
      }
      var today = new Date();
      var diffMilli = today - date;
      var diffDays = Math.floor(diffMilli / 1000 / 60 / 60 / 24); // ..Divide!
      if (diffDays > 30) {
        datePrice = 20;
      }
      else {
        datePrice= 0;
      }
      return datePrice;
    }

Calling Function:

function calculateTotal()
{
    var titleFees = getDatePrice();
    var divobj = document.getElementById('totalPrice');
    divobj.style.display='block';
    divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;
}

Input Button: (Requiring ColdFusion):

<cfinput
       type="datefield"
       name="purchasedate"
       width="130"
       required="yes"
       message="Please enter purchase date."
       value="#dateformat(now(),"mm/dd/yyyy")#" 
       oninput="calculateTotal();"
       >

Answer 1

I am going to go ahead and add an answer here since another question has been opened regarding the same issue. I believe the problem is that the mask attribute on the <cfinput type="datefield" ... code only works when using Flash forms - documentation reference.

I have emphasized the text from that documentation below:

Masking cfcalendar and datefield input

In the cfcalendar tag and the Flash format datefield input control, you use the following masks to determine the format of the output. You can use uppercase or lowercase characters in the mask:

...

The following pattern specifies that the Flash form sends the date selected using a datefield input control to ColdFusion as text in the format 04/29/2004:

<cfinput name="startDate" type="datefield" label="date:" mask="mm/dd/yyyy"/>

Since you are not using a Flash form the mask is not working for you. You could try switching to a regular <cfinput type="text" ... input and change your mask to something like "99/99/9999". That would give you the correct format but the user could still enter invalid dates so you would need additional code to catch that.

In the comments you stated:

What is strange is that I have others that actually work like.. <cfinput type="text" name="odate" id="odate" validateat="onSubmit" validate="noblanks" required="yes" message="Please enter odometer date." value="" mask="99/99/9999" placeholder="08/05/2014"> but for some reason it is just the datefield that will not except the MASK

Notice that you are using a "text" input here so the mask works (as in my previous comment). It is only with the "datefield" type that the mask does not work; unless you are using a Flash form.

This is just another example of why using the built-in ColdFusion UI tags is not a good idea. They work for very simple examples but when you need more customization they fail you. You would be better off to use a JavaScript library (like jQuery) for client side validation. Adobe's own Ben Forta acknowledged this several years ago. And the ColdFusion-UI-the-Right-Way project was started because of this as well.

EDIT

Adam pointed out another reference in the ColdFusion documentation that reinforces my point. I have emphasized the text from that documentation below:

Masking input data

In HTML and Flash forms, the mask attribute controls the format of data that can be entered into a text field or that is selected in a datefield input control calendar. In HTML format, it does not prevent users from typing a date that does not follow the mask into a datefield input control. You can combine masking and validation on a field.