jquery日历datepicker的使用方法

最新推荐文章于 2024-12-06 10:39:54 发布

qdqht2009

最新推荐文章于 2024-12-06 10:39:54 发布

阅读量557

点赞数

CC 4.0 BY-SA版权

文章标签：编程日历 datepicker

本文链接：https://blog.youkuaiyun.com/qdqht2009/article/details/31383859

本文介绍如何在网页中使用jQuery UI日期选择器组件来实现日期输入功能，包括日期格式设置、月份和年份的选择选项，以及预设默认日期。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page contentType="text/html; charset=UTF-8" language="java" import="java.sql.*" errorPage="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script src="js/jquery.ui.datepicker-zh-CN.js" ></script>
<script src="/js/jquery.jqpagination.js"></script>
<script>
var optionID = '0';
$(document).ready(function() {
$(function(){

$("#date_1").datepicker({
dateFormat: 'yy年mm月dd日',
changeMonth: true, //可以选择月份
changeYear: true, //可以选择年份
defaultDate: '2010年06月06日'
});
$("#ui-datepicker-div").css('font-size','0.9em') ;
});
});

</script>
<title>无标题文档</title>
<link href="css/ui-lightness/jquery-ui-1.10.4.custom.css" rel="stylesheet">
</head>
<body>
<input type="text" name="date1" id="date_1" value="2010-06-06" readonly />

</body>
</html>