cfdiv jquery datepicker

I have a main page that has a cfdiv that is bound to some filter inputs on the main page.

<input name="SelectDate" type="text" class="datestuff">

<cfdiv bind="url:divPages.cfm?SelectDate={SelectDate}" id="pageDiv" bindonload="true" />

Open in new window


The datepicker stuff works fine but the bind to the input element doesn't work.  I've tried @blur and @mouseout but the timing is off.  If I don't use datepicker, the bind works fine, but datepicker is the default for the site.  

The datepicker code is;
function initDateStuff() {
			$(function() {
				$('input.datestuff').datepicker({
					dateFormat: 'yy/mm/dd'
				});
			});
		}

Open in new window


And at the bottom of the cfdiv page I have;
<cfset ajaxOnLoad("initDateStuff")>

Open in new window

lantervAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
you forgot the brackets...

setTimeout(function() {
    $('input.datestuff').datepicker ({dateFormat: 'yy/mm/dd'});
}, 500)

Open in new window

0
 
leakim971PluritechnicianCommented:
be sure to bind BEFORE setting the datepicker :
$('input.datestuff').on("click", function() { alert("first!"); });
$('input.datestuff').datepicker({....

Open in new window


and not :
$('input.datestuff').datepicker({...
$('input.datestuff').on("click", function() { alert("first!"); });

Open in new window

0
 
lantervAuthor Commented:
I don't understand.  Where did " on.click" come from?  The datepicker doesn't work unless it's in the head.  Besides, CF generates the code for the bind and puts it where ever it wants.
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
leakim971PluritechnicianCommented:
OK so use a setTimeout to create your datepicker,
setTimeout(function() {
    $("input.datestuff").datepicker (...
}, 500); // 500ms before creating it
0
 
lantervAuthor Commented:
setTimeout(function() {
    $('input.datestuff').datepicker (dateFormat: 'yy/mm/dd');
}, 500)

Open in new window


Give me a syntax error:

SyntaxError: missing ) after argument list
0
 
lantervAuthor Commented:
That made the datepicker work.  But the cfdiv bind to the datefield doesn't work.
0
 
lantervAuthor Commented:
Using cfinput type="datefield" or input type="date" doesn't work either.
0
 
leakim971PluritechnicianCommented:
did you try mousedown instead mouseout?
0
 
lantervAuthor Commented:
Yes I did. Doesn't work.
0
 
leakim971PluritechnicianCommented:
time to share a link to your website, a simple onclick work fine : http://jsfiddle.net/w4jmbgqm/1/
0
 
lantervAuthor Commented:
It's an internal admin site.  Not public.  Sorry.  I'll see what I can do about creating it on a public site.
0
 
lantervAuthor Commented:
Thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.