JavaScript date format for ColdFusion date field
Is it possible to add something to this function that will set the date format and require the user to enter MM / DD / YYYY? The MASK does not work.
Payment 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;
}
Call function:
function calculateTotal()
{
var titleFees = getDatePrice();
var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Estimated Transfer Fees $"+titleFees;
}
Enter Button: (Requires ColdFusion):
<cfinput
type="datefield"
name="purchasedate"
width="130"
required="yes"
message="Please enter purchase date."
value="#dateformat(now(),"mm/dd/yyyy")#"
oninput="calculateTotal();"
>
I'm going to go ahead and add an answer here since another question was opened on the same issue. I believe the problem is that the attribute mask
in the code <cfinput type="datefield" ...
only works when using Flash forms - link to documentation .
I have selected text from the following documentation:
Masking cfcalendar and date input
In the cfcalendar tag and in the Flash format input element, use the following masks to define the output format. You can use upper or lower case characters in the mask:
...
The following template specifies that the Flash form submits the date selected by the date input element to ColdFusion as text in 04/29/2004 format:
<cfinput name="startDate" type="datefield" label="date:" mask="mm/dd/yyyy"/>
Since you are not using a flash shape, the mask does not work for you. You can try switching to normal input <cfinput type="text" ...
and changing the mask to something like "99/99/9999"
. This will give you the correct format, but the user can still enter invalid dates, so you'll need some extra code to catch this.
In the comments you posted:
It's weird 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 this is only a date field that will not be other than MASK
Note that input is used here "text"
, so the mask works (as in my previous comment). Only with type the "datefield"
mask does not work; unless you are using flash form.
This is another example of why using built-in ColdFusion tags is not a good idea. They work for very simple examples, but when you need more customization, they won't let you down. You would be better off using a JavaScript library (like jQuery) for client side validation. Adobe Ben Forta recognized this a few years ago . Because of this, the ColdFusion-UI-Right-Way project was also launched .
EDIT
Adam pointed out another link in the ColdFusion documentation that confirms my point. I underlined the text from this documentation below:
Input masking
In HTML and Flash formats, the mask attribute controls the format of the data that can be entered into a text box or selected in a date-entry control calendar. In HTML, it does not prevent users from entering a date that does not follow the mask into a date input control. You can combine masking and field validation.
source to share