jquery作個日期選擇適用於手機端

時間 2019-11-12

原文原文鏈接

第一步：作個文本框用於顯示年月日的javascript

第二步：點擊文本框觸發bootstrap模態框並顯示php

第三步：我是建一個外部js頁面寫的css

js中得到當前時間是年份和月份，形如：201208

//獲取完整的日期
var date=new Date;
var year=date.getFullYear();
var month=date.getMonth()+1;
month =(month<10 ? "0"+month:month);
var mydate = (year.toString()+month.toString());html

注意，year.toString()+month.toString()不能寫成year+month。否則若是月份大於等於10，則月份爲數字，會和年份相加，如201210，則會變爲2022，須要加.toString()java

如下是搜到的有用內容：jquery

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( ); //獲取日期與時間bootstrap

<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>jsp

PHP頁面ide

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="jquery-1.11.2.min.js" ></script>
	<script src="bootstrap.min.js" ></script>
	<script src="riqi.js"></script>
	<link href="bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
	<input type="text" id="riqi" style="margin-top: 20px; margin-left: 100px;" />
	
	<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">×</button>
                <h4 class="modal-title" id="myModalLabel">日期選擇</h4>
            </div>
            <div class="modal-body">
                                    <!--
                                    	做者：511108312@qq.com
                                    	時間：2017-01-09
                                    	描述：裏面放內容，點擊肯定顯示
                                    -->
            	<select id="nian"><!--年-->
                </select>
                <select id="yue"><!--月-->
                </select>
                <select id="tian"><!--天-->
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>
                <button type="button" class="btn btn-primary" id="sure">肯定</button><!--把我要選的內容扔到文本框裏-->
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
</body>
<script type="text/javascript">
//這是加載用的
$("#riqi").click(function(){
		$('#myModal').modal('show');/*當點擊文本框的時候，要觸發並顯示模態框*/
		LoadNian();//調出的當前年份
		LoadYue();//調出的當前月份
		LoadTian();//調出的當前天
	})
//給年月加個事件。這是操做用的
$("#sure").click(function(){
		var nian = $("#nian").val();//取到後吧這三個值扔到文本框裏面
		var yue = $("#yue").val();
		var tian = $("#tian").val();
		
		var str = nian+"-"+yue+"-"+tian;//把年月日拼字符串
		$("#riqi").val(str);
		$('#myModal').modal('hide')//選完直接關閉模態框
	})


</script>
</html>

js頁面下面spa

// JavaScript Document
//給年月加個事件要放上面
$(document).ready(function(e) {//當年的選中項變的時候要重新選擇下天數
    $("#nian").change(function(){
			LoadTian();
		})
	$("#yue").change(function(){//當月份的下拉變化的時候也要重新加載下天數
			LoadTian();
		})
});

//加載年份
function LoadNian()
{
	var date=new Date;
 	var year=date.getFullYear(); //獲取當前年份
	
	var str = "";
	
	for(var i=year-5;i<year+6;i++)//從當前年份減5，當前年份加六、取前5年後5年//i就等於年份
	{
		if(i==year)//默認定位當前年份
		{
			str +="<option selected='selected' value='"+i+"'>"+i+"</option>";//默認定位當前年份
		}
		else
		{
			str +="<option value='"+i+"'>"+i+"</option>";
		}
	}
	
	$("#nian").html(str);//找到ID等於nian的下拉把option扔裏面，option等於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 +="<option selected='selected' value='"+i+"'>"+i+"</option>";
		}
		else
		{
			str +="<option value='"+i+"'>"+i+"</option>";
		}
	}
	$("#yue").html(str);
}

//加載天
function LoadTian()
{
	var date=new Date;
	var tian = date.getDate();//獲取當前天
	
	var zs = 31; //總天數
	var nian = $("#nian").val();//取當前選中的年份
	var yue = $("#yue").val();//取當前選中的月份
	if(yue == 4 || yue==6 || yue==9 || yue==11)//判斷什麼狀況下不等於31，有2個條件一個是年一個是月||或者當月份等於4，6，9，11等於30天
	{
		zs = 30;
	}
	else if(yue==2)//若是是2月
	{
		if((nian%4==0 && nian%100 !=0) || nian%400==0)//普通年條件能被4整除而且不能被100整除。或者能被400整除就是潤年
		{
			zs = 29;
		}
		else
		{
			zs = 28;
		}
	}
	
	var str = "";
	
	for(var i=1;i<zs+1;i++)
	{
		if(i==tian)
		{
			str +="<option selected='selected' value='"+i+"'>"+i+"</option>";
		}
		else
		{
			str +="<option value='"+i+"'>"+i+"</option>";
		}
	}
	
	$("#tian").html(str);
	
}