建立一个存放日期的文本框

点击文本框弹出一个选择框
引用jQuery文件
引用bootstrap文件

使用模态框

使用模态框的方法设置点击文本框显示模态框
手动打开模态框的方法:
$('id').modal('show');
关闭:(点击确定后会自动关闭)
$('id').modal('hide')
填充数据,建立一个外部js文件

js方法:

加载年份
function LoadNian()
{
var date=new Date;
var year=date.getFullYear();

var str = "";

for(var i=year-5;i<year+6;i++) for循环设置当前年份的前五年到后五年
{
if(i==year) 定位当前年份
{
str +="<option selected='selected' value='"+i+"'>"+i+"</option>";
}
else
{
str +="<option value='"+i+"'>"+i+"</option>";
}
}

$("#nian").html(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) 判断如果是4、6、9、11月那就是30天
{
zs = 30;
}
else if(yue==2) 判断如果是2月继续判断年份
{
if((nian%4==0 && nian%100 !=0) || nian%400==0) 被四整除并且不能被一百整除为闰年
{
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);

}

$(document).ready(function(e) {
$("#nian").change(function(){ change事件当年发生变化重新加载天数
LoadTian();
})
$("#yue").change(function(){ 当月发生变化重新加载天数
LoadTian();
})
});

引入外部js文件

在文本框里显示选择的年月日

给模态框里的确认按钮加点击事件
取年月日的值拼成字符串找到文本框把取好的值文本框内

简单的jQuery日期选择的更多相关文章

  1. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...

  2. JQuery 日期选择框

    一    jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 1 引入js文件 <script type="text/javascr ...

  3. 打造基于jQuery的日期选择控件

    终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...

  4. 多日期选择jQuery插件 MultiDatesPicker for jQuery UI

    Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件.   GIT源码: https://github.com/dubrox/Multiple-Da ...

  5. jquery easyui datebox单击文本框显示日期选择

    jquery easyui的datebox日历控件,实现单击文本框出现日历选择,如下图: 代码: 修改jquery.easyui.min.js第9797行函数(jQuery EasyUI 1.3.2) ...

  6. JQuery好用的日期选择控件 DatePicker

    近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...

  7. 移动设备日期选择插件(基于JQUERY)

    上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...

  8. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

  9. DCalendar增加月份选择功能--简单jQuery日期选择器插件改动

    做时间插件的时候,很多都会遇到要做选择月份的插件,但是DCalendar提供的api只支持日期选择,最近遇到这个问题,所以调整了一下源码,话不多说,先看效果吧 点击日期插件,出现上图,再点击月份就直接 ...

随机推荐

  1. PHP 网页爬虫

    只能爬一个页面 <?php function get_urls($url){ $url_array=array(); $the_first_content=file_get_contents($ ...

  2. sql 学习笔记 p46

    交换行 update tab1 set c1=c2,c2=c1  .说明sql是临时表的存储,在查询出来的结果为决定前,可以随意操纵临时表中的列 update tab set c1=c1+(selec ...

  3. caption标签,为表格添加标题和摘要

    表格还是需要添加一些标签进行优化,可以添加标题和摘要.代码如下: 摘要 摘要的内容是不会在浏览器中显示出来的.它的作用是增加表格的可读性(语义化),使搜索引擎更好的读懂表格内容,还可以使屏幕阅读器更好 ...

  4. wpf 控件复制 克隆

    方法1: string xaml = System.Windows.Markup.XamlWriter.Save(rtb1); RichTextBox rtb2 =System.Windows.Mar ...

  5. 通过dbcp链接池对数据库操作报 Cannot create PoolableConnectionFactory (Could not create connection to database server. Attempted reconnect 3 times. Giving up.)--解决方案

    org.springframework.transaction.CannotCreateTransactionException: Could not open JDBC Connection for ...

  6. mysql操作1

    一.连接MYSQL.格式: mysql -h主机地址 -u用户名 -p用户密码1.连接到本机上的MYSQL.首先打开DOS窗口,然后进入目录mysql\bin,再键入命令mysql -u root - ...

  7. Linux下的Job Control(转:http://blog.chinaunix.net/uid-26495963-id-3062757.html)

    一.Job的概念 Job是指在批处理的环境中,为完成某一任务而进行一系列操作的总称.在个人接触计算机的年代,批处理的环境已经不容见到了,只有一些特殊的行业和环境下还在使用这样的概念,仅在书本中接触过. ...

  8. 百度上传插件WebUploader,angularjs指令封装

    1.WebUploader特点 官网地址:http://fex.baidu.com/webuploader/ 1.1 分片.并发 分片与并发结合,将一个大文件分割成多块,并发上传,极大地提高大文件的上 ...

  9. php常用的排序算法与二分法查找

    一 : 归并排序 将两个的有序数列合并成一个有序数列,我们称之为"归并".归并排序(Merge Sort)就是利用归并思想对数列进行排序.根据具体的实现,归并排序包括"从 ...

  10. location对象,将url解析为独立片段search属性截取传递的参数

    通过location对象的search属性截取字符串传递过来的参数 search ?item=hello&name=auto&age=25 返回url中传递的参数,以?开头 funct ...