jquery 日历控件 datepicker的使用

最新推荐文章于 2015-04-04 17:53:47 发布

zhaossdut

最新推荐文章于 2015-04-04 17:53:47 发布

阅读量355

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zhaossdut/article/details/38369901

本文介绍了一个使用HTML、CSS及JavaScript实现的日期选择器案例，该案例通过jQuery UI组件库来增强网页交互体验，实现了自定义样式的日期选择功能。

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

<!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" />
<title>order</title>
<link rel="stylesheet" href="jquery-ui-1.8.4.custom.css" />
<link rel="stylesheet" href="jquery.ui.core.css" />
<link rel="stylesheet" href="jquery.ui.datepicker.css" />
<script type="text/javascript" src="jquery-2.1.1.js"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.2.0/jquery.mobile-1.2.0.js"></script>
<script type="text/javascript" src="jquery.ui.datepicker.js"></script>
<script type="text/javascript" src="jquery.ui.core.js"></script>
<style>

.head{
width:720px;;
height:128px;
float:left;
background-color:#0a64a3;
}
.indiv{
width:720px;
height:128px;
margin-left:30px;
float:left;
}
.ui-datepicker
{
width:400px;
height:300px;
margin-left:50px;
}
</style>
<script>
$(document).ready(function() {
$("#txtday").datepicker({//添加日期选择功能
numberOfMonths:1,//显示几个月
showButtonPanel:true,//是否显示按钮面板
dateFormat: 'yy年mm月dd日 DD',//日期格式
clearText:"清除",//清除日期的按钮名称
closeText:"关闭",//关闭选择框的按钮名称
yearSuffix: '年', //年的后缀
defaultDate : new Date(),
showMonthAfterYear:true,//是否把月放在年的后面
monthNames: ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
dayNames: ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'],
dayNamesShort: ['周日','周一','周二','周三','周四','周五','周六'],
dayNamesMin: ['日','一','二','三','四','五','六'],
});
});
</script>

</head>
<body>
<div class="main">
<div >
<div class="indiv" style="background-color:#FFFFFF;">
<input type="text" data-role="datebox" id="txtday" name="txtday" readonly="readonly" style="border-radius:8px;width:659px;height:88px;margin-top:21px; text-align:center;font-size:36px;border:1px solid #000000; " />
</div>
</div>
</div>
</body>
</html>