Copy link to clipboard
Copied
I have 2 CFINPUT DateField on the form, one is Start ate and one is End Dated. Start Date is on top of End Date.
The Start Date Calendar goes behind End Date when users enter start date using Start Date control that users is unable to use calendar to enter date.
I would like to know how I can control that make Start Date Calendar in front of End Date Control while user enter information.
Your help and information is great appreciated,
regards,
Iccsi
http://jqueryui.com/datepicker/
On the page, there is a demo; and when you click on "view source" link at the bottom of the demo box, you will see the demo code.
On the right-hand side, there is a menu bar where you can see other variants of datepicker such as date format, date range, etc.
Copy link to clipboard
Copied
This may be a CSS issue? When I created a simple form displaying 2 cfinput fields with type datefield in CF10, the date-picker calendar control was displayed above the fields as expected:
<cfform action="date.cfm" method="post">
<label>Start Date:<br><cfinput type="datefield" name="start"></label><br><br>
<label>End Date:<br><cfinput type="datefield" name="end" label="End Date"></label>
</cfform>
Questions:
Copy link to clipboard
Copied
Thanks for your message and help,
I use CF10.
I did some test using differnet browser and machines, it is IE 8 issue.
Every machine and browser works, except IE 8.
Thanks again for helping,
Regards,
Iccsi
Copy link to clipboard
Copied
Hi. I was able to reproduce the same behavior you described in Internet Explorer 8, but only if I triggered compatibility mode in IE.
If it is possible for the page/site you are working on, I would recommend using a Document Type Definition (DTD) that triggers standards mode. For example, if I include the HTML5 doctype as the first line in the CFM file:
<!DOCTYPE html>
Then the page is rendered in standards mode and the datepicker overlays are rendered properly.
The HTML 4.01 strict doctype should also trigger standards mode:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
If you want to make the compatibility mode button disappear, so that users can't trigger it manually, you can include Microsoft's X-UA-Compatible header:
<cfheader name="X-UA-Compatible" value="IE=edge">
Normally you might see this ehader added via a meta tag, e.g.:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
However, if it is not part of the response header, it should be one of the first (if not the first) item after the opening head tag. Since cfform injects Javascript above any code you add to the head, the typical method won't work.
I hope that helps!
Copy link to clipboard
Copied
I put <!DOCTYPE html> on the first line of the cfm file, but it is still same that the upper date picker goes behind lower date picker.
I might need to check orther configuration,
Thanks again for helping,
Regards,
Iccsi,
Copy link to clipboard
Copied
You might want to use jQuery UI - date picker to substitute cfinput - datefield. It's more reliable and should be compatible to IE10.
Copy link to clipboard
Copied
Thanks for helping and informaiton,
Dreamweaver's JQuery controls are for mobile device.
Can you please advise the link to get JQuery control for date field?
Thanks again for helping,
Regards,
Iccsi
Copy link to clipboard
Copied
http://jqueryui.com/datepicker/
On the page, there is a demo; and when you click on "view source" link at the bottom of the demo box, you will see the demo code.
On the right-hand side, there is a menu bar where you can see other variants of datepicker such as date format, date range, etc.
Copy link to clipboard
Copied
Thanks a million for helping and information,
regards,
iccsi