Date Select

components.select.x-day\.js

import Component from '@glimmer/component';
import { action } from "@ember/object";

const ThirtyMonths = new Set([
  4,
  6,
  9,
  10,
]);

export default class extends Component {
  get showDefault() {
    return this.args.showDefault !== undefined ? this.args.showDefault : true;
  }
  
  // `number` (1 -> 31) or `value` ("01" -> "31")
  get valueType() {
    return this.args.valueType || "value";
  }
  get days() {
    const {
      showDisabled = false,
      disabledDays = [],
      month,
      isLeapYear = false
    } = this.args;
    let dayCount = 31;
    const days = [];
  
    if (month) {
      let monthNum = Number(month);
      if (typeof month === "number") {
        monthNum = month + 1; // assume month code for numbers which is zero indexed
      }
      if (monthNum === 2) {
        // we don't allow leap year inputs by default
        dayCount = isLeapYear ? 29 : 28;
      } else if (ThirtyMonths.has(monthNum)) {
        dayCount = 30;
      }
    }
    
    for (let i = 1; i <= dayCount; i++) {
      let enabled = !disabledDays.includes(i);
      
      if (enabled || showDisabled) {
        days.push({
          number: i,
          value: i < 10 ? `0${i}` : `${i}`,
          enabled
        });
      }
    }
    
    return days;
  }
  
  @action
  update(updateFn, event) {
    const value = event.target.value;
    updateFn(this.valueType === "number" ? Number(value) : value);
  }
}

components.select.x-month\.js

import Component from '@glimmer/component';
import { action } from "@ember/object";

export default class extends Component {
  get displayType() {
    return this.args.displayType || "long";
  }

  // `number` (1 -> 12)
  // or `value` ("01" -> "12")
  // or `code` (0 -> 11)
  // or `long` (January)
  // or `short` (Jan)
  get valueType() {
    return this.args.valueType || "value";
  }
  get showDefault() {
    return this.args.showDefault !== undefined ? this.args.showDefault : true;
  }
  get months() {
    const {
      showDisabled = false,
      disabledMonths = [],
      locale = "default",
    } = this.args;
    const date = new Date();
    const months = [];
    
    for (let i = 0; i < 12; i++) {
      let enabled = !disabledMonths.includes(i);
      
      if (enabled || showDisabled) {
        date.setMonth(i, 1);
        const value = i + 1;
        months.push({
          long: date.toLocaleString(locale, { month: 'long' }),
          short: date.toLocaleString(locale, { month: 'short' }),
          value: value < 10 ? `0${value}` : `${value}`,
          number: i + 1,
          code: i,
          enabled
        });
      }
    }
    
    return months;
  }
  
  @action
  update(updateFn, event) {
    const value = event.target.value;
    const { valueType } = this;
    updateFn(
      (valueType === "number" || valueType === "code") ?
      Number(value) : value
    );
  }
}

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from "@glimmer/tracking";

export default class ApplicationController extends Controller {
  appName = 'Ember Twiddle';
  @tracked
  month = 1;
  @tracked
  day = 1;
}

helpers.eq\.js

import { helper } from '@ember/component/helper';

export default helper(function eq(params/*, hash*/) {
  return params[0] === params[1];
});

helpers.not\.js

import { helper } from '@ember/component/helper';

export default helper(function not(params/*, hash*/) {
  return !params[0];
});

templates.application\.hbs

<h1>Welcome to {{this.appName}}</h1>
<br>
Month: {{this.month}}<br>
<Select::XMonth
  @value={{this.month}}
  @valueType={{"number"}}
  autocomplete="password"
  class="foo"
/>
<hr>
Day: {{this.day}}<br>
<Select::XDay
  disabled={{not this.month}}
  @value={{this.day}}
  @valueType={{"number"}}
  @month={{this.month}}
/>
<br>
{{outlet}}
<br>
<br>

templates.components.select.x-day\.hbs

<select {{on "change" (fn this.update (fn (mut @value)))}} autocomplete="off" ...attributes>
  {{#if this.showDefault}}
    <option>Select Day</option>
  {{/if}}
  {{#each this.days as |day|}}
    <option
      value={{get day this.valueType}}
      selected={{eq @value (get day this.valueType)}}
      disabled={{not day.enabled}}
    >
      {{day.value}}
    </option>
 {{/each}}
</select>

templates.components.select.x-month\.hbs

<select {{on "change" (fn this.update (fn (mut @value)))}} autocomplete="off" ...attributes>
  {{#if this.showDefault}}
    <option>Select Month</option>
  {{/if}}
  {{#each this.months as |month|}}
    <option
      value={{get month this.valueType}}
      selected={{eq @value (get month this.valueType)}}
      disabled={{not month.enabled}}
    >
      {{get month this.displayType}}
    </option>
 {{/each}}
</select>

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}