{"id":510,"date":"2014-06-19T10:51:28","date_gmt":"2014-06-19T10:51:28","guid":{"rendered":"http:\/\/www.andreagirardi.it\/blog\/?p=510"},"modified":"2014-06-24T12:51:55","modified_gmt":"2014-06-24T12:51:55","slug":"apply-jquery-datepicker-multiple-instances","status":"publish","type":"post","link":"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/","title":{"rendered":"Apply jQuery datepicker to multiple instances"},"content":{"rendered":"<p>To add multiple instance of jQuery datepicker (or timepicker), it is possible to use <b>class<\/b> instead of the ID to initialize the widget in particular when the form is generated from the backend and the exact number of field is not known.<\/p>\n<p>The html code will be:<\/p>\n<pre lang=\"html\">\r\n<input type=\"text\" class=\"datepicker\" id=\"date1\" \/>\r\n<input type=\"text\" class=\"datepicker\" id=\"date2\" \/>\r\n<input type=\"text\" class=\"datepicker\" id=\"date3\" \/>\r\n<\/pre>\n<p>The jQuery script will be:<\/p>\n<pre lang=\"javascript\">\r\n$('.datepicker').each(function(){\r\n    $(this).datepicker();\r\n});\r\n<\/pre>\n<p>Remember to include jquery and jquery-ui scripts to the page.<\/p>\n<div class=\"sharedaddy sd-sharing-enabled\"><div class=\"robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing\"><h3 class=\"sd-title\">Share this:<\/h3><div class=\"sd-content\"><ul><li class=\"share-linkedin\"><a rel=\"nofollow\" data-shared=\"sharing-linkedin-510\" class=\"share-linkedin sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=linkedin\" target=\"_blank\" title=\"Click to share on LinkedIn\"><span>LinkedIn<\/span><\/a><\/li><li class=\"share-reddit\"><a rel=\"nofollow\" data-shared=\"\" class=\"share-reddit sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=reddit\" target=\"_blank\" title=\"Click to share on Reddit\"><span>Reddit<\/span><\/a><\/li><li class=\"share-twitter\"><a rel=\"nofollow\" data-shared=\"sharing-twitter-510\" class=\"share-twitter sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=twitter\" target=\"_blank\" title=\"Click to share on Twitter\"><span>Twitter<\/span><\/a><\/li><li class=\"share-facebook\"><a rel=\"nofollow\" data-shared=\"sharing-facebook-510\" class=\"share-facebook sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=facebook\" target=\"_blank\" title=\"Click to share on Facebook\"><span>Facebook<\/span><\/a><\/li><li class=\"share-skype\"><a rel=\"nofollow\" data-shared=\"sharing-skype-510\" class=\"share-skype sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=skype\" target=\"_blank\" title=\"Share on Skype\"><span>Skype<\/span><\/a><\/li><li class=\"share-pocket\"><a rel=\"nofollow\" data-shared=\"\" class=\"share-pocket sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=pocket\" target=\"_blank\" title=\"Click to share on Pocket\"><span>Pocket<\/span><\/a><\/li><li class=\"share-end\"><\/li><\/ul><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>To add multiple instance of jQuery datepicker (or timepicker), it is possible to use class instead of the ID to initialize the widget in particular when the form is generated from the backend and the exact number of field is not known. The html code will be: The jQuery script will be: $(&#8216;.datepicker&#8217;).each(function(){ $(this).datepicker(); }); [&hellip;]<\/p>\n<div class=\"sharedaddy sd-sharing-enabled\"><div class=\"robots-nocontent sd-block sd-social sd-social-icon-text sd-sharing\"><h3 class=\"sd-title\">Share this:<\/h3><div class=\"sd-content\"><ul><li class=\"share-linkedin\"><a rel=\"nofollow\" data-shared=\"sharing-linkedin-510\" class=\"share-linkedin sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=linkedin\" target=\"_blank\" title=\"Click to share on LinkedIn\"><span>LinkedIn<\/span><\/a><\/li><li class=\"share-reddit\"><a rel=\"nofollow\" data-shared=\"\" class=\"share-reddit sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=reddit\" target=\"_blank\" title=\"Click to share on Reddit\"><span>Reddit<\/span><\/a><\/li><li class=\"share-twitter\"><a rel=\"nofollow\" data-shared=\"sharing-twitter-510\" class=\"share-twitter sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=twitter\" target=\"_blank\" title=\"Click to share on Twitter\"><span>Twitter<\/span><\/a><\/li><li class=\"share-facebook\"><a rel=\"nofollow\" data-shared=\"sharing-facebook-510\" class=\"share-facebook sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=facebook\" target=\"_blank\" title=\"Click to share on Facebook\"><span>Facebook<\/span><\/a><\/li><li class=\"share-skype\"><a rel=\"nofollow\" data-shared=\"sharing-skype-510\" class=\"share-skype sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=skype\" target=\"_blank\" title=\"Share on Skype\"><span>Skype<\/span><\/a><\/li><li class=\"share-pocket\"><a rel=\"nofollow\" data-shared=\"\" class=\"share-pocket sd-button share-icon\" href=\"https:\/\/www.andreagirardi.it\/blog\/apply-jquery-datepicker-multiple-instances\/?share=pocket\" target=\"_blank\" title=\"Click to share on Pocket\"><span>Pocket<\/span><\/a><\/li><li class=\"share-end\"><\/li><\/ul><\/div><\/div><\/div>","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"footnotes":""},"categories":[14],"tags":[53,52,21,51],"_links":{"self":[{"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/posts\/510"}],"collection":[{"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/comments?post=510"}],"version-history":[{"count":4,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/posts\/510\/revisions"}],"predecessor-version":[{"id":519,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/posts\/510\/revisions\/519"}],"wp:attachment":[{"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/media?parent=510"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/categories?post=510"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.andreagirardi.it\/blog\/wp-json\/wp\/v2\/tags?post=510"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}