jquery做個(gè)日期選擇適用于手機(jī)端示例
第一步:做個(gè) 文本框用于顯示年月日的
第二步:點(diǎn)擊文本框觸發(fā)bootstrap模態(tài)框并顯示
第三步:我是建一個(gè)外部js頁面寫的
js中獲得當(dāng)前時(shí)間是年份和月份,形如: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,則月份為數(shù)字,會(huì)和年份相加,如201210,則會(huì)變?yōu)?022,需要加.toString()
以下是搜到的有用內(nèi)容:
var myDate = new Date(); myDate.getYear(); //獲取當(dāng)前年份(2位) myDate.getFullYear(); //獲取完整的年份(4位,1970-????) myDate.getMonth(); //獲取當(dāng)前月份(0-11,0代表1月) myDate.getDate(); //獲取當(dāng)前日(1-31) myDate.getDay(); //獲取當(dāng)前星期X(0-6,0代表星期天) myDate.getTime(); //獲取當(dāng)前時(shí)間(從1970.1.1開始的毫秒數(shù)) myDate.getHours(); //獲取當(dāng)前小時(shí)數(shù)(0-23) myDate.getMinutes(); //獲取當(dāng)前分鐘數(shù)(0-59) myDate.getSeconds(); //獲取當(dāng)前秒數(shù)(0-59) myDate.getMilliseconds(); //獲取當(dāng)前毫秒數(shù)(0-999) myDate.toLocaleDateString(); //獲取當(dāng)前日期 var mytime=myDate.toLocaleTimeString(); //獲取當(dāng)前時(shí)間 myDate.toLocaleString( ); //獲取日期與時(shí)間
<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 時(shí)間:2017-01-09 描述:里面放內(nèi)容,點(diǎn)擊確定顯示 --> <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">關(guān)閉</button> <button type="button" class="btn btn-primary" id="sure">確定</button><!--把我要選的內(nèi)容扔到文本框里--> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div> </body> <script type="text/javascript"> //這是加載用的 $("#riqi").click(function(){ $('#myModal').modal('show');/*當(dāng)點(diǎn)擊文本框的時(shí)候,要觸發(fā)并顯示模態(tài)框*/ LoadNian();//調(diào)出的當(dāng)前年份 LoadYue();//調(diào)出的當(dāng)前月份 LoadTian();//調(diào)出的當(dāng)前天 }) //給年月加個(gè)事件。這是操作用的 $("#sure").click(function(){ var nian = $("#nian").val();//取到后吧這三個(gè)值扔到文本框里面 var yue = $("#yue").val(); var tian = $("#tian").val(); var str = nian+"-"+yue+"-"+tian;//把年月日拼字符串 $("#riqi").val(str); $('#myModal').modal('hide')//選完直接關(guān)閉模態(tài)框 }) </script> </html>
js頁面下面
// JavaScript Document //給年月加個(gè)事件要放上面 $(document).ready(function(e) {//當(dāng)年的選中項(xiàng)變的時(shí)候要從新選擇下天數(shù) $("#nian").change(function(){ LoadTian(); }) $("#yue").change(function(){//當(dāng)月份的下拉變化的時(shí)候也要從新加載下天數(shù) LoadTian(); }) }); //加載年份 function LoadNian() { var date=new Date; var year=date.getFullYear(); //獲取當(dāng)前年份 var str = ""; for(var i=year-5;i<year+6;i++)//從當(dāng)前年份減5,當(dāng)前年份加6、取前5年后5年//i就等于年份 { if(i==year)//默認(rèn)定位當(dāng)前年份 { str +="<option selected='selected' value='"+i+"'>"+i+"</option>";//默認(rèn)定位當(dāng)前年份 } 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)//當(dāng)前月份 { 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();//獲取當(dāng)前天 var zs = 31; //總天數(shù) var nian = $("#nian").val();//取當(dāng)前選中的年份 var yue = $("#yue").val();//取當(dāng)前選中的月份 if(yue == 4 || yue==6 || yue==9 || yue==11)//判斷什么情況下不等于31,有2個(gè)條件一個(gè)是年一個(gè)是月||或者當(dāng)月份等于4,6,9,11等于30天 { zs = 30; } else if(yue==2)//如果是2月 { if((nian%4==0 && nian%100 !=0) || nian%400==0)//普通年條件能被4整除并且不能被100整除?;蛘吣鼙?00整除就是潤年 { 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); }
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery移動(dòng)端日期(datedropper)和時(shí)間(timedropper)選擇器附源碼下載
- 基于jQuery滑動(dòng)桿實(shí)現(xiàn)購買日期選擇效果
- 貼近用戶體驗(yàn)的Jquery日期、時(shí)間選擇插件
- jQuery插件datepicker 日期連續(xù)選擇
- Jquery日期選擇datepicker插件用法實(shí)例分析
- JQuery EasyUI 日期控件如何控制日期選擇區(qū)間
- jQuery之日期選擇器的深入解析
- 基于jQuery的日期選擇控件
- datePicker——日期選擇控件(with jquery)
- jquery仿蘋果的時(shí)間/日期選擇效果
相關(guān)文章
jQuery(1.6.3) 中css方法對(duì)浮動(dòng)的實(shí)現(xiàn)缺陷分析
JavaScript中設(shè)置元素的浮動(dòng)屬性(float),標(biāo)準(zhǔn)瀏覽器使用cssFloat,IE舊版本使用styleFloat。2011-09-09詳解jQuery移動(dòng)頁面開發(fā)中的ui-grid網(wǎng)格布局使用
這篇文章主要介紹了jQuery移動(dòng)頁面開發(fā)中的ui-grid網(wǎng)格布局使用,以講解多列頁面布局方式為主,需要的朋友可以參考下2015-12-12jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)變寬的效果(附demo源碼)
這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)變寬的效果,實(shí)例演示了jQuery的Kwicks插件實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)與頁面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)文本框郵箱輸入自動(dòng)補(bǔ)全效果,大家無需輸入完全部郵箱信息,感興趣的小伙伴們可以參考一下2015-11-11