2. 程式人生 > 其它 >js生日選擇器

js生日選擇器

阿新 • • 發佈：2022-03-08

效果：      

 

 

 html：       

    <div class="textbigbox">         <div class="textbigbox_one">             <div class="textbigbox_left">出生日期：</div>             <div class="textbigbox_rightsmall">必須與身份證出生日期一致</div>         </div>         <div class="textbigbox_two birthdaytou">
            <div class="textbigbox_aaa">                 <div class="textbigbox_aaa_sona">選擇                     <div id="yearnum" class="day_box"></div>年                 </div>                 <div class="textbigbox_aaa_sonb">                     <div id="monthnum" class="day_box"></div>月
                </div>                 <div class="textbigbox_aaa_sonb">                     <div id="daynum" class="day_box"></div>日                 </div>             </div>         </div>
        <!-- 生日選擇器 -->         <div class="birthday_box">             <div id="yearbox" class="birthday_box_son"></div>
            <div id="monthbox" class="birthday_box_son marginleftbox1"></div>             <div id="daybox" class="birthday_box_son marginleftbox2"></div>         </div>     </div>   css（生日選擇器部分）：        /* 自定義生日選擇框 */ .textbigbox_aaa_sona {     display: flex;     padding-left: 2vw;     align-items: center; } .textbigbox_aaa_sonb {     display: flex;     flex: 1;     padding-left: 2vw;     align-items: center;     justify-content: center; } .birthdaytou {     position: relative; } .day_box {     background-color: #ecf6f9;     padding: 0 2vw;     font-size: 12px;     display: flex;     align-items: center;     justify-content: center; } .birthday_box {     display: flex;     flex-direction: row;     font-size: 12px;     padding: 0 4%;     position: absolute;     width: 94%;     z-index: 99;     margin-top: 56px; } .birthday_box_son {     display: flex;     /* flex: 1; */     background-color: #fff;     flex-direction: column;     overflow: auto;     height: 40vw;     border-radius: 0 0 1vw 1vw;     box-shadow: 0px 2px 8px rgba(0,0,0,0.3);     width: 33%; } .marginleftbox1 {     margin-left: 27%; } .marginleftbox2 {     margin-left: 65%; } .birthday_box_son>div {     display: flex;     flex-direction: column;     align-items: center;     justify-content: center;     line-height: 8vw; }   js（注意id）：     // 出生日期選擇 $("#yearbox").hide();   //  一開始肯定都是隱藏的 $("#monthbox").hide(); $("#daybox").hide(); $("#yearbox").ready(function(){     var yearfirst = '&nbsp;v&nbsp;';  // 初始年份     $("#yearnum").html(yearfirst);     var yearbigbox = [];     var yearget = document.getElementById('yearbox');     for(var i=1900;i<=2022;i++){         yearbigbox.push(i);     }     for (var j=0;j<yearbigbox.length;j++) {         var newson1 = document.createElement('div');         newson1.innerHTML = yearbigbox[j];         yearget.appendChild(newson1);     }     $("#yearnum").click(function(){     //  點選後才出現對應的下拉，切換的時候又要讓其他兩個下拉隱藏         $("#monthbox").hide();         $("#daybox").hide();         $("#yearbox").show();         yearbox.scrollTop = yearbox.scrollHeight;    //   讓年份的滾動條拉到最下         $("#yearbox>div").click(function(){             var yearchoose = $(this).html();             $("#yearnum").html(yearchoose);             $("#yearbox").hide();         })     }) }) $("#monthbox").ready(function(){     var monthfirst = '&nbsp;v&nbsp;';  // 初始月份     $("#monthnum").html(monthfirst);     var monthbigbox = [];     var monthget = document.getElementById('monthbox');     for(var i=1;i<=12;i++){         monthbigbox.push(i);     }     for (var j=0;j<monthbigbox.length;j++) {         var newson2 = document.createElement('div');         newson2.innerHTML = monthbigbox[j];         monthget.appendChild(newson2);     }     $("#monthnum").click(function(){         $("#yearbox").hide();         $("#daybox").hide();         $("#monthbox").show();         $("#monthbox>div").click(function(){             var monthchoose = $(this).html();             $("#monthnum").html(monthchoose);             $("#monthbox").hide();         })     }) }) $("#daybox").ready(function(){     var dayfirst = '&nbsp;v&nbsp;'  // 初始天數     $("#daynum").html(dayfirst);     var daybigbox = [];     var dayget = document.getElementById('daybox');     for(var i=1;i<=31;i++){         daybigbox.push(i);     }     for (var j=0;j<daybigbox.length;j++) {         var newson3 = document.createElement('div');         newson3.innerHTML = daybigbox[j];         dayget.appendChild(newson3);     }     $("#daynum").click(function(){         $("#yearbox").hide();         $("#monthbox").hide();         $("#daybox").show();         $("#daybox>div").click(function(){             var daychoose = $(this).html();             $("#daynum").html(daychoose);             $("#daybox").hide();         })     }) })     寫了好久……希望下次更快更好  

相關推薦

js生日選擇器

效果：            html：            <div class=\"textbigbox\">         <div class=\"textbigbox_one\">

html新增生日選擇器

參考連結：https://www.cnblogs.com/xiaohaodeboke/p/11878601.html <div class=\"textbigbox_two\">

js實現圓形選單選擇器

本文例項為大家分享了js實現圓形選單選擇器的具體程式碼，供大家參考，具體內容如下

js地區聯動選擇器

技術標籤：前端jshtmlcss 在專案開發中，經常會用到有地區選擇的地方，下面舉個好用的例子。

html，js 如果直接列印id選擇器的名字，可以直接列印dom節點，也可以直接操作節點。

技術標籤：Html5js (JavaScript)js程式碼規範 程式碼： <!DOCTYPE html> <html lang="en">

js實現類選擇器和name屬性選擇器的示例步驟

jQuery的出現，大大的提升了我們操作dom的效率，使得我們的開發更上一層樓，如jQuery的選擇器就是一個很強大的功能，它包含了類選擇器、id選擇器、屬性選擇器、元素選擇器、層級選擇器、內容篩選選擇器等等，很是方便

CSS 選擇器大全解

CSS 選擇器規定了CSS規則會被應用到哪些元素上 寫在前面 本文使用一個統一的HTML案例，並通過使用不同的選擇器例子來測試究竟哪些元素被添加了樣式（主要是寬度為1px的邊框），對應的HTML程式碼如下，為了方便你

Android自定義酒店日期選擇器

Android自定義日期區間選擇器，類似於途家等酒店、旅遊日期區間選擇器： 重寫PopupWindow

Android使用第三方庫實現日期選擇器

本文主要是介紹利用第三方庫實現底部日期選擇器滾輪效果，類似IOS日期效果，只記錄了一種展示效果，是專案中常用到的，至於用到其他效果以及自定義擴充套件的可以參考原文自行學習。

jQuery 選擇器用法基礎入門示例

本文例項講述了jQuery 選擇器用法。分享給大家供大家參考，具體如下： 今兒個開始學習jQuery，在學習jQuery之前我們應該掌握js，我之前也寫過幾篇筆記，但是隻是小部分的知識，js也不是很難 可以自己簡單的看看。以後

jquery選擇器和屬性物件的操作例項分析

本文例項講述了jquery選擇器和屬性物件的操作。分享給大家供大家參考，具體如下：

微信小程式如何實現精確的日期時間選擇器

這篇文章主要介紹了微信小程式如何實現精確的日期時間選擇器,文中通過示例程式碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

Js視訊播放器外掛Video.js使用方法詳解

Video.js快速入門 我們可以下載 Video.js 的原始碼放到自己的伺服器上，或者使用免費的 CDN 託管版本。

iOS自定義日期選擇器

前言 封裝了一個日期選擇器，解決兩個問題： 1、點選textField，鍵盤彈出和日期選擇器彈出的邏輯處理；

基於Element的元件改造的樹形選擇器(樹形下拉框)

前言：由於做專案需要一個樹形選擇器，專案用的也是element-ui框架，然而它自帶的選擇器元件沒有樹形選項，又不想引入其他的框架元件，於是自己利用el-select和el-tree改造了一個，感覺還挺好用的，就封裝成了一個元

使用Vue 自定義檔案選擇器元件的例項程式碼

本文 GitHub https://github.com/qq44924588... 上已經收錄，更多往期高贊文章的分類，也整理了很多我的文件，和教程資料。歡迎Star和完善，大家面試可以參照考點複習，希望我們一起有點東西。

使用Django xadmin 實現修改時間選擇器為不可輸入狀態

反饋說在選擇時間時會出現遮擋選擇器的情況，阻礙操作 如下圖 1，需要修改xadmin 檔案 ，在widgets.py --->第28行新增attrs[\"readonly\"] =\"readonly\"

小程式雙頭slider選擇器的實現示例

小程式商城專案中，需要設定價格區間，或者在旅遊行業專案中需要設定時間區間，雙頭選擇器有比較好的互動效果

iOS UICollectionView實現標籤選擇器

近來，在專案中需要實現一個類似興趣標籤的選擇器。由於標籤的文字長度不定，所以標籤的顯示長度就不定。為了實現效果，就使用了UICollectionView來實現了每行的標籤數量不定、cell的寬度自適應的效果。先在此分享出

Django 如何使用日期時間選擇器規範使用者的時間輸入示例程式碼詳解

如果你的模型中含有 datetime 型別的欄位，表單中需要使用者輸入日期和時間，那麼你如何保證不同使用者輸入的時間都遵循一定的格式 (DD/MM/YYYY 或者 YYYY-MM-DD) 是個必須要考慮的問題。一個更好的方式是在前端使用