javascript - Call jQuery datepicker from external file -
i'm relatively new jquery , having difficult time getting jquery datepicker work external js file.
originally created script function, believed doing limiting scope , not accessible outside function. i've tried defining function (and naming function), calling using $(document).ready. cannot work either way.
my external js script called scripts.js , contents below:
$( "#from" ).datepicker({ defaultdate: "+1w", changemonth: true, changeyear: true, numberofmonths: 2, showon: "both", buttonimageonly: true, buttonimage: "images/calendar.gif", dateformat: "mm/dd/yy", altfield: "#forminp1", altformat: "yyddmm", onclose: function( selecteddate ) { $( "#to" ).datepicker( "option", "mindate", selecteddate ); } }); $( "#to" ).datepicker({ defaultdate: "+1w", changemonth: true, changeyear: true, numberofmonths: 2, showon: "both", buttonimageonly: true, buttonimage: "images/calendar.gif", dateformat: "mm/dd/yy", altfield: "#forminp2", altformat: "yyddmm", onclose: function( selecteddate ) { $( "#from" ).datepicker( "option", "maxdate", selecteddate ); }, }); the html is:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui datepicker - select date range</title> <link rel="stylesheet" href="css/jquery-ui-1.10.4.custom.css" type="text/css"> <script src="js/jquery-1.10.2.js"></script> <script src="js/jquery-ui-1.10.4.custom.js"></script> <script src="js/scripts.js"></script> </head> <body> <label for="from">from</label> <input type="text" id="from" name="from"> <label for="to">to</label> <input type="text" id="to" name="to"> <p></p> <input type="text" id="forminp1" size="30"> <input type="text" id="forminp2" size="30"> </body> </html> how can keep jquery code external have run when page loads?
wrap whole file in jquery document.ready function this.
jquery document ready
the basics need run on page load needs inside
$( document ).ready(function(){ ... }); or shortcut
$( function(){ ... }); see docs more info on this.
script on bottom of page
you put <script src="..."></script> on bottom of page, right above </body> tag.
this considered best practice way of doing things.
Comments
Post a Comment