javascript日期选择器
时间: 2023-11-25 18:46:10 浏览: 39
可以使用第三方库或者自己编写代码实现JavaScript日期选择器。其中比较常用的第三方库有jQuery UI Datepicker、Bootstrap Datepicker等。
如果使用jQuery UI Datepicker,可以在HTML中引入jQuery和jQuery UI的库文件,然后在JavaScript中调用datepicker()方法即可。例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery UI Datepicker</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
```
如果使用Bootstrap Datepicker,可以在HTML中引入Bootstrap和Bootstrap Datepicker的库文件,然后在JavaScript中调用datepicker()方法即可。例如:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Bootstrap Datepicker</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script>
$(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
```
相关推荐
example:
<script language="JavaScript" type="text/javascript" src="js/CalendarPopup.js"></script>
<SCRIPT LANGUAGE="JavaScript">document.write(getCalendarStyles());</SCRIPT>
<SCRIPT LANGUAGE="JavaScript" ID="jscal1x">
var cal1x = new CalendarPopup("testdiv1");
</SCRIPT>
<INPUT TYPE="text" NAME="date1x" id="date1x" VALUE="" SIZE=25>
select
<INPUT TYPE="text" NAME="date1x2" id="date1x2" VALUE="" SIZE=25>
select