CF 2016 cfinput datefield type not working

[bendur]

We are starting to move our site over to ColdFusion 2016, and I noticed that the cfinput datefield type is broken.

When the page loads it tries to reference YUI javascript assets that are apparently now deprecated and no longer come with ColdFusion.

I don't see anything in the documentation about the datefield type being deprecated, so I'm not sure if the documentation is incorrect or if there's something wrong.

[WolfShade]

I hate to say it, but I would advise against using CFFORM or any of the related CF elements.  Mostly because it uses an outdated Ext.js implementation (as you have suggested in your post.)  But also because I do not know any serious CF developers who use it.  It had some appeal, once, a long time ago; and there are some who swear by the data-binding capability.  But you are much better off to use a standard FORM and write your own processes for the data-binding.  You'll have much better and more granular control.

And, if you're using CFFORM for creating FLASH forms.. STOP IT!  Seriously.  Stop it. 

I don't want to sound condescending, but the smart thing to do would be to go through all your code and replace the CFFORM with HTML5 FORM and elements.  Use the most recent jQuery or MooTools for DOM display and manipulation; manually create all your data-binding; do it right, not lazy.

CFinputs are not the only thing that CF is utilizing out-of-date plugins.  The Solr collections are, I believe, also way behind in versions.

Unfortunately, I have not done any work with CF2016.  I've looked at the documentation for it, and I see many posts regarding things that worked in previous versions of CF that don't work in CF2016, and I've decided that CF11 will (for the time being) probably be my last CF version.  I will probably switch to Lucee, in the future.

HTH,

^_^

[bendur]

We're definitely not using flash anywhere, I think the only reason we use cfform is for the date picker, which we can easily replace, but it's just yet another thing that is breaking when updating and Adobe has extremely poor documentation.

[WolfShade]

bendur  wrote

.. but it's just yet another thing that is breaking when updating and Adobe has extremely poor documentation.

Yep.  I completely agree.

V/r,

^_^

[BKBK]

I am on Windows 7 and ColdFusion 2016, and the following code works as expected:

<cfform>

    <cfinput name="testDate" type="datefield">

</cfform>

[bendur]

BKBK​ It's not trying to pull in YUI scripts? What version of ColdFusion 2016 are you running?

I spent a few hours last night converting all of our datefields to use Pikaday which I think I like better anyway.

[BKBK]

bendur  wrote

What version of ColdFusion 2016 are you running?

The latest build: 2016.0.03.300232

  It's not trying to pull in YUI scripts?

Given the above code, ColdFusion generated the following script:

<script type="text/javascript">

/* <![CDATA[ */_cf_loadingtexthtml="<img alt=' ' src='/cf_scripts/scripts/ajax/resources/cf/images/loading.gif'/>";

_cf_contextpath="";

_cf_ajaxscriptsrc="/cf_scripts/scripts/ajax";

_cf_jsonprefix='//';

_cf_websocket_port=1225;

_cf_flash_policy_port=1243;

_cf_clientid='F75CDB803D309740AB83532CE5397C2F';/* ]]> */

</script>

<script type="text/javascript" src="/cf_scripts/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js"></script>

<script type="text/javascript" src="/cf_scripts/scripts/ajax/messages/cfmessage.js"></script>

<script type="text/javascript" src="/cf_scripts/scripts/ajax/package/cfajax.js"></script>

<script type="text/javascript" src="/cf_scripts/scripts/ajax/package/cfcalendar.js"></script>

<script type="text/javascript" src="/cf_scripts/scripts/ajax/ext/ext-all.js"></script>

<script type="text/javascript" src="/cf_scripts/scripts/ajax/yui/animation/animation-min.js"></script>

<script type="text/javascript" src="/cf_scripts/scripts/ajax/yui/calendar/calendar-min.js"></script>

<link rel="stylesheet" type="text/css" href="/cf_scripts/scripts/ajax/resources/yui/yui.css" />

<link rel="stylesheet" type="text/css" href="/cf_scripts/scripts/ajax/resources/cf/cf.css" />

<script type="text/javascript" src="/cf_scripts/scripts/cfform.js"></script>

<script type="text/javascript" src="/cf_scripts/scripts/masks.js"></script>

<script type="text/javascript">

/* <![CDATA[ */

    ColdFusion.Ajax.importTag('CFINPUT-DATEFIELD');

/* ]]> */</script>

        <script type="text/javascript">/* <![CDATA[ */

            var _cf_DATEFIELD_init_117831697934539=function()

            {

                ColdFusion.Calendar.setUpCalendar("testDate", "MM/DD/YYYY", 0, ["S","M","T","W","T","F","S"], ["January","February","March","April","May","June","July","August","September","October","November","December"], 'CFForm_1', null);

            };ColdFusion.Event.registerOnLoad(_cf_DATEFIELD_init_117831697934539);

        /* ]]> */

</script>

<script type="text/javascript">

<!--

    _CF_checkCFForm_1 = function(_CF_this)

    {

        //reset on submit

        _CF_error_exists = false;

        _CF_error_messages = new Array();

        _CF_error_fields = new Object();

        _CF_FirstErrorField = null;

        //display error messages and return success

        if( _CF_error_exists )

        {

            if( _CF_error_messages.length > 0 )

            {

                // show alert() message

                _CF_onErrorAlert(_CF_error_messages);

                // set focus to first form error, if the field supports js focus().

                if( _CF_this[_CF_FirstErrorField].type == "text" )

                { _CF_this[_CF_FirstErrorField].focus(); }

            }

            return false;

        }else {

            return true;

        }

    }

//-->

</script>

<form name="CFForm_1" id="CFForm_1" action="&#x2f;workspace&#x2f;CF_Project&#x2f;testing.cfm" method="post" onsubmit="return _CF_checkCFForm_1(this)"><div  style="position:relative;float:left;">

    <div  style="float:left;">

        <input name="testDate" id="testDate"  type="datefield" class="datefieldinput"  />

    </div><div  id="testDateCFForm_1_cf_buttondiv" style="float:left;padding:3px;">

        <img id="testDateCFForm_1_cf_button" src="/cf_scripts/scripts/ajax/resources/cf/images/DateChooser.png" alt='Date Picker' />

    </div><div  id="testDateCFForm_1_cf_container" style="display:none; position:absolute; font-size:12px;overflow:visible;float:left;z-index:9050;top:1.5em;">

    </div>

</div>

</form>

I spent a few hours last night converting all of our datefields to use Pikaday which I think I like better anyway.

Then stay with Pikaday.

[bendur]

Thanks. From what you pasted it's pulling in YUI scripts, which are now deprecated and don't come with the new ColdFusion 2016 installer, hence my issue.

ColdFusion Help | Deprecated Features

ColdFusion 2016 installer refreshed. » Adobe ColdFusion Blog

It seems we could add YUI back in but it would be really nice and would have saved a lot of headache if Adobe had that specific tag documented under cfform docs and/or in the deprecated features section.

[ajalaidowu10]

The cfinput datefield is working perfectly. The only reason it not displaying in UI is because of ext-all.css. you need to overwrite it  with this css for it to display.

.x-border-box, .x-border-box * {

    box-sizing: border-box!important;

    -moz-box-sizing: border-box!important;

    -ms-box-sizing: border-box!important;

    -webkit-box-sizing: border-box!important;

}