原生JS实现日期选择
时间:2020-05-12
本文章向大家介绍原生JS实现日期选择,主要包括原生JS实现日期选择使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
JS声明方法
/*
*生日下拉框
*把sel_year、sel_month、sel_day修改即可
*/ var birthday1 = { date_picker: function(options){ var defaults = { YearSelector: "#sel_year", MonthSelector: "#sel_month", DaySelector: "#sel_day", FirstText: "", FirstValue: 0 }; var opts = $.extend({}, defaults, options); var $YearSelector = $(opts.YearSelector); var $MonthSelector = $(opts.MonthSelector); var $DaySelector = $(opts.DaySelector); var FirstText = opts.FirstText; var FirstValue = opts.FirstValue; // 初始化 var str = "<option value=\"" + FirstValue + "\">" + FirstText + "</option>"; $YearSelector.html(str); $MonthSelector.html(str); $DaySelector.html(str); // 年份列表 var yearNow = new Date().getFullYear(); var yearSel = $YearSelector.attr("rel"); for (var i = yearNow; i >= 1900; i--) { var sed = yearSel==i?"selected":""; var yearStr = "<option value=\"" + i + "\" " + sed+">" + i + "</option>"; $YearSelector.append(yearStr); } // 月份列表 var monthSel = $MonthSelector.attr("rel"); for (var i = 1; i <= 12; i++) { var monthStr=null; var sed = monthSel==i?"selected":""; if(i<10){ monthStr="<option value=\"" + i + "\" "+sed+">" + '0' +i + "</option>"; }else{ monthStr = "<option value=\"" + i + "\" "+sed+">" +i + "</option>"; } $MonthSelector.append(monthStr); } // 日列表(仅当选择了年月) function BuildDay() { if ($YearSelector.val() == 0 || $MonthSelector.val() == 0) { // 未选择年份或者月份 $DaySelector.html(str); } else { $DaySelector.html(str); var year = parseInt($YearSelector.val()); var month = parseInt($MonthSelector.val()); var dayCount = 0; switch (month) { case 1: case 3: case 5: case 7: case 8: case 10: case 12: dayCount = 31; break; case 4: case 6: case 9: case 11: dayCount = 30; break; case 2: dayCount = 28; if ((year % 4 == 0) && (year % 100 != 0) || (year % 400 == 0)) { dayCount = 29; } break; default: break; } var daySel = $DaySelector.attr("rel"); for (var i = 1; i <= dayCount; i++) { var dayStr=null; var sed = daySel==i?"selected":""; if(i<10){ dayStr = "<option value=\"" + i + "\" "+sed+">" + +'0'+i + "</option>"; // dayStr =`<option>0${i}</option>` }else{ dayStr = "<option value=\"" + i + "\" "+sed+">" + i + "</option>"; // dayStr =`<option>${i}</option>` } $DaySelector.append(dayStr); } } } $MonthSelector.change(function () { BuildDay(); }); $YearSelector.change(function () { BuildDay(); }); if($DaySelector.attr("rel")!=""){ BuildDay(); } } }
HTML
<select id="year" rel="2020"></select> 年 <select id="month" rel="05"></select> 月 <select id="day" rel="12"></select> 日
JS调用
$(function() {
//声明三个下拉框 birthday.date_picker({ YearSelector: "#year", MonthSelector: "#month", DaySelector: "#day", });
//调用三个下拉框点击事件 birchange("year"); birchange("month"); birchange("day"); }
下拉框点击事件
function birchange(field){ $("#"+field).change(function(){ $.ajax({ url:"../php/zyf.php", data:{type:"birthday",num:field,val:$(this).val()}, success:function(res){ if(res == "ok"){ layer.msg('修改成功'); } window.location.reload(); } }) }) }
后台就是表单接收字段,就不献丑了
sel_year
原文地址:https://www.cnblogs.com/zyfeng/p/12877860.html
- mongodb-java-driver基本用法
- 基于Redis的开源分布式服务Codis
- 利用Weblogic的iisproxy、iisforward插件实现IIS转发
- 帆软FineReport如何使用程序数据集
- etcd:用于服务发现的键值存储系统
- 如何使用HTTP压缩优化服务器
- "org.jboss.netty.internal.LoggerConfigurator".DESCRIBED is already registered 的解决办法
- ASP.NET SignalR 高可用设计
- JavaScript 和asp.net配合编码字符串
- 3D游戏开发之UE4中的集合:TSet容器
- weblogic启动失败:Could not obtain the localhost address 解决办法
- 如何理解云计算?很简单,就像吃货想吃披萨了……
- .NET 2.0 中使用Active Directory 应用程序模式 (ADAM)
- struts2: 通过流输出实现exce导出
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Array - 220. Contains Duplicate III
- Array - 219. Contains Duplicate II
- Array - 217. Contains Duplicate
- Array - 299. Bulls and Cows
- Array - 189. Rotate Array
- Array - 277 Find the Celebrity
- Array - 80. Remove Duplicates from Sorted Array II
- Array - 508. Wiggle Sort
- Array - 376. Wiggle Subsequence
- Array - 283. Move Zeroes
- Array - 88. Merge Sorted Array
- Array - 228. Summary Ranges
- Array - 152. Maximum Product Subarray
- Focal Loss和它背后的男人RetinaNet
- Array - 53. Maximum Subarray