jquery做個日期選擇適用于手機端示例

2019-11-19 18:03:00

字體：大中小

來源：轉載

供稿：網友

第一步：做個文本框用于顯示年月日的

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

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

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());

注意，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>

js頁面

<!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頁面下面

// 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，當前年份加6、取前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);  }