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 周 ...
随机推荐
- Guava学习笔记:Optional优雅的使用null
在我们学习和使用Guava的Optional之前,我们需要来了解一下Java中null.因为,只有我们深入的了解了null的相关知识,我们才能更加深入体会领悟到Guava的Optional设计和使用上 ...
- wordpress编辑器选择ckeditor、ckfinder
CKEditor for WordPress 搜索安装 上传功能需要ckfinder 下载 CKFinder for PHP: http://ckfinder.com/download 上传ckfin ...
- golang基础---Slice切片
切片Slice在go语言中是单独的类型(指向底层的数组),不同于python(对可迭代对象操作的工具),注意区分数组和slice的区别 定义一个空slice,格式var s []int,这种既没有长度 ...
- mysql-elastic search canal
背景 早期,阿里巴巴B2B公司因为存在杭州和美国双机房部署,存在跨机房同步的业务需求.不过早期的数据库同步业务,主要是基于trigger的方式获取增量变更,不过从2010年开始,阿里系公司开始逐步的尝 ...
- 使用Charles为Android设备抓取https请求的包
之前开发的Android APP使用的都是http请求,之后改成了https,就出现了以下情况,无法正常读取抓取的内容 找了好多资料说法大概差不多,照着弄,结果出现如下情况,后来发现这种情况其实是手机 ...
- MvvmLight - ViewModelLocator
这里先鼓舞下士气,ViewModelLocator很简单,甚至可以去掉,它不是Mvvm必须的.在初学Mvvm时,一般都是使用NuGet安装 MvvmLight框架,总是会带上那么一个ViewModel ...
- java向上转型的问题
import java.util.Arrays;import java.util.HashSet;import java.util.Set;class A{ private String s1 = & ...
- jquery ui dialog弹出窗 清空缓存Cache或强制刷新
我用jquery ui 弹出一个购物车的对话,通过AJAX加载的数据.发现购物车被缓存,一直看到是旧数据.为了刷新购物车更新,我必须去加一个刷新按钮,点击后更新购物车页面.有没有一种方法来自动刷新加载 ...
- 无限滚动条的css布局理解
一.需求描述 做一个waymo的滚动条,在页面中显示两张图,一共4张图,无限滚动播放. .car{ width: 600px; height: 157px; margin: 100px auto; b ...
- 01HTMl-<base>标签
一.base用于定义页面链接的打开方式 <base target="_blank"/> 定义页面链接默认打开方式,base通过target属性告诉浏览器如何打开页面. ...