本文介绍如何利用jQuery UI插件实现一个生日日期选择器，并详细配置了日期格式、月份名称、年份切换等功能，使得用户可以便捷地选择出生日期。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bootstarp/css/bootstrap.min.css">
<script src="../bootstarp/js/jquery-1.12.2.min.js"></script>
<script src="../bootstarp/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstarp/js/jquery-ui.css"/>
<!--<script src="../js/jquery-1.12.2.min.js"></script>-->
<script src="../bootstarp/js/jquery-ui.min.js"></script>
</head>
<body>
<label class="col-sm-1 control-label" style="letter-spacing:1.5em">生日</label>
<input placeholder="生日" type="text" id="publishtime" /><br/>
$("#publishtime").datepicker({
dateFormat:"yy-mm-dd",
changeMonth:true,
changeYear:true,
monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort:["一月","二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNamesMin:["日", "一", "二", "三", "四", "五", "六" ],
dayNames: [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ]
});
$("#ui-datepicker-div").css("font-size","10px");
</script>
</body>
</html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../bootstarp/css/bootstrap.min.css">
<script src="../bootstarp/js/jquery-1.12.2.min.js"></script>
<script src="../bootstarp/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../bootstarp/js/jquery-ui.css"/>
<!--<script src="../js/jquery-1.12.2.min.js"></script>-->
<script src="../bootstarp/js/jquery-ui.min.js"></script>
</head>
<body>
<label class="col-sm-1 control-label" style="letter-spacing:1.5em">生日</label>
<input placeholder="生日" type="text" id="publishtime" /><br/>
</form>
<script>$("#publishtime").datepicker({
dateFormat:"yy-mm-dd",
changeMonth:true,
changeYear:true,
monthNames:['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月'],
monthNamesShort:["一月","二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
dayNamesMin:["日", "一", "二", "三", "四", "五", "六" ],
dayNames: [ "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" ]
});
$("#ui-datepicker-div").css("font-size","10px");
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
