从外部文件调用jQuery datepicker [英] Call jQuery datepicker from external file
问题描述
我对jQuery来说比较新，并且很难将jQuery datepicker从外部js文件中工作。
最初我创建了脚本作为功能，但相信通过这样做，我限制范围，它不能在功能之外访问。我也尝试将其定义为一个函数（并命名该函数），然后使用 $（document）.ready 调用它。我不能以任何方式工作。
我的外部js脚本称为scripts.js，其内容如下：
$（#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 （选项，minDate，selectedDate）;
}
}）;
$（#to）.datepicker（{
defaultDate：+ 1w，
changeMonth：true，
changeYear：true，
numberOfMonths：
showOn：both，
buttonImageOnly：true，
buttonImage：images / calendar.gif，
dateFormat：mm / dd / yy，
altField：＃forminp2，
altFormat：yyddmm，
onClose：function（selectedDate）{
$（#from）.datepicker（option，maxDate selectedDate）;
}，
}）;
HTML是：
<！doctype html>
< html lang =en>
< head>
< meta charset =utf-8>
< title> jQuery UI Datepicker - 选择日期范围< / title>
< link rel =stylesheethref =css / jquery-ui-1.10.4.custom.csstype =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 =textid =fromname =from>
< label for =to> to< / label>
< input type =textid =toname =to>
< p>< / p>
< input type =textid =forminp1size =30>& nbsp;< input type =textid =forminp2size =30>
< / body>
< / html>
如何在页面加载时将jQuery代码保持在外部，但是可以正常运行？
将整个文件整理成一个jQuery document.ready函数，如这个。
jQuery文件准备好
需要在页面加载上运行需要在
$（document）.ready（function（）{...}） ;
或快捷方式
$（function（）{...}）;
请参阅 docs 了解更多信息。
页面底部的脚本
您也可以在页面底部的<$ c上方放置< script src =...>< / script> $ c>< / body> 标签。
这通常被认为是最好的做法。
I'm relatively new to jQuery and am having a difficult time getting the jQuery datepicker to work from an external js file.
Originally I created the script as a function, but believed that by doing so I was limiting the scope and it would not be accessible outside the function. I've also tried defining it as a function (and naming the function), then calling it using $(document).ready. I cannot get it to work either way.
My external js script is called scripts.js and its contents are 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 a 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 I keep the jQuery code external but have it run properly when the page loads?
Wrap the whole file in a jQuery document.ready function like this.
jQuery document ready
The basics are that everything you need to run on page load needs to be inside
$( document ).ready(function(){ ... });
or the shortcut
$( function(){ ... });
See the docs for more info on this.
Script on bottom of page
You could also just put the <script src="..."></script> on the bottom of the page, right above the </body> tag.
This is generally considered to be the best practice way of doing things.
这篇关于从外部文件调用jQuery datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
