js日期联动示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js"></script>
<script>
$(function(){
$('#year').change(function(){
if (ifLeapYear($(this).val()))
{
if ($('#month').val() == 2 && $('#day').children().length == 29)
{
$('#day').append('<option value="29">29</option>');
}
} else
{
if ($('#month').val() == 2 && $('#day').children().length == 30)
{
$('#day :last-child').remove();
}
}
});
$('#month').change(function(){
var thisValue = $(this).val();
var dayValue = $('#day').val();
var month1 = ['4','6','9','11'];
$('#day').html('<option value="">-请选择-</option>');
var day = '';
if (thisValue == '')
{
return false;
}
if ($.inArray(thisValue, month1) != -1)
{
day = setDay(30);
$('#day').append(day);
} else if ($(this).val() == '2')
{
if ($('#year').val() != '' && ifLeapYear($('#year').val()))
{
day = setDay(29);
} else
{
day = setDay(28);
}
$('#day').append(day);
} else
{
day = setDay(31);
$('#day').append(day);
}
$('#day').find('option[value='+dayValue+']').attr('selected',true);
});
})
function setDay(day)
{
var dayInfo = '';
for (var i=1; i<=day; i++)
{
dayInfo += '<option value="' + i +'">' + i+ '</option>';
}
return dayInfo;
}
function ifLeapYear(year)
{
if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0)
{
return true;
} else
{
return false;
}
}
</script>
<select id="year"><option value="">-请选择-</option>
<?php for ($i=1980;$i<2012;$i++){ ?>
<option value="<?php echo $i ?>"><?php echo $i ?></option>
<?php } ?>
</select>年
<select id="month"><option value="">-请选择-</option>
<?php for ($i=1;$i<=12;$i++){ ?>
<option value="<?php echo $i ?>"><?php echo $i ?></option>
<?php } ?>
</select>月
<select id="day"><option value="">-请选择-</option></select>日
相关推荐
-
基于JQuery的日期联动实现代码
实现目标: 两个日期,有下拉框: 复制代码 代码如下: <head> //导入jquery地址 <script src="(Jquery地址)" language="JavaScript" type="text/javascript"></script> <script type="text/javascript"> //startYear发生变化 function change
-
js简单的年月联动实现代码
HTML 复制代码 代码如下: <SELECT NAME="SelTjYear"> </SELECT> <SELECT NAME="SelTjMonth"> </SELECT> 源码: 复制代码 代码如下: function vYearMonth(yearObjId, monthObjId) { var selYear = document.getElementById(yearObjId); var selMonth
-
jquery select操作的日期联动实现代码
Jquery的选择器很强大,对select的options对象添加的时候我找了老半天才找到 复制代码 代码如下: /**//* 文件名:jquery.liu.select.js 功能说明:本js文件为jquery类库的一个插件,主要实现对select的操作. 作者:John Liu 编写日期:2008/03/12 */ //得到select项的个数 jQuery.fn.size = function() { return jQuery(this).get(0).options.length; }
-
原生js实现日期联动
月份的判定,由于涉及到过多了判定条件,如果用if else会大大降低性能,建议用switch 语法 代码如下: 复制代码 代码如下: getDays:function(year,month){ // var aDay = [31,28|29,31,30,31,30,31,31,30,31,30,31]; // 二月份的天数数据处理 var FedDays = year%4==0?29:28, returnDays = ''
-
javascript 日期联动选择器 [其中的一些代码值得学习]
DateSelector body { margin: 0px; padding: 0px; font-size: 12px; } #year, #month, #date{ width: 60px; margin-right: 3px; } var $ = function(id) { return 'string' == typeof id ? document.getElementById(id) : id; }; var Extend = function(destination, so
-
javascript 年月日联动实现核心代码
复制代码 代码如下: var StartYear = 1980; var EndYear = 2500; function MonthAndDay() { this.initDDL = function(objYear,objMonth,objDay,hidYear,hidMonth,hidDay) { this.init(objYear,objMonth,objDay,hidYear,hidMonth,hidDay); this.SelectChange(objYear,objMonth,ob
-
js日期联动示例
调试需加入jquery文件 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv=&q
-
Js日期选择器并自动加入到输入框中示例代码
复制代码 代码如下: <html> <head> <title>Js日期选择器并自动加入到输入框中</title> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <script type="text/javascript"> var gMonths=new Array("一月&
-
vue学习之mintui picker选择器实现省市二级联动示例
本文介绍了vue学习之mintui picker选择器实现省市二级联动示例,分享给大家,具体如下: Mint UI 使用文档:https://mint-ui.github.io/docs/#/zh-cn2 Popup弹出框介绍:https://mint-ui.github.io/docs/#/zh-cn2/popup Picker选择器介绍:https://mint-ui.github.io/docs/#/zh-cn2/picker Datetime picker日期选择器介绍:https://
-
基于javascript bootstrap实现生日日期联动选择
本文实例为大家分享了js实现日期联动选择的相关代码,适用于生日的选择,供大家参考,具体内容如下 实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间.否则为空.年默认区间段为1900年到当今年份 本人使用了bootstrap,class请参照bootstrap的相关说明 下面是html 内容: <div class="col-sm-9"> <label cl
-
jQuery实现日期联动效果实例
本文实例讲述了jQuery实现日期联动效果的方法.分享给大家供大家参考,具体如下: 实现目标: 两个日期,有下拉框: <head> //导入jquery地址 <script src="jquery-1.7.2.min.js" language="JavaScript" type="text/javascript"></script> <script type="text/javascript&q
-
JS三级联动代码格式实例详解
这篇文章主要介绍了JS三级联动代码格式实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 实现js多级联动的代码格式 <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </h
-
Three.js引入Cannon.js及使用示例详解
目录 引言 大体代码及效果 Cannon.js 打造当前 UI 引言 在开始之前,我们还是要解释下什么是 Cannon.js 以及它的作用. Cannon.js 是一个 3D 物理引擎,通过为物体赋予真实的物理属性的方式来计算运动.旋转和碰撞检测.Cannon.js 相较于其他常见的物理引擎来说,比较轻量级而且完全通过 JavaScript 来实现. Cannon.js 的官方文档地址为 schteppe.github.io/cannon.js/ ,从官方介绍中也可以看到很多有趣的例子,如下所示
-
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
本文介绍了vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动) 先去下载一个"省份.城市.区县.乡镇" 四级联动数据,然后 引入 import { Picker } from 'mint-ui'; //前提是npm install mint-ui -S Vue.component(Picker.name, Picker); 组件使用 <mt-picker :slots="addressSlots" class="picke
-
js日期范围初始化得到前一个月日期的方法
本文实例讲述了js日期范围初始化得到前一个月日期的方法.分享给大家供大家参考.具体分析如下: 今天做时间范围的初始化设定,开始时间是当前时间的前一个月,终于找到完美的解决方案了. Date.prototype.format = function(format) { var o = { "M+" : this.getMonth() + 1, // month "d+" : this.getDate(), // day "h+" : this.get
-
JS 日期与时间戮相互转化的简单实例
1.日期格式转时间戮 function getTimestamp(time) { return Date.parse(new Date(time)); } 2.时间戮转日期格式 function transformPHPTime(time) { var date = new Date(time * 1000); Y = date.getFullYear() + '-'; M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.ge