js 联动实现日期选择,一般用作生日
实现目标:年月日三个select 输入框,以及一个hidden的input,通过js获取input的值,如果有值切是日期格式,年月日select为input中的时间。否则为空。年默认区间段为1900年到当今年份
本人使用了bootstrap,class请参照bootstrap的相关说明
下面是html 内容:
<div class="col-sm-9">
<label class="checkbox-inline">
<select node-type="birthday_year" name="birthday_y" id="birthday_y">
<option value=""></option> </select><span>年</span>
</label>
<label class="checkbox-inline">
<select node-type="birthday_month" name="birthday_m" id="birthday_m">
<option value=""></option> </select><span>月</span>
</label>
<label class="checkbox-inline">
<select node-type="birthday_month" name="birthday_d" id="birthday_d">
<option value=""></option> </select><span>日</span>
</label>
<input type="hidden" name="birth" id="birth" value="2016/2/12">
<label class='checkbox-inline text-warning hidden' id="birth_error_info"><i class='fa fa-warning'>请输入完整生日</i></label>
</div>
下面是js 的实现:
//设置生日的转换和获取 var date=new Date();
var year=date.getFullYear();
for(var i=year;i>=1900;i--){
$("#birthday_y").append("<option value="+i+" label="+i+">"+i+"</option>");
} $('#birthday_y').change(function(){
var birth_year=$('#birthday_y').val();
if(birth_year!=""){
var birth_month=$('#birthday_m').val();
if(birth_month!=""){
if(birth_month=="2"){
if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){
$("#birthday_d").append("<option value=" + 29 + " label=" + 29 + ">" + 29 + "</option>");
}else{
$("#birthday_d option[value='29']").remove();
}
}
}else {
for (var i = 1; i <= 12; i++) {
$("#birthday_m").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
}
}
}else{
$("#birthday_m").html("<option value=''></option>");
$("#birthday_d").html("<option value=''></option>");
}
checkBirthday();
});
$('#birthday_m').change(function(){
var birth_year=$('#birthday_y').val();
var birth_month=this.value;
var birth_day=$('#birthday_d').val();
if(birth_month!=""){
switch (birth_month){
case "1":case "3":case "5":case "7":case "8":case "10":case "12":
if(birth_day=="") {
$("#birthday_d").empty();
$("#birthday_d").append("<option value='' ></option>");
for (var i = 1; i <= 31; i++) {
$("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
}
}else {
switch ($("#birthday_d option:last").attr("value")){
case "28":$("#birthday_d").append("<option value=" + 29 + " >" + 29 + "</option>");
case "29":$("#birthday_d").append("<option value=" + 30 + " >" + 30 + "</option>");
$("#birthday_d").append("<option value=" + 31 + " >" + 31 + "</option>");break;
case "30":$("#birthday_d").append("<option value=" + 31 + " >" + 31 + "</option>");
break;
default :break; }
}
break;
case "4":case "6":case "9": case "11":
if(birth_day=="") {
$("#birthday_d").empty();
$("#birthday_d").append("<option value='' ></option>");
for (var i = 1; i <= 30; i++) {
$("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
}
}else{
switch ($("#birthday_d option:last").attr("value")){
case "28":$("#birthday_d").append("<option value=" + 29 + " >" + 29 + "</option>");
case "29":$("#birthday_d").append("<option value=" + 30 + " >" + 30 + "</option>");
case "31":$("#birthday_d option[value='31']").remove();
break;
default :break; }
}
break;
case "2":
if(birth_day==""){
if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){
for(var i=1;i<=29;i++){
$("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>");
}
}else{
for(var i=1;i<=28;i++){
$("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>");
}
}}else{
$("#birthday_d option[value='31']").remove();
$("#birthday_d option[value='30']").remove();
if((birth_year%4==0 && birth_year%100!=0) || (birth_year%400==0)){ }else{
$("#birthday_d option[value='29']").remove();
}
}
break;
default :break;
} }
checkBirthday();
}); $('#birthday_d').change(function() {
checkBirthday();
}
);
$('#birthday_d').focus(
function(){
if($('#birthday_m').val()==""){
$("#birthday_d").empty();
$("#birthday_d").append("<option value='' ></option>");
}
}
); //根据后台提供的数据,填充用户的值
var birth_value=$('#birth').val();
if(birth_value!="") {
var date1 = new Date(birth_value);
var b_year=date1.getFullYear();
var b_month=date1.getMonth()+1;
var b_day=date1.getDate();
$("#birthday_y").find("option[value='"+b_year+"']").attr("selected","selected");
if($('#birthday_y').val()!="") {
for (var i = 1; i <= 12; i++) {
$("#birthday_m").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
}
}
$("#birthday_m").find("option[value='"+b_month+"']").attr("selected","selected");
switch (b_month){
case 1:case 3:case 5:case 7:case 8:case 10:case 12:
for (var i = 1; i <= 31; i++) {
$("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
}
break;
case 4:case 6:case 9: case 11: $("#birthday_d").append("<option value='' ></option>");
for (var i = 1; i <= 30; i++) {
$("#birthday_d").append("<option value=" + i + " label=" + i + ">" + i + "</option>");
}
break;
case 2:
if((b_year%4==0 && b_year%100!=0) || (b_year%400==0)){
for(var i=1;i<=29;i++){
$("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>");
}
}else{
for(var i=1;i<=28;i++){
$("#birthday_d").append("<option value="+i+" label="+i+">"+i+"</option>");
}
}
break;
default :break;
}
$("#birthday_d").find("option[value='"+b_day+"']").attr("selected","selected");
} //验证生日是否输入完整
function checkBirthday(){
var b_year= $('#birthday_y').val();
var b_month=$('#birthday_m').val();
var b_day=$('#birthday_d').val();
if(b_year!=""&&b_month!=""&&b_day!=""){
$('#birth').val(b_year+"-"+b_month+"-"+b_day);
$('#birth_error_info').addClass("hidden");
}else{
$('#birth').val("");
$('#birth_error_info').removeClass("hidden");
}
}
仅供参考,欢迎批评指正!
js 联动实现日期选择,一般用作生日的更多相关文章
- 利用select实现年月日三级联动的日期选择效果
× 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...
- angularjs之ui-bootstrap的Datepicker Popup不使用JS实现双日期选择控件
最开始使用ui-bootstrap的Datepicker Popup日期选择插件实现双日期选择时间范围时,在网上搜了一些通过JS去实现的方法,不过后来发现可以不必通过JS去处理,只需要使用其自身的属性 ...
- 纯原生js移动端日期选择插件
最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...
- 纯原生js移动端城市选择插件
接着上一篇纯js移动端日期选择插件,话说今天同事又来咨询省市县联动的效果在移动端中如何实现,还是老样子,百度上一搜,诶~又全是基于jquery.zepto的,更加可恨的是大多数都是PC版的,三个sel ...
- 移动端iscroll实现日期选择
哎,说多了都是泪: 引入相关JS文件 <script type="text/javascript" src="js/jquery-1.9.1.min.js" ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js日期选择控件
// 日期选择 // By Ziyue(http://www.web-v.com/) // 使用方法: // <script type="text/javascript" s ...
- js 跨域的问题 (同一个主域名不同的二级域名下的跨域问题) 解决 WdatePicker.js my97日期选择控件
例如域名是 a.xx.com 和 b.xx.com 如果一个页面中引入多个iframe,要想能够操作所有iframe,必须都得设置相同domain. 如果iframe的时候 a包含b 为 ...
- [Ext JS 4] 实战之 带week(星期)的日期选择控件(三)
前言 在 [Ext JS 4] 实战之 带week(星期)的日期选择控件(二) 的最后,有提到一个解决方案. 不过这方案有一个条件 ==> “2. 每年的周数从(1-52), 如果超过52 周 ...
随机推荐
- XmlReader在序列化中的使用
和XmlDocument最大的不同——XmlReader逐行读取.单独很少使用,一般配合序列化(反序列化)使用,以下给出具体例子: namespace ConsoleApplication1 { pu ...
- php根据IP获取所在省份-百度api接口
这里用的file_put_contents,你也可以用别的,直接怼代码: //拼接传递的参数 $getData = array( 'query' => '127.0.0.1', 'resourc ...
- [转]微信小程序填坑之路之使用localhost在本地测试
本文转自:http://www.wxappclub.com/topic/798
- SpringBoot 开启debug
项目基于gradle ,今天想断点debug一下springboot,查阅资料后,纪录一下步骤. 创建Remote 创建gradle.properities 在当前项目下创建gradle.proper ...
- Error -4075: File not found. An error occurred merging module <MODULENAME> for feature <FEATURENAME>.
利用Install Shield2010制作安装包的时候一直报这样的错误,原以为是我自己安装包制作流程的问题,又重新做了2个,但是还是出现问题. 解决办法: 查找资料发现是Install Shield ...
- 阿里Java开发电话面试经历--惨败
近期准备跳槽,想试试知名大企业--阿里.经过boss直聘上一些内部人员的内推,有幸获得了一次电话面试的机会.(虽然在面试开始之前就大概知道结果是如何,但是也总得试试自己个有多水,哈哈哈...) 跟大家 ...
- Asp.NET MVC4 + Ajax 实现多文件上传
本文转自http://www.cnblogs.com/freeliver54/archive/2013/05/15/3079700.html JS部分测试可以,jQuery部分没有测试先留着 HTML ...
- 对Mybatis的初步认识
1.认识Mybatis MyBatis 是支持普通 SQL 查询,存储过程和高级映射的优秀持久层框架. MyBatis 消除了几乎所有的 JDBC 代码和参数的手工设置以及对结果集的检索. MyBat ...
- mysql 的用法
SELECT CASEWHEN //当count(userId) = 0的时候 让其为null 不然报警告 // count(DISTINCT userId) 不用处理 count(userId ...
- JavaEE之Http协议和Tomcat服务器
Http协议 什么是Http协议 HTTP,超文本传输协议(HyperText Transfer Protocol)是互联网上应用最为广泛的 一种网络协议.所有的WWW文件都必须遵守这 ...