jquery做个日期选择适用于手机端示例


Posted in Javascript onJanuary 10, 2017

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

第二步:点击文本框触发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);

  

}

jquery做个日期选择适用于手机端示例

jquery做个日期选择适用于手机端示例

jquery做个日期选择适用于手机端示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript模板技术
Apr 27 Javascript
传智播客学习之java 反射
Nov 22 Javascript
js关闭子窗体刷新父窗体实现方法
Dec 04 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
js实现前端图片上传即时预览功能
Aug 02 Javascript
js对象数组和对象的使用实例详解
Aug 27 Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 jQuery
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
javascript删除html标签函数cIsHTML
Jan 09 #Javascript
jQuery.parseHTML() 函数详解
Jan 09 #Javascript
微信小程序 用户数据解密详细介绍
Jan 09 #Javascript
微信小程序 摇一摇抽奖简单实例实现代码
Jan 09 #Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 #Javascript
Bootstrap实现渐变顶部固定自适应导航栏
Aug 27 #Javascript
微信小程序 实战程序简易新闻的制作
Jan 09 #Javascript
You might like
PHP 批量删除 sql语句
2009/06/05 PHP
Server.HTMLEncode让代码在页面里显示为源代码
2013/12/08 PHP
php实现猴子选大王问题算法实例
2015/04/20 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
使用PHP开发留言板功能
2019/11/19 PHP
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
javascript中的onkeyup和onkeydown区别介绍
2013/04/28 Javascript
jQuery的$.proxy()应用示例介绍
2014/04/03 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
jquery实现网页定位导航
2016/08/23 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
2017/11/08 jQuery
详解vue 数据传递的方法
2018/04/19 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
在Python中操作文件之read()方法的使用教程
2015/05/24 Python
Python将列表数据写入文件(txt, csv,excel)
2019/04/03 Python
使用python将mysql数据库的数据转换为json数据的方法
2019/07/01 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
css3和jquery实现自定义checkbox和radiobox组件
2014/04/22 HTML / CSS
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
amazeui 验证按钮扩展的实现
2020/08/21 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
装饰活动策划方案
2014/02/11 职场文书
安全生产中长期规划实施方案
2014/02/21 职场文书
会务接待方案
2014/02/27 职场文书
主管会计岗位职责
2014/03/13 职场文书
会计学自荐信
2014/06/03 职场文书
2014年审计人员工作总结
2014/12/19 职场文书
2014年医院党建工作总结
2014/12/20 职场文书
优秀团员事迹材料
2014/12/25 职场文书
贴吧吧主申请感言
2015/08/03 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书