我的日期选择器正在改变形状并延伸到屏幕的最末端。有什么问题吗？这是我的代码:
此外，我如何更改 jQuery 中的日期，使其显示为 dd-mm-yyyy？
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<title>Beauty Factory Bookings</title>
<link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<div class="heading1">
<p>Select Your Treatment</p>
<div class="dropdown">
<select><?php echo $options; ?></select>
<div class="heading2">
<p>Select Your Date</p>
<input type="text" id="datepicker">
<div class="heading3">
<p>Select Your Time</p>
</body>
CSS:
.heading1 {
text-align: center;
margin-top: 5%;
text-transform: uppercase;
font-size: 16px;
}
.heading2 {
text-align: center;
margin-top: 3%;
text-transform: uppercase;
font-size: 16px;
}
.heading3 {
text-align: center;
margin-top: 3%;
text-transform: uppercase;
font-size: 16px;
}
.dropdown select {
margin-top: 1%;
display: block;
height: 30px;
width: 320px;
background: #ff656c;
border: 1px solid #e15960;
color: #fff;
font-size: 15px;
font-family: Montserrat;
outline: none;
cursor: pointer;
text-align: center;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
}
img {
padding-top: 12px;
padding-left: 12px;
}
.headertext {
float: right;
padding-top: 20px;
padding-right: 3%;
}
body {
background: url('http://i.imgur.com/4mKmYMb.jpg') no-repeat fixed center center;
background-size: cover;
font-family: Montserrat;
margin: 0;
padding: 0;
}
最佳答案
也许你必须关闭你的 html div
<div class="heading1">
<p>Select Your Treatment</p>
</div>
<div class="dropdown">
<select><?php echo $options; ?></select>
</div>
<div class="heading2">
<p>Select Your Date</p>
<input type="text" id="datepicker">
</div>
<div class="heading3">
<p>Select Your Time</p>
</div>
要更改日期格式，请将 dateFormat 选项添加到您的日期选择器函数
$( "#datepicker" ).datepicker({dateFormat: 'dd-mm-yy'});
关于jQuery UI Datepicker 超出范围，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34982812/