{"id":326,"date":"2010-08-06T15:16:53","date_gmt":"2010-08-06T19:16:53","guid":{"rendered":"http:\/\/erics-test-lab.com\/?p=326"},"modified":"2010-08-06T15:16:53","modified_gmt":"2010-08-06T19:16:53","slug":"jquery-datepicker-plugin","status":"publish","type":"post","link":"https:\/\/www.esearing.com\/v2010\/2010\/08\/jquery-datepicker-plugin\/","title":{"rendered":"JQuery DatePicker Plugin"},"content":{"rendered":"<p>I had the need for a calendar datepicker in a recent project and could not use Coldfusion&#8217;s input datefield. I am building the form on the fly and loading form elements from a database using a CFC and a bunch of convoluted logic.<br \/>\nSo the cfcalendar.js would not work with my form. I think because the Form Element does not exist in the DOM just yet.<\/p>\n<p>I turned to a couple of Jquery tools and found <a href=\"http:\/\/keith-wood.name\/datepick.html\">this one<\/a> to be the best. Thanks to its author, Keith Wood.<\/p>\n<p>I still had the issue that when I loaded the date field to the form the Javascript would not recognize it in the Dom until someone either clicked it or another action set its focus. Even then the script is sometimes slow to load the calendar app.<\/p>\n<p>I did have to modify the date field  and the javascript a little to make it work. It is here should anyone else run into this issue.<\/p>\n<p><code><br \/>\n<strong>HTML element in the database<\/strong><br \/>\n&lt;label&gt:Submit Date&lt;\/label&gt:<br \/>\n&lt;input type=\u201dtext\u201d name=\u201dsubmit_date\u201d id=\u201dsubmit_date\u201d onClick=\u201ddoPickDate(this.id);\u201d \/&gt:<br \/>\n\/\/ I added the onClick event to make it call a javascript function defined on my main page.<br \/>\n&nbsp;<br \/>\n<strong>Javascript<\/strong><br \/>\nfunction doPickDate(thisid){<br \/>\n var fthisid = '#'+thisid;<br \/>\n   $(function(){<br \/>\n            $( fthisid).datepick();<br \/>\n            }<br \/>\n  );<br \/>\n}  <\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>I had the need for a calendar datepicker in a recent project and could not use Coldfusion&#8217;s input datefield. I am building the form on the fly and loading form elements from a database using a CFC and a bunch &hellip; <a href=\"https:\/\/www.esearing.com\/v2010\/2010\/08\/jquery-datepicker-plugin\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,12,13,21],"tags":[],"class_list":["post-326","post","type-post","status-publish","format-standard","hentry","category-code","category-javascript","category-jquery","category-problems-fixes"],"_links":{"self":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts\/326","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/comments?post=326"}],"version-history":[{"count":0,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/posts\/326\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/media?parent=326"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/categories?post=326"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esearing.com\/v2010\/wp-json\/wp\/v2\/tags?post=326"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}