Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >前端实现只显示年月日

前端实现只显示年月日

作者头像
张哥编程
发布于 2024-12-17 02:37:29
发布于 2024-12-17 02:37:29
22400
代码可运行
举报
文章被收录于专栏:云计算linux云计算linux
运行总次数:0
代码可运行

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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代码,用来计算年月日,包含闰年之类的

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(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);

需要显示如下图:

前端实现只显示年月日_sed
前端实现只显示年月日_sed

如果要测试取出的年月日

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script>
    function asss(){
        alert($("#sel_year").val());
        alert($("#sel_month").val());
        alert($("#sel_day").val());
    }

    </script>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-03-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
jQuery年月日(年龄)选择插件
下载地址:https://www.helloweba.net/javascript/263.html
王小婷
2019/04/09
2.6K0
jQuery年月日(年龄)选择插件
判断年月日的那一天
import java.util.Calendar; import java.util.Scanner;
全栈程序员站长
2022/08/09
1640
fullcalendar日历插件的使用并实现增删改查
我上个项目是做了一个关于教育方面的web端页面,其中的课程表就要用到fullcalendar日历插件,刚开始也是不会用,因为以前也没用过,后面也是看官方文档,问同事,最后完成了这个课程表,个人感觉fullcalendar这个日历插件功能很强大!下面我来附上几张图片:
故久
2019/09/29
6K0
fullcalendar日历插件的使用并实现增删改查
js-基础知识-02-当前年月日时分秒
系统:Windows 10 VsCode:1.51 Node.js:10.15.3
zishendianxia
2020/12/18
2.3K0
js-基础知识-02-当前年月日时分秒
微信小程序显示当前系统年月日时分秒
2:打开项目里面默认生成的util.js 这里可以看到,代码已经写好了,我们只需要引用就行了
王小婷
2020/08/24
3.5K0
微信小程序显示当前系统年月日时分秒
Flutter 仿ios自定义一个DatePicker
编辑个人资料,修改生日的时候需要用到,需求就是如果传了日期就要滚动到传的日期位置,如果没有穿就是系统当前时间。所以动手撸一个,有需要的同学可以拿去做轮子。
赵哥窟
2021/03/02
1.1K0
Flutter 仿ios自定义一个DatePicker
JS获取当前时间(年月日时分秒)「建议收藏」
**拿走直接用 `//获取当前时间 getNowTime() { var date = new Date(); //年 getFullYear():四位数字返回年份 var year = date.getFullYear(); //getFullYear()代替getYear() //月 getMonth():0 ~ 11 var month = date.getMonth() + 1; //日 getDate():(1 ~ 31) var day = date.getDate(); //时 getHours():(0 ~ 23) var hour = date.getHours(); //分 getMinutes(): (0 ~ 59) var minute = date.getMinutes(); //秒 getSeconds():(0 ~ 59) var second = date.getSeconds();
全栈程序员站长
2022/11/09
9.1K0
JS获取当前时间(年月日时分秒)「建议收藏」
日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日,时分秒的选择。
参考链接:http://www.bootcss.com/p/bootstrap-datetimepicker/
别先生
2019/06/05
4.7K0
日期时间选择器、Bootstrap日期和时间表单组件。bootstrap-datetimepicker实现年月日,时分秒的选择。
输入年月日查询是这一年的第几天(详解)
输入年月日查询是这一年的第几天 运行结果 代码 //导包 import java.util.Scanner; //声明一个类名为Test的类 public class Test { //mian方法 程序入口 public static void main(String[] args) { // 输入年月日查询是这一年的第几天 //键盘输入 Scanner scan = new Scanner(System.in); System.out.println("******输入
是阿超
2021/10/15
1K0
用JS实现年月日的联动
先引入jquery-2.0.2.js,然后直接上代码 <!DOCTYPE html> <html> <head> <title>用JS实现年月日的联动</title> <script type="text/javascript" src="jquery-2.0.2.js"></script> </head> <body> <!--年--> <select name="year" id="year" οnchange="getDay()"> <script type="text/javascript"> v
IT工作者
2022/04/23
4.2K0
vue获取系统默认的年月日时分秒
<template> <div class="container"> <div>当前系统时间:{{ dateTime }}</div> </div> </template> <script> export default { data() { return { dateTime: "", }; }, created() { this.Date(); }, methods: { //获取当前年月日 // Date() {
王小婷
2021/07/19
3.4K0
vue获取系统默认的年月日时分秒
实用的JavaScript(持续添加)
Checkbox类: 1.实现checkbox的全选功能 <script type="text/javascript"> //全选checkbox:1、当全选checkbox勾选,子checkbox(name为'ids'的checkbox)自动全部勾选 // 2、当全选checkbox取消勾选,子checkbox自动全部取消勾选 function checkAll(){ if($("#checkall")[0].checked){ $("input[type='checkbox
Java架构师必看
2021/05/17
1.3K0
input输入框输入身份证号码,自动填充年月日
通过$('#id')方式获取身份证号码输入框和三个select元素(年、月、日)。 使用on('input', function() { ... })来监听身份证号码输入框的输入事件。
王小婷
2023/09/19
4870
vue获取系统默认的年月日
<template> <div class="container"> <div>当前系统时间:{{ dateTime }}</div> </div> </template> <script> export default { data() { return { dateTime: "", }; }, created() { this.Date(); }, methods: { //获取当前年月日 Date() {
王小婷
2021/05/18
2.5K0
vue获取系统默认的年月日
select选择框随输入过滤的两种不同实现(附代码)
一部分企业在招人时,可能是为了节省人力成本,会要求java开发人员熟悉前端技术,有些只要求会使用easyui这样的框架就行,而另一些则要求java程序员精通前端技术,能够全栈式开发,当然,你也可以藉此要求更高的工资。前端技术一定是我们的一个加分项。 那么,怎样才能提高自己的前端开发水平,直至做到精通呢?比如要设计一个select组件,可以实现随输入过滤的功能,很多人都会想到用一些现成的js框架,比如easyui,下面是基于框架的实现方式: <!DOCTYPE html PUBLIC "-//W3C//DT
java达人
2018/01/31
1.5K0
select选择框随输入过滤的两种不同实现(附代码)
20. Vue 过滤器 - 转化时间格式
在上一篇中基本讲诉了Vue过滤器的基本使用,那么在后台管理系统的业务中,使用最多的一个过滤器就是时间格式的转化,下面来看看,如何处理。
Devops海洋的渔夫
2020/03/19
1.5K0
高质量编码-考勤记录日历可视化
工作就要上下班打卡,月末想要查看自己的考勤情况,考勤系统通常会记录各工号下的打卡记录。
MiaoGIS
2023/01/17
9760
高质量编码-考勤记录日历可视化
实用的日期选择器插件集合(PC端 + 移动端)
My97DatePicker 可谓有年头了,使用起来非常方便,而且文档介绍的也非常全面,唯一的不足之处是移动端不是很友好。
躺平程序员老修
2023/09/05
1.2K0
实用的日期选择器插件集合(PC端 + 移动端)
DatePicker 日期选择器,获取系统默认当前年月日
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和维护人员,开发时候遇到问题也不要慌。
王小婷
2021/07/27
3K0
如何将后端传的时间戳转化为年月日
在项目里面,涉及到时间相关问题,后端一般会传一个时间戳给前端,后端传过来的时间戳如下。 data.json
王小婷
2019/11/27
2.2K0
推荐阅读
相关推荐
jQuery年月日(年龄)选择插件
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档