CFINPUT DateField

Report · Jun 03, 2013

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

Report · Jun 04, 2013

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:

<label>Start Date:<br><cfinput type="datefield" name="start"></label><br><br>

</cfform>

Questions:

What version of ColdFusion are you running?
In which browsers are you seeing the undesired behavior?
Can you provide sample code so that we can reproduce the problem?

Report · Jun 04, 2013

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

Report · Jun 05, 2013

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:

Normally you might see this ehader added via a meta tag, e.g.:

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!

Report · Jun 05, 2013

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,

Report · Jun 05, 2013

You might want to use jQuery UI - date picker to substitute cfinput - datefield. It's more reliable and should be compatible to IE10.

Report · Jun 06, 2013

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

Report · Jun 06, 2013

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.

Report · Jun 10, 2013

Thanks a million for helping and information,

regards,

iccsi

CFINPUT DateField

1 Correct answer