jQuery select年月日(生日)选择器

最新推荐文章于 2024-11-04 12:54:26 发布

ld__________

最新推荐文章于 2024-11-04 12:54:26 发布

阅读量7.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Web前端文章标签： jquery特效插件

本文链接：https://blog.youkuaiyun.com/ld_____/article/details/48346683

本文介绍了如何使用jQuery创建一个简单的生日选择器，利用select+option元素，并考虑了闰年的情况。该选择器允许用户通过下拉菜单选择年、月、日，并通过rel属性进行初始化。在实际使用中，可以通过jQuery选择器获取或设置select的值，注意在赋值时要处理月份显示为0X的特殊情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实际项目中，在用户的个人中心，编辑用户资料时经常会遇到选择生日选项的问题。

因为我项目工程中没有使用如jQuery UI的插件性下拉列表，所以选择select + option的原生方式，实现选择器。

能够准确计算闰年的年月日，方便表单处理。

实际效果如下图，式样略粗糙

HTML

生日中的年月日以<select>下拉方式，我们给每个select加个rel的属性，当已知用户生日时，直接通过rel属性标注，插件会将rel属性的数值转换成select的值。

<select id="date-sel-year" rel="2015"></select>年
<select id="date-sel-month" rel="9"></select>年
<select id="date-sel-day" rel="10"></select>年

jQuery

$.date_picker({
     YearSelector:  "#date-sel-year",
     MonthSelector: "#date-sel-month",
     DaySelector:   "#date-sel-day"
});
$.ms_DatePicker();<

最低0.47元/天解锁文章

200万优质内容无限畅学