[英]How to add Timepicker in a Datepicker in jsp page using javascript
我的JSP頁面中有一個日期選擇器。 現在我想在這個日期選擇器中添加開始時間和結束時間，即日歷。 怎么做。 我還想設置開始時間應始終小於結束時間的驗證。 我在JSP中的日期選擇器代碼是
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>User_Interface</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$("#datepicker").datepicker({ minDate: -210, maxDate: -1 });
});
</script>
</head>
<b>Select Date to be compared</b><br>
<p>Date: <input type="text" name="datepicker" id="datepicker"></p>
<input type="submit" value="Submit"><br>
編輯
現在，當我嘗試使用此代碼時，我的日期選擇器即日歷也無法正常工作
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>User_Interface</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <link type="text/css" href="css/bootstrap.min.css" /> <link type="text/css" href="css/bootstrap-timepicker.min.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script> <script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script> <script> $(function() { $("#datepicker").datepicker({ minDate: -210, maxDate: -1 }); }); </script> <script type="text/javascript"> $('#timepicker2').timepicker({ minuteStep: 1, template: 'modal', appendWidgetTo: 'body', showSeconds: true, showMeridian: false, defaultTime: false }); </script> </head> <body> <br> <br> <form> <b>Select Date to be compared</b><br> <p>Date: <input type="text" name="datepicker" id="datepicker"></p> <div class="input-append bootstrap-timepicker"> <input id="timepicker2" type="text" class="input-small"> <span class="add-on"> <i class="icon-time"></i> </span> </div> <input type="submit" value="Submit"> <br> </form> </body> </html>
任何人都可以幫我解決這個問題。
更改為日期時間選擇器。 周圍有好幾個。
我用這個。
您可以使用此Jquery 插件，它將為您的輸入元素添加時間選擇器功能。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/bootstrap.min.css" />
<link type="text/css" href="css/bootstrap-timepicker.min.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap-2.2.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap-timepicker.min.js"></script>
</head>
<body>
<div class="input-append bootstrap-timepicker">
<input id="timepicker1" type="text" class="input-small">
<span class="add-on"><i class="icon-time"></i></span>
</div>
<script type="text/javascript">
$('#timepicker1').timepicker();
</script>
</body>
</html>
為我工作。
希望這可以幫助。
嘗試將輸入標簽中的類型從type="text"更改為type="datetime-local"並開始相應地修改
如何檢查是否使用JQuery / Javascript設置了datepicker和timepicker元素
[英]How to check if the datepicker and timepicker elements are set using JQuery/Javascript
Javascript-什么是好的datepicker和timepicker庫？
[英]Javascript - what are a good datepicker and timepicker libraries?
在Durandal模板項目中使用TimePicker或Datepicker
[英]Using TimePicker or Datepicker in Durandal template project
如何使用基於時間的javascript顯示jsp頁面的彈出窗口？
[英]How to show a pop window of jsp page using javascript based on time?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.