JS日期格式

javascript

奶茶糾齁拎 2020-11-09 21:34:46 ‧ 1491 瀏覽

分享至

最近剛學到javaScript的部分想要寫看看日期選單的模式
有GOOGLE到蠻多是利用閏年的方式去劃分
所以也想了解系統去自動抓日期的格式
但是日期的部分找了很久還是不懂
想請教還缺了哪些關鍵語法要補上的

    year:<select id="year"></select>
    month:<select id="month"></select>
    day:<select id="day"></select><br>
<script>   
    for(let i=1970;i<=2020;i++){
            let opt1=document.createElement("option");
            opt1.innerHTML=i;
            document.querySelector("#year").appendChild(opt1);
    }

    for(let j=1;j<=12;j++){
            let opt2=document.createElement("option");
            opt2.innerHTML=j;
            document.querySelector("#month").appendChild(opt2);
    }
    
    let d = new Date(year.value,month.value,0);
    for(let k=1;k<=d.getDate();k++){
            let opt3=document.createElement("option");
            opt3.innerHTML=k;
            document.querySelector("#day").appendChild(opt3);
    }
 
    </script>

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

listennn08

iT邦高手 5 級 ‧ 2020-11-09 22:00:00

最佳解答

用你的寫法稍微改一下就可以

const year = document.querySelector("#year");
const month = document.querySelector('#month');
const day = document.querySelector("#day");

for (let i = 1970; i <= 2020; i++) {
  let opt1 = document.createElement("option");
  opt1.innerHTML = i;
  year.appendChild(opt1);
}

for (let j = 1; j <= 12; j++) {
  let opt2 = document.createElement("option");
  opt2.innerHTML = j;
  month.appendChild(opt2);
}

const createDay = () => {
  let d = new Date(year.value, month.value, 0);
  let options = '';
  for (let k=1; k <= d.getDate(); k++) {
    options +=`<option value="${k}">${k}</option>`;
  }
  day.innerHTML = options;
}

/* 改變 year/month 時跟著改變 day */
year.addEventListener('change', createDay, false);
month.addEventListener('change', createDay, false);

// 初始化 day 的選項
createDay();

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

奶茶糾齁拎 iT邦新手 5 級 ‧ 2020-11-10 09:15:19 檢舉

感謝回答，迴圈的部分看不太懂，後面的部分有查了一下是事件監聽，會再好好研究一番

listennn08 iT邦高手 5 級 ‧ 2020-11-10 09:41:53 檢舉

你是指 template string 看不懂嗎

// 使用 createElement
let opt2 = document.createElement("option");
opt2.innerHTML = j;
// 假設 j = 1 產生出來會長這樣
// <option>1</option>
// 所以直接用 template string 產生一樣的字串
// 再使用 innHTML 轉成 HTML
options = `<option value="${k}">${k}</option>`
// 產生會是 <option value="1">1</option>
// 使用 += 就能產生多個 option
// 也能再重新呼叫時 reset 你的 #day 元件

奶茶糾齁拎 iT邦新手 5 級 ‧ 2020-11-12 23:53:39 檢舉

感謝解答
請問"用 template string 產生一樣的字串"是指哪個字串呢
以及那個像錢幣的符號是什麼功用呢?
所以原本要反映在畫面數字的innerHTML變成了物件嗎??

listennn08 iT邦高手 5 級 ‧ 2020-11-13 08:33:57 檢舉

let opt2=document.createElement("option");
opt2.innerHTML=j;
document.querySelector("#month").appendChild(opt2);
// 這個方式產生的 html 會是 <option>j<option>
// j 會因為你帶入的數字不同而變不同數字

所以我使用樣板字面值(template literals)方式去產生一樣的 html

let options = ''; // => 產生空字串
for (let k=1; k <= d.getDate(); k++) {
options +=`<option value="${k}">${k}</option>`; 
// => 將空字串用 += 的方式串起來 
// ${} 裡面需要使用表達式讓他有值
// 產生會是 <option value="k">k</option>
// k 會因為你帶入的數字不同而變不同數字
}
day.innerHTML = options; // => 使用 innerHTML 替換 day 的 html 物件

大概是這樣
樣板字面值的部分可以再去看一下 MDN

登入發表回應