• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

CFINPUT DateField

Engaged ,
Jun 03, 2013 Jun 03, 2013

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

Views

4.2K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Engaged , Jun 06, 2013 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.

Votes

Translate

Translate
Participant ,
Jun 04, 2013 Jun 04, 2013

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:

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 04, 2013 Jun 04, 2013

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Participant ,
Jun 05, 2013 Jun 05, 2013

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!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 05, 2013 Jun 05, 2013

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,

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 05, 2013 Jun 05, 2013

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 06, 2013 Jun 06, 2013

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 06, 2013 Jun 06, 2013

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Engaged ,
Jun 10, 2013 Jun 10, 2013

Copy link to clipboard

Copied

LATEST

Thanks a million for helping and information,

regards,

iccsi

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
Documentation