前端实现只显示年月日

视频课：https://edu.csdn.net/course/play/7621

只显示年月日的前端代码：jquery+js

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>演示：jQuery年月日（生日）选择器</title>
<link rel="stylesheet" type="text/css" href="../css/main.css" />
<style>
.demo{width:420px; margin:40px auto 0 auto; min-height:250px;}
.demo p{line-height:42px; font-size:16px}
</style>
<script type="text/javascript" src="jquery.js"></script></head><body>
<div id="header"><div id="logo"><h1><a href="http://www.helloweba.com" title="返回helloweba首页">helloweba</a></h1></div><div class="demo_topad"><script src="/js/ad_js/demo_topad.js" type="text/javascript"></script></div>
</div><div id="main"><h2 class="top_title"><a href="http://www.helloweba.com/view-blog-263.html">jQuery年月日（生日）选择器</a></h2><div class="demo"><p>初始化：<br/><label>生日：</label><select id="sel_year"></select>年<select id="sel_month"></select>月<select id="sel_day"></select>日</p><p>默认值：<br/><label>生日：</label><select class="sel_year" rel="2000"></select>年<select class="sel_month" rel="2"></select>月<select class="sel_day" rel="14"></select>日</p></div><br/><div class="ad_76090"><script src="/js/ad_js/bd_76090.js" type="text/javascript"></script></div><br/>
</div><script type="text/javascript" src="birthday.js"></script>
<script>
$(function () {$.ms_DatePicker({YearSelector: ".sel_year",MonthSelector: ".sel_month",DaySelector: ".sel_day"});$.ms_DatePicker();
});
</script> <div id="footer"><p>Powered by helloweba.com  允许转载、修改和使用本站的DEMO，但请注明出处：<a href="http://www.helloweba.com">www.helloweba.com</a></p>
</div>
<p id="stat"><script type="text/javascript" src="/js/tongji.js"></script></p>
</body>
</html>

所需要的js代码，用来计算年月日，包含闰年之类的

(function($){
$.extend({
ms_DatePicker: function (options) {var defaults = {YearSelector: "#sel_year",MonthSelector: "#sel_month",DaySelector: "#sel_day",FirstText: "--",FirstValue: 0};var opts = $.extend({}, defaults, options);var $YearSelector = $(opts.YearSelector);var $MonthSelector = $(opts.MonthSelector);var $DaySelector = $(opts.DaySelector);var FirstText = opts.FirstText;var FirstValue = opts.FirstValue;// 初始化var str = "<option value=\"" + FirstValue + "\">" + FirstText + "</option>";$YearSelector.html(str);$MonthSelector.html(str);$DaySelector.html(str);// 年份列表var yearNow = new Date().getFullYear();var yearSel = $YearSelector.attr("rel");for (var i = yearNow; i >= 1900; i--) {var sed = yearSel==i?"selected":"";var yearStr = "<option value=\"" + i + "\" " + sed+">" + i + "</option>";$YearSelector.append(yearStr);}// 月份列表var monthSel = $MonthSelector.attr("rel");for (var i = 1; i <= 12; i++) {var sed = monthSel==i?"selected":"";var monthStr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>";$MonthSelector.append(monthStr);}// 日列表(仅当选择了年月)function BuildDay() {if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) {// 未选择年份或者月份$DaySelector.html(str);} else {$DaySelector.html(str);var year = parseInt($YearSelector.val());var month = parseInt($MonthSelector.val());var dayCount = 0;switch (month) {case 1:case 3:case 5:case 7:case 8:case 10:case 12:dayCount = 31;break;case 4:case 6:case 9:case 11:dayCount = 30;break;case 2:dayCount = 28;if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) {dayCount = 29;}break;default:break;}var daySel = $DaySelector.attr("rel");for (var i = 1; i <= dayCount; i++) {var sed = daySel==i?"selected":"";var dayStr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>";$DaySelector.append(dayStr);}}}$MonthSelector.change(function () {BuildDay();});$YearSelector.change(function () {BuildDay();});if($DaySelector.attr("rel")!=""){BuildDay();}} // End ms_DatePicker
});
})(jQuery);

需要显示如下图：

如果要测试取出的年月日

<script>function asss(){alert($("#sel_year").val());alert($("#sel_month").val());alert($("#sel_day").val());}</script>

前端实现只显示年月日相关推荐

PLSQL 查询结果只显示年月日不显示时分秒的解决方法
PLSQL 14查询结果只显示年月日不显示时分秒的解决方法如果plsql里面日期显示出现混乱,并且按照一般的调整首选项里日期格式调整不了,可以修改环境变量,新建环境变量,变量名:nls_date_f ...
php只获取年月日,php怎么实现date只显示年月日
php怎么实现date只显示年月日发布时间:2020-06-11 11:53:56 来源:亿速云阅读:185 作者:Leah php怎么实现date只显示年月日?针对这个问题,今天小编总结了这篇文 ...
easyui中的datetimebox 只显示年月日_设置Win10任务栏显示星期几方法
平时我们用电脑时,在其右下角看时间一般默认的都是年月日和具体时间,并没有星期几.如果想看,那么需要将鼠标移动到时间处,停留一秒左右会显示出星期几.但这样似乎有些麻烦.今天小编就教大家一招儿直接让电脑显 ...
easyui中的datetimebox 只显示年月日_云计算自动化运维之linux-工作中常用命令总结（中）...
***想看完整版请看(上).(中).(下)三篇文章*** date命令,显示系统时间直接输入date 2.date 命令打印年月日,使用命令date +%F或者是date +%Y-%m-%d 3.d ...
微信小程序解决时间只显示年月日的问题（手机端显示NAN-NAN-NAN）
const iosTime=(date)=>{date = new Date(date.replace(/-/g, "/"));let year = date.getFull ...
C#表格table时间显示年月日时分秒格式设置
C#表格table时间显示年月日时分秒格式设置作者:张国军_Suger 开发工具与关键技术:Visual Studio 2015.C#..NET 在做C#项目是遇到的前端表格的时间处理问题,一般都是 ...
EXCEL中显示年月日时分秒
一开始数据只显示年月日时分,不显示秒查了一下,选中你想要修改的部分,右键选"设置单元格格式",选择"自定义" 在年月日时分格式的后面,加上:ss即可修改后如 ...
easyUI datebox 日期只显示年月及年月日切换的实现 js样式重新渲染加载
记录一下,最近的做的一个功能,需要在easyUI的日期框datebox 中,只显示年月格式,同时,还需要切换到年月日的格式第一步:如何显示年月日,默认当前一天如下代码是:报表日期及时间选择框报表 ...
前端简单实现当日时间只展示时间，否则只展示年月日
需求如下日期:显示消息推送时间,当天00:00--23:59分内推送的消息,日期显示具体时间,如:17:59:超出00:00--23:59分推送的消息,日期显示:年/月/日,如:2022/01/01 ...

前端实现只显示年月日

前端实现只显示年月日相关推荐

最新文章

热门文章