8 Replies Latest reply on Jun 10, 2013 5:00 PM by iccsi

    CFINPUT DateField

    iccsi Level 1

      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,





        • 1. Re: CFINPUT DateField
          cherdt Level 1

          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>




          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?
          • 2. Re: CFINPUT DateField
            iccsi Level 1

            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,





            • 3. Re: CFINPUT DateField
              cherdt Level 1

              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!

              • 4. Re: CFINPUT DateField
                iccsi Level 1

                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,





                • 5. Re: CFINPUT DateField
                  p.sim Level 3

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

                  • 6. Re: CFINPUT DateField
                    iccsi Level 1

                    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,





                    • 7. Re: CFINPUT DateField
                      p.sim Level 3



                      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.

                      • 8. Re: CFINPUT DateField
                        iccsi Level 1

                        Thanks a million for helping and information,