單擊時未打開 jQuery 日期選擇器
[英]jQuery Date picker is not opening on click
問題描述
我在 jsFiddle 中使用 jQuery Datepicker，但是當我在實際項目中復制代碼時，它不起作用。 我認為問題出在 jquery CDN 上。 jsFiddle 使用 jquery 1.9.1 和 jquery UI 1.9.2。 我將這兩個 CDN 添加到我的 JSP 頁面，但它仍然無法正常工作。
鏈接到 JS Fiddle： JS Fiddle
JS文件
var dateToday = new Date();
var dates = $("#datepicker1").datepicker({
defaultDate: "+1w",
dateFormat: "yy-mm-dd",
// changeMonth: true,
duration:"slow",
showAnim: "explode",
numberOfMonths: 1,
showButtonPanel: true,
beforeShowDay: $.datepicker.noWeekends,
minDate: dateToday,
maxDate:dateToday+"+2m" ,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
JSP文件
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Book A Appointment</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
<%@include file="/CSS/docDetails.css"%>
</style>
<script type="text/javascript"
src="<%=request.getContextPath() %>/JS/docDetails.js"></script>
</head>
<body>
<div class="container">
<span>First Name:</span>${fName }<br> <span>Last Name:</span>${lName }<br>
<span>Mobile:</span>${mobile }<br> <span>Address:</span>${add }<br>
<span>Email:</span>${email }<br> <span>Image:</span>${img }<br>
<span>Speciality In:</span>${special }<br> <span>Degree:</span>${deg }<br>
<span>Experience:</span>${exp }<br> <span>Fees:</span>${fees }<br>
<div class="dateBox">
<input class="js--datePicker" type="text" id="datepicker1"
value="Date To" readonly="readonly">
</div>
</div>
</body>
</html>
這是我得到的錯誤。
CSS文件
.ui-datepicker {
width: 350px;
height: 400px;
margin: 5px auto 0;
font: 12pt Arial, sans-serif;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker table {
width: 100%;
}
.ui-datepicker-header {
background: #3d3939;
color: #ffffff;
font-family: 'Times New Roman';
border-width: 1px 0 0 0;
border-style: solid;
border-color: #111;
}
.ui-datepicker-title {
text-align: center;
font-size: 15pt;
color: #d9cc3d;
font-weight: bolder;
}
.ui-datepicker-prev {
float: left;
cursor: pointer;
background-position: center -30px;
background-color: white;
}
.ui-datepicker-next {
float: right;
cursor: pointer;
background-position: center 0px;
background-color: white;
}
.ui-datepicker thead {
background-color: #fff;
border-bottom: 1px solid #bbb;
}
.ui-datepicker th {
background-color: #808080;
text-transform: uppercase;
font-size: 10pt;
color: red;
}
.ui-datepicker tbody td {
padding: 0;
border-right: 1px solid #808080;
}
.ui-datepicker tbody td:last-child {
border-right: 0px;
}
.ui-datepicker tbody tr {
border-bottom: 1px solid #bbb;
}
.ui-datepicker tbody tr:last-child {
border-bottom: 0px;
}
.ui-datepicker a {
text-decoration: none;
}
.ui-datepicker td span,
.ui-datepicker td a {
display: inline-block;
/*font-weight: bold;*/
text-align: center;
width: 30px;
height: 30px;
line-height: 30px;
color: #ffffff;
/*text-shadow: 1px 1px 0px #fff;*/
/*filter: dropshadow(color=#fff, offx=1, offy=1);*/
}
.ui-datepicker-calendar .ui-state-default {
background: linear-gradient(#999999, #737373);
color: #ffffff;
height: 40px;
width: 40px;
}
.ui-datepicker-calendar .ui-state-hover {
background: #33adff;
color: #FFFFFF;
}
.ui-datepicker-calendar .ui-state-active {
background: #33adff;
-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
color: #e0e0e0;
text-shadow: 0px 1px 0px #4d7a85;
border: 1px solid #55838f;
position: relative;
margin: -1px;
}
.ui-datepicker-unselectable .ui-state-default {
background: #D6E4BE;
color: #000;
}
1 個解決方案
解決方案1
1 已采納 2020-11-06 19:19:53
將您的腳本文件放在文檔底部，錯誤是調用函數腳本時 dom not ready
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Book A Appointment</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.9.2/jquery-ui.min.js"></script>
<style type="text/css">
<%@include file="/CSS/docDetails.css"%>
</style>
</head>
<body>
<div class="container">
<span>First Name:</span>${fName }<br> <span>Last Name:</span>${lName }<br>
<span>Mobile:</span>${mobile }<br> <span>Address:</span>${add }<br>
<span>Email:</span>${email }<br> <span>Image:</span>${img }<br>
<span>Speciality In:</span>${special }<br> <span>Degree:</span>${deg }<br>
<span>Experience:</span>${exp }<br> <span>Fees:</span>${fees }<br>
<div class="dateBox">
<input class="js--datePicker a" type="text" id="datepicker1"
value="Date To" readonly="readonly">
</div>
</body>
<script type="text/javascript">
var dateToday = new Date();
console.log($("#datepicker1"))
var dates = $("#datepicker1").datepicker({
defaultDate: "+1w",
dateFormat: "yy-mm-dd",
// changeMonth: true,
duration:"slow",
showAnim: "explode",
numberOfMonths: 1,
showButtonPanel: true,
beforeShowDay: $.datepicker.noWeekends,
minDate: dateToday,
maxDate:dateToday+"+2m" ,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
</script>
</html>
為什么第一次ng-click不會加載此JQuery日期選擇器？
[英]Why is this JQuery date picker not loading for the first ng-click?
單擊時打開 v-date-picker v-menu 並在其中聚焦 v-text-field？
[英]Opening a v-date-picker v-menu on click and focusing a v-text-field inside it?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.