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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
CSS+Jquery实现页面圆角框方法大全
Dec 24 Javascript
toString()一个会自动调用的方法
Feb 08 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
JavaScript中的各种操作符使用总结
May 26 Javascript
Web打印解决方案之普通报表打印功能
Aug 29 Javascript
vue从使用到源码实现教程详解
Sep 19 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
如何检查一个对象是否为空
Apr 11 Javascript
如何实现双向绑定mvvm的原理实现
May 28 Javascript
React中使用UMEditor的方法示例
Dec 27 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 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 session应用实例 登录验证
2009/03/16 PHP
PHP实现数字补零功能的2个函数介绍
2014/05/12 PHP
php简单的上传类分享
2016/05/15 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
Js-$.extend扩展方法使方法参数更灵活
2013/01/15 Javascript
Json序列化和反序列化方法解析
2013/12/19 Javascript
浏览器窗口加载和大小改变事件示例
2014/02/27 Javascript
分享一则JavaScript滚动条插件源码
2015/03/03 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
jQuery简单实现MD5加密的方法
2017/03/03 Javascript
d3.js入门教程之数据绑定详解
2017/04/28 Javascript
JS返回页面时自动回滚到历史浏览位置
2018/09/26 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
通过js实现压缩图片上传功能
2020/02/25 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Python处理文本文件中控制字符的方法
2017/02/07 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
家长给孩子的表扬信
2014/01/17 职场文书
《在山的那边》教学反思
2014/02/23 职场文书
搞笑婚礼主持词
2014/03/13 职场文书
科学发展观演讲稿
2014/09/11 职场文书
违反单位工作制度检讨书
2014/10/25 职场文书
高考作弊检讨书1500字
2015/02/16 职场文书
python 远程执行命令的详细代码
2022/02/15 Python
多人盗宝《绿林侠盗》第三赛季4.5上线 跨平台实装
2022/04/03 其他游戏
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
js判断两个数组相等的5种方法
2022/05/06 Javascript
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers