模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器
一:jquery、bootstrap实现日期下拉选择
点击文本框弹出窗口
弹窗显示日期时间选择下拉
年份取当前年份的前后各5年
天数随年份和月份的变化而变化
点击保存,文本框中显示选中的日期
代码部分的实现
引入bootstrap文件和外部js文件
<script src="../gongju/bootstrap-3.3.7-dist/js/jquery-1.11.2.min.js" type="text/javascript"></script> <script src="../gongju/bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript"></script> <script src="riqi.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="../gongju/bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
文本框、引入bootstrap弹窗代码
<body>
<input type="text" name="riqi" id="riqi" data-toggle="modal" data-target="#myModal"/> <!--给文本框定义id--> <!--弹窗部分-->
<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">
<!--弹窗主题内容--> </div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" id="baocun">保存</button>
</div>
</div>
</div>
</div>
</body>
外部js文件代码部分
$(document).ready(function(){
var str="<select id='nian'></select><select id='yue'></select><select id='ri'></select>";
$(".modal-body").html(str);
fillnian();
fillyue();
fillri(); /*年份变化时,调用月份和日期的方法*/
$("#nian").change(function(){
fillyue();
fillri();
})
/*月份变化时,调用天数的方法*/
$("#yue").change(function(){ fillri();
}) $("#baocun").click(function(){ /*点击保存,取select的value值,并添加到文本框*/
var nn=$("#nian").val();
var mm=$("#yue").val();
var ri=$("#ri").val(); $("#riqi").val(nn+"-"+mm+"-"+ri); }) /*下面分别是填充年份/月份/日期的方法*/
function fillnian()
{
var n=new Date();
var nian=parseInt(n.getFullYear());
var str="";
for(var i=nian-5;i<nian+6;i++)
{
str+="<option value='"+i+"'>"+i+"</option>"
}
$("#nian").html(str);
}
function fillyue()
{ var str="";
for(var i=1;i<;i++)
{
str+="<option value='"+i+"'>"+i+"</option>"
}
$("#yue").html(str);
}
function fillri()
{
var nn=$("#nian").val();
var mm=$("#yue").val();
var biao=31;
if(mm==4 || mm==6 ||mm==9 ||mm==11)
{ biao=30;
}
if(mm==2)
{
if((nn%4==0 && nn%100 != 0) || nn%400==0)
{
biao=29;
}else
{
biao=28;
}
}
var str="";
for(var i=1;i<biao+1;i++)
{
str+="<option value='"+i+"'>"+i+"</option>";
}
$("#ri").html(str);
}
})
二:bootstrap jquery UI自带动画的日期选择器
引入bootstrap jquery ui文件,直接引入下面几句话,不用改
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
代码实现部分
<body> <p>日期:<input type="text" id="datepicker"></p> </body> <script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
模块:(日期选择)jquery、bootstrap实现日期下拉选择+bootstrap jquery UI自带动画的日期选择器的更多相关文章
- Bootstrap系列 -- 15. 下拉选择框select
Bootstrap框架中的下拉选择框使用和原始的一致,多行选择设置multiple属性的值为multiple.Bootstrap框架会为这些元素提供统一的样式风格 <form role=&quo ...
- 基于jquery封装的颜色下拉选择框
应同事要求,花了半个小时,写了一个简单的选择颜色的下拉框控件,可以控制输入框指示结果颜色 也贴出来,说不定哪天有用 if (typeof jQuery === 'undefined') { throw ...
- JS(JQuery) 省市区三级联动下拉选择
引入 area.js /* * 全国三级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,i ...
- Bootstrap系列 -- 15. 下拉选择框select【转发】
<form role="form"> <div class="form-group"> <select class="f ...
- [原] XAF 添加日期筛选下拉选择
1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...
- jquery.chosen.js下拉选择框美化插件项目实例
由于之前使用的bootstrap-select插件是建立在bootstrap基础上的,实际使用到项目中的时候,与我们使用的ace-admin(基于bootstrap)存在样式冲突,导致下拉框的样式发生 ...
- 基于bootstrap的下拉选择 ( combox ) 输入 ( input ) 功能
需求: 在编辑数据的时候,既可以让用户输入,也可以从下拉框中选择 思路: 参照下面的效果图,因为是表格里面的数据,所以下拉框触发按钮和输入框分别为1列,输入列可以设置是否输入(方法:<td co ...
- FancySelect – 更好用的 jQuery 下拉选择框插件
FancySelect 这款插件是 Web 开发中下拉框功能的一个更好的选择.FancySelect 使用方便,只要绑定页面上的任何 Select 元素,并调用就 .fancySelect() 就可以 ...
- 基于jQuery美化联动下拉选择框
今天给大家介绍一款基于jQuery美化联动下拉选择框.这款下下拉选择框js里自带了全国所有城市的数数库.下拉选择框适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲 ...
随机推荐
- hdu 2242 无向图/求用桥一分为二后使俩个bcc点权值和之差最小并输出 /缩点+2次新图dfs
题意如标题所述, 先无向图缩点,统计出每个bcc权,建新图,然后一遍dfs生成树,标记出每个点(新图)以及其子孙的权值之和.这样之后就可以dfs2来枚举边(原图的桥),更新最小即可. 调试了半天!原来 ...
- hibernate中SQL包含冒号
当前负责的项目使用的是hibernate,而“:”是hibernate的一个占位符,作为预编译使用的, select tmp.pid from (select pid, loginTime, @i : ...
- centos7.3 开放端口 防火墙端口
1. 查看已打开的端口 # netstat -anp 2. 查看想开的端口是否已开 # firewall-cmd --query-port=666/tcp 若此提示 FirewallD is not ...
- Artix : Arch拥抱OpenRC 使用笔记
轻量桌面Archlinux用户逃离systemd,拥抱Gentoo的openrc. 镜像源:官方镜像源非常慢,曾经一度体验artix后就放弃了,后来发现了清华和腾讯云的镜像,速度非常快,现在又重新安装 ...
- 解决Ubuntu下gedit中文乱码的情况
windows下简体中文多用GBK编码 (或GB2312, GB18030), 而linux下多用UTF-8编码. 因此,一般来说在微软平台编辑的中文txt不能在ubuntu下直接打开查看,除非在保存 ...
- ylb: 数据库备份(Backup)和还原(Restore)
ylbtech-SQL Server:SQL Server- 数据库备份(Backup)和还原(Restore) -- ======================================== ...
- ASP.NET Web API是如何根据请求选择Action的?[上篇] 【转】
http://www.cnblogs.com/leo_wl/p/3316548.html ASP.NET Web API是如何根据请求选择Action的?[上篇] Web API的调用请求总是针对定义 ...
- 七天学会ASP.NET MVC (四)——用户授权认证问题 【转】
http://www.cnblogs.com/powertoolsteam/p/MVC_four.html 小编应各位的要求,快马加鞭,马不停蹄的终于:七天学会 Asp.Net MVC 第四篇出炉,在 ...
- java Excel导入、自适应版本、将Excel转成List<map>对象
转载:http://blog.csdn.net/u012662357/article/details/58593020 最近在web开发中遇到excel批量导入,在网上搜了下很少有将excel直接转成 ...
- ANT安装及配置
首先,到http://ant.apache.org/找到合适的版本下载. 其次,讲下载的zip包解压,得到的目录拷贝到硬盘,如C:\apache-ant-1.9.4 其三,设置环境变量 ANT_HOM ...