Revision 4d90d1b4-ca9c-44be-ae84-a8841220c60f - Code Review Stack Exchange

<!-- language: lang-js -->

 /* Create <option> tags */
 class OptionTime extends HTMLSelectElement {
 constructor() {
 super();
 
 // Dynamically set the range 
 this.setDateRange();
 }
 
 setDateRange() {
 		const now = new Date();
 const year = now.getFullYear();

 // There is no need to deconstruct the start, end and reassign
 const startYear = year - 50;
 const endYear = year - 18;

 // `this` give you access to HTML element. So no need for querySelector
 let unit = this.dataset.range.split(' ')[2];
 this.setAttribute('data-range', `${startYear} ${endYear} ${unit}`)
 }
 
 connectedCallback() {
 let [start, end, unit] = this.dataset.range.split(' ');

 for (let i = start; i <= end; i++) {
 this.add(new Option(`${i}${unit}`, `${i}${unit}`));
 }
 }
 };

 customElements.define('option-time', OptionTime, {
 extends: 'select'
 });

<!-- language: lang-html -->

 <select is="option-time" name="Year" data-range="%startYear% %endYear% 年">
 <option value="" disabled selected>Year</option>
 </select>
 <select is="option-time" name="Month" data-range="1 12 月">
 <option value="" disabled selected>Month</option>
 </select>
 <select is="option-time" name="Day" data-range="1 31 日">
 <option value="" disabled selected>Day</option>
 </select>

<!-- end snippet -->