简单的jQuery日期选择

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

点击文本框弹出一个选择框
引用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文件

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

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

时间: 2025-01-02 11:25:00

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

简单实用蓝色jQuery日期选择插件

$("#txtBeginDate").calendar({ controlId: "divDate", // 弹出的日期控件ID,默认: $(this).attr("id") + "Calendar" speed: 200, // 参数"slow","normal","fast",或毫秒数值,默认:200 complement: true, // 是否显示日期或年空白

Jquery 日期选择

1.首先将Jquery中的datepicker插件中的相关属性值改成中文的: $.datepicker.regional['zh-CN'] = { clearText: '清除', clearStatus: '清除已选日期', closeText: '关闭', closeStatus: '不改变当前选择', prevText: '<上月', prevStatus: '显示上月', prevBigText: '<<', prevBigStatus: '显示上一年', nextText: '

DatePicker - 日期选择插件

在一些WEB系统中,日期选择插件必不可少的功能,今天为大家分享几个不错的日期选择插件.希望对大家有所帮助. 1)My97DatePicker是一个更全面,更人性化,并且速度一流的日期选择控件.具有强大的日期范围限制功能:自定义事件和丰富的API库:多语言支持和自定义皮肤支持:跨无限级框架显示和自动选择显示位置. 主页: http://www.my97.net/dp/index.asp 演示地址: http://www.my97.net/dp/demo/index.htm 2)Date Range

基于jQuery滑动杆实现购买日期选择

这是一款基于jQuery的滑动杆购买日期选择插件,它的外观仿的是阿里云的服务器购买日期选择界面.这款jQuery插件非常适合在一些虚拟产品购买页面上使用,它可以帮助你的用户快速选择产品的购买日期,十分方便.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center> <div class="slider-date" id="slider-date-1"> <!--底层--> <ul class=&qu

【jquery】多日期选择插件easyui date

1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/download/index.php 4.汉化:建议在使用页面: <script type="text/javascript" src="你的网站绝对地址/locale/easyui-lang-zh_CN.js"></script> 5.使用Dem

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

第一步:做个 文本框用于显示年月日的 第二步:点击文本框触发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.t

038. asp.netWeb用户控件之六实现日期选择的用户控件

web用户控件的ascx代码: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="SelectDate.ascx.cs" Inherits="SelectDate" %> <script type="text/javascript" src="js/jquery.1.3.2.min.js"><

Jquery 日期控件

JQuery(2)  版权声明:本文为博主原创文章,未经博主允许不得转载. JQuery是一款非常优秀的脚本框架,其丰富的控件使用起来也非常简单,配置非常灵活.下面做一个使用日期插件datapicker的例子. 1.下载jQuery核心文件就不用说了吧,datepicker是轻量级插件,只需jQuery的min版本就行了,然后到官网http://jqueryui.com/download下载jquery-ui压缩包(可以选择喜欢的theme),里面就包含对datepicker的支持,当然您也可以

jQuery日期选择器插件date-input

官网:http://jonathanleighton.com/projects/date-input/ 下载: http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_input/raw/master/date_