jquery datepicker - 將datepicker放在textfield下
[英]jquery datepicker - put datepicker under the textfield
問題描述
我有一個考試日期字段，如下圖所示：
我的代碼：
<html>
<head>
<link rel="stylesheet" href="js/jquery-ui-themes-1.11.1/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.11.1/jquery-ui.js"> </script>
<script type="text/javascript">
$(function(){
$("#datepicker1").datepicker({dateFormat: 'dd-mm-yy'});
});
</script>
<style>
.ui-datepicker{
font-size: 9.5pt;
}
.ui-widget-header{
font-size: 12px;
color: #102132;
background: #D7E5F2;
}
#ui-datepicker-div .ui-state-highlight{
background: yellow;
color: red;
font-weight: bold;
}
.ui-datepicker-current-day .ui-state-active{
background: white;
color: blue;
font-weight: bold;
}
</style>
</head>
<body>
<input type="text" name="examdate" id="datepicker1" />
</body>
</html>
現在我的問題是，當我單擊文本字段時，我想在文本字段下面使用datepicker。 我應該如何修改它？
2 個解決方案
解決方案1
2 2015-12-15 06:56:03
$(function(){ $("#datepicker1").datepicker({ dateFormat: 'mm/dd/yy', beforeShow: function (input, inst) { var rect = input.getBoundingClientRect(); setTimeout(function () { inst.dpDiv.css({ top: rect.top + 40, left: rect.left + 0 }); }, 0); } }); });
<style> .ui-datepicker{ font-size: 9.5pt; } .ui-widget-header{ font-size: 12px; color: #102132; background: #D7E5F2; } #ui-datepicker-div .ui-state-highlight{ background: yellow; color: red; font-weight: bold; } .ui-datepicker-current-day .ui-state-active{ background: white; color: blue; font-weight: bold; } </style>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.1/jquery-ui.js"></script> <input type="text" name="examdate" id="datepicker1" />
解決方案2
1 2015-12-15 07:10:11
JQuery datepicker自動調整UI Ca貸方，我們不需要管理它。 如果文本框上方有適當的空格，則其顯示默認為up。
如果它沒有適當的空間，那么它將自動顯示在文本字段下。 如你所願。
只需向下滾動，然后單擊文本字段。 它會像你想要的那樣顯示出來。
jQuery UI“$("#datepicker").datepicker 不是函數”
[英]jQuery UI " $("#datepicker").datepicker is not a function"
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.