如何为日期选择器创建外部javascript和外部css文件，以及如何在eclipse中使用它

how to create an external javascript and an external css file for date picker and how to use it in eclipse

本文关键字：外部 eclipse css 选择器 日期 创建 javascript 文件      更新时间：2023-09-26

我有一个如下所示的javascript和css样式

 <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css" type="text/css" media="all" />
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(function () {
$('#startDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#startDate').datepicker();

});
</script> 
<script>
$(function() {
$( "#datepicker" ).datepicker({
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
});
});
</script> 
<script type="text/javascript">
$(function () {
$('#endDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#endDate').datepicker();
});
</script> 
<script type="text/javascript">
$(function () {
$('#followUpDate').datepicker({ dateFormat: 'yy-mm-dd' });
$('#followUpDate').datepicker();
});
</script>
<style>
.ui-datepicker th { background-color: #CCCCFF; }
</style>
<style type="text/css">
.search_textbx
{
background:url(calendar.jpg) right no-repeat;
background-color:white;
height:13px;
color:black;
}
</style>

现在我的问题是如何在eclipse中创建一个外部javascript文件和css文件，以便我可以在jsp页面中使用它，尤其是在input type = "text"中。

     <td style="padding-left:25px;">
<input type="text" id="startDate" name="startDate" class="search_textbx" size="15" readonly="readonly"/>
                          </td>

现在我需要一个外部javascript文件和css文件，我想在"input"标记中使用这些文件。

加载jquery和jquery ui的方式完全相同。创建一个文本文件，分别保存为.css和.js，使用链接和脚本标记将它们保存在页面中。

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

ps：您不必为每个函数使用新的脚本标记，只需将三个文本脚本合并为一个<script>标记和一个$（function（）{}；

最好将css文件放在head标记中，将script标记放在body标记中尽可能低的位置，除非您需要提前执行脚本。

相关文章：