zoukankan      html  css  js  c++  java
  • jquery做个日期选择适用于手机端

    第一步:做个 文本框用于显示年月日的

    第二步:点击文本框触发 
     var month=date.getMonth()+1;
     month =(month<10 ? "0"+month:month); 
     var mydate = (year.toString()+month.toString());

    注意,year.toString()+month.toString()不能写成year+month。不然如果月份大于等于10,则月份为数字,会和年份相加,如201210,则会变为2022,需要加.toString()


     

    以下是搜到的有用内容:

    var myDate = new Date();
    myDate.getYear(); //获取当前年份(2位)
    myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    myDate.getMonth(); //获取当前月份(0-11,0代表1月)
    myDate.getDate(); //获取当前日(1-31)
    myDate.getDay(); //获取当前星期X(0-6,0代表星期天)
    myDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)
    myDate.getHours(); //获取当前小时数(0-23)
    myDate.getMinutes(); //获取当前分钟数(0-59)
    myDate.getSeconds(); //获取当前秒数(0-59)
    myDate.getMilliseconds(); //获取当前毫秒数(0-999)
    myDate.toLocaleDateString(); //获取当前日期
    var mytime=myDate.toLocaleTimeString(); //获取当前时间
    myDate.toLocaleString( ); //获取日期与时间

    <SCRIPT LANGUAGE="JavaScript">
    function monthnow(){
     var now   = new Date();
     var monthn = now.getMonth();
     var yearn  = now.getYear();
     window.location.href="winnNamelist.jsp?getMonth="+monthn+"&getYear="+yearn;
    }
    </script>

    <!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>无标题文档</title>
    <script src="../jquery/jquery-1.11.2.min.js"></script>
    <script src="../../bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="riqi.js"></script>
    <link href="../../bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    
    <!-- 模态框(Modal) -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">请选择日期</h4>
                </div>
                <div class="modal-body">
                    <select id="nian">
                    </select>
                    <select id="yue">
                    </select>
                    <select id="tian">
                    </select>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" id="qd">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    
    <input type="text" id="rq" />
    
    </body>
    </html>
    // JavaScript Document
    $(document).ready(function(e) {
        //在文本框里面显示当前日期
        var date = new Date();
        var nian = date.getFullYear();
        var yue = date.getMonth()+1;
        var tian = date.getDate();
        
        $("#rq").val(nian+"-"+yue+"-"+tian);
        
        //给文本框加点击事件
        $("#rq").click(function(){
                $('#myModal').modal('show');
                //加载年
                LoadNian();
                //加载月
                LoadYue();
                //加载天
                LoadTian();
            })
            
        //当年份选中变化的时候,重新加载天
        $("#nian").change(function(){
                LoadTian();
            })
        //当月份选中变化的时候,重新加载天
        $("#yue").change(function(){
                LoadTian();
            })
        //给确定按钮加点击事件
        $("#qd").click(function(){
                var nian = $("#nian").val();
                var yue = $("#yue").val();
                var tian = $("#tian").val();
                
                $("#rq").val(nian+"-"+yue+"-"+tian);
                $('#myModal').modal('hide');
            })
        
    });
    
    //加载年的方法
    function LoadNian()
    {
        var date = new Date();
        var nian = date.getFullYear();
        
        var str = "";
        for(var i=nian-5;i<nian+6;i++)
        {
            if(i==nian)
            {
                str = str +"<option selected='selected' value='"+i+"'>"+i+"</option>";
            }
            else
            {
                str = str +"<option value='"+i+"'>"+i+"</option>";
            }
        }
        $("#nian").html(str);
    }
    
    //加载月
    function LoadYue()
    {
        var date = new Date();
        var yue = date.getMonth()+1;
        
        var str = "";
        for(var i=1;i<13;i++)
        {
            if(i==yue)
            {
                str = str+"<option selected='selected' value='"+i+"'>"+i+"</option>";
            }
            else
            {
                str = str+"<option value='"+i+"'>"+i+"</option>";
            }
        }
        $("#yue").html(str);
    }
    
    //加载天
    function LoadTian()
    {
        var date = new Date();
        var tian = date.getDate();
        var yue = $("#yue").val();
        var nian = $("#nian").val();
        
        var zs = 31;
        if(yue==4 || yue==6 || yue==9 || yue==11)
        {
            zs = 30;
        }
        else if(yue==2)
        {
            if((nian%4==0 && nian%100!=0) || nian%400==0 )
            {
                zs = 29;
            }
            else
            {
                zs = 28;
            }
        }
        
        var str = "";
        for(var i=1;i<zs+1;i++)
        {
            if(i==tian)
            {
                str = str +"<option selected='selected' value='"+i+"'>"+i+"</option>";
            }
            else
            {
                str = str +"<option value='"+i+"'>"+i+"</option>";
            }
        }
        
        $("#tian").html(str);
        
    }

     

  • 相关阅读:
    Spring Boot+Vue 项目前端_Vuejs环境搭建
    vue+element 数据表格分页
    vue+elementui 实现新增和修改共用一个弹框
    Vue删除数据成功后如何刷新表格数据
    vue中使用echart绑定点击事件进行路由切换
    Vue的生命周期
    添加访问量插件
    Docker部署的Gitlab平行迁移到另一台服务器上
    GLEAN: Generative Latent Bank for Large-Factor Image Super-Resolution【阅读笔记】
    Learning Continuous Image Representation with Local Implicit Image Function【阅读笔记】
  • 原文地址:https://www.cnblogs.com/shenzikun1314/p/6548446.html
Copyright © 2011-2022 走看看