简单的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文件
在文本框里显示选择的年月日
给模态框里的确认按钮加点击事件
取年月日的值拼成字符串找到文本框把取好的值文本框内
简单的jQuery日期选择的更多相关文章
- 贴近用户体验的jQuery日期选择插件
分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览 源码下载 var dateRange = new ...
- JQuery 日期选择框
一 jeDate日期控件,关于官方的文档请查看: http://www.jayui.com/jedate/ 1 引入js文件 <script type="text/javascr ...
- 打造基于jQuery的日期选择控件
终于把jQuery拼写正确了哈,哈哈javascript也是区分大小写的,所以确实不能写错,今天我来和大家分享的是日期选择控件的实现,功能也许不够强大,但是能够满足需求. 我之前也写过(正确的说是改过 ...
- 多日期选择jQuery插件 MultiDatesPicker for jQuery UI
Multiple-Dates-Picker-for-jQuery-UI是一个多日期选择的jquery控件. GIT源码: https://github.com/dubrox/Multiple-Da ...
- jquery easyui datebox单击文本框显示日期选择
jquery easyui的datebox日历控件,实现单击文本框出现日历选择,如下图: 代码: 修改jquery.easyui.min.js第9797行函数(jQuery EasyUI 1.3.2) ...
- JQuery好用的日期选择控件 DatePicker
近期发现一个很好的基于JQ的前端UI日期选择控件Jquery.DatePicker.js 下载地址:jquery.DatePIcker.js 演示地址:DatePicker - 基于jQuery 1. ...
- 移动设备日期选择插件(基于JQUERY)
上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...
- 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)
1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...
- DCalendar增加月份选择功能--简单jQuery日期选择器插件改动
做时间插件的时候,很多都会遇到要做选择月份的插件,但是DCalendar提供的api只支持日期选择,最近遇到这个问题,所以调整了一下源码,话不多说,先看效果吧 点击日期插件,出现上图,再点击月份就直接 ...
随机推荐
- JS正则表达式验证账号、手机号、电话、邮箱、货币
验证帐号是否合法验证规则:字母.数字.下划线组成,字母开头,4-16位. function checkUser(str){ var re = /^[a-zA-z]\w{3,15}$/; if(re.t ...
- 【USACO 1.4.1】铺放矩形块
[描述] 给定4个矩形块,找出一个最小的封闭矩形将这4个矩形块放入,但不得相互重叠.所谓最小矩形指该矩形面积最小. 所有4个矩形块的边都与封闭矩形的边相平行,图1示出了铺放 ...
- Redis学习 - 入门
业精于勤,荒于嬉:行成于思,毁于随 -- 韩愈·<进学解> 因为工作中需要用到Redis,所以最近抽点时间看了一下,现在将学习的内容整理一下. 一.简介 1.Redis是什么? R ...
- 获取fragment中的控件的写法
package com.example.baoxiu.fragment;import com.example.baoxiu.R;import com.example.baoxiu.Register;i ...
- 初涉JavaScript模式 (12) : 沙箱模式
引子 上一篇说了模块模式,而对于其中的命名空间模式其实也是有着一些问题,比如每添加一个模块或则深入叠加都会导致长命名,并且对于多个库的不同版本同时运行,一不小心就会污染全局标识,而这两天也发现了JSe ...
- 136 Single Number(找唯一数Medium)
题目意思:一个int数组,有一个数只出现一次,其他数均出现两次,找到这个唯一数 知识普及:~:非运算,单目运算符1为0,0为1; &:与运算,都为1则为1,否则为0 |:或运算,全为0则为 ...
- yii2源码学习笔记
assets 前端资源文件夹,用于管理css js等前端资源文件等 commands 包含命令行命令,文件为控制器文件 config 应用的配置文件 controllers 控制器文件 mai ...
- JS浮点数运算Bug
JS浮点数运算Bug的解决办法(转) 37.5*5.5=206.08 (JS算出来是这样的一个结果,我四舍五入取两位小数) 我先怀疑是四舍五入的问题,就直接用JS算了一个结果为:206.0849999 ...
- PHP进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- C# ORM—Entity Framework 之Code first(代码优先)(二)
一.Entity Framework Code first(代码优先)使用过程 1.1Entity Framework 代码优先简介 不得不提Entity Framework Code First这个 ...