osr-discourse-src/plugins/discourse-local-dates/assets/javascripts/discourse/templates/components/discourse-local-dates-create-form.hbs

<DModalBody
  @title="discourse_local_dates.title"
  @class="discourse-local-dates-create-modal"
  @style="overflow: auto"
>

  <div class="form">
    {{#if this.isValid}}
      {{#if this.timezoneIsDifferentFromUserTimezone}}
        <div class="preview alert alert-info">
          {{i18n "discourse_local_dates.create.form.current_timezone"}}
          <b>{{this.formattedCurrentUserTimezone}}</b>{{this.currentPreview}}
        </div>
      {{/if}}
    {{else}}
      <div class="validation-error alert alert-error">
        {{i18n "discourse_local_dates.create.form.invalid_date"}}
      </div>
    {{/if}}

    {{this.computeDate}}

    <div class="date-time-configuration">
      <div class="inputs-panel">
        <div
          class="date-time-control from
            {{if this.fromSelected 'is-selected'}}
            {{if this.fromFilled 'is-filled'}}"
        >
          {{d-icon "calendar-alt"}}
          <DButton
            @id="from-date-time"
            @action={{action "focusFrom"}}
            @translatedLabel={{this.formattedFrom}}
            @class="date-time"
          />
        </div>

        <div
          class="date-time-control to
            {{if this.toSelected 'is-selected'}}
            {{if this.toFilled 'is-filled'}}"
        >
          {{d-icon "calendar-alt"}}
          <DButton
            @action={{action "focusTo"}}
            @translatedLabel={{this.formattedTo}}
            @class="date-time"
          />
          {{#if this.toFilled}}
            <DButton
              @icon="times"
              @action={{action "eraseToDateTime"}}
              @class="delete-to-date"
            />
          {{/if}}
        </div>

        {{#unless this.site.mobileView}}
          <TimezoneInput
            @options={{hash icon="globe"}}
            @value={{this.timezone}}
            @onChange={{action (mut this.timezone)}}
          />
        {{/unless}}
      </div>

      <div class="picker-panel">
        <Input class="fake-input" />
        <div class="date-picker" id="picker-container-{{this.elementId}}"></div>

        {{#if this.fromSelected}}
          <div class="time-pickers">
            {{d-icon "far-clock"}}
            <Input
              maxlength={{5}}
              placeholder="hh:mm"
              @type="time"
              @value={{this.time}}
              class="time-picker"
              {{on "input" (action "setTime")}}
            />
          </div>
        {{/if}}

        {{#if this.toSelected}}
          {{#if this.toDate}}
            <div class="time-pickers">
              {{d-icon "far-clock"}}
              <Input
                maxlength={{5}}
                placeholder="hh:mm"
                @type="time"
                @value={{this.toTime}}
                class="time-picker"
                {{on "input" (action "setToTime")}}
              />
            </div>
          {{/if}}
        {{/if}}
      </div>

      {{#if this.site.mobileView}}
        <TimezoneInput
          @value={{this.timezone}}
          @options={{hash icon="globe"}}
          @onChange={{action (mut this.timezone)}}
        />
      {{/if}}
    </div>

    {{#if this.advancedMode}}
      <div class="advanced-options">
        {{#unless this.isRange}}
          <div class="control-group recurrence">
            <label class="control-label">
              {{i18n "discourse_local_dates.create.form.recurring_title"}}
            </label>
            <p>{{html-safe
                (i18n "discourse_local_dates.create.form.recurring_description")
              }}</p>
            <div class="controls">
              <ComboBox
                @content={{this.recurringOptions}}
                @class="recurrence-input"
                @value={{this.recurring}}
                @onChange={{action (mut this.recurring)}}
                @options={{hash
                  none="discourse_local_dates.create.form.recurring_none"
                }}
              />
            </div>
          </div>
        {{/unless}}

        <div class="control-group timezones">
          <label>{{i18n
              "discourse_local_dates.create.form.timezones_title"
            }}</label>
          <p>{{i18n
              "discourse_local_dates.create.form.timezones_description"
            }}</p>
          <div class="controls">
            <MultiSelect
              @valueProperty={{null}}
              @nameProperty={{null}}
              @class="timezones-input"
              @content={{this.allTimezones}}
              @value={{this.timezones}}
              @options={{hash allowAny=false maximum=5}}
            />
          </div>
        </div>

        <div class="control-group format">
          <label>{{i18n
              "discourse_local_dates.create.form.format_title"
            }}</label>
          <p>
            {{i18n "discourse_local_dates.create.form.format_description"}}
            <a
              target="_blank"
              href="https://momentjs.com/docs/#/parsing/string-format/"
              rel="noopener noreferrer"
            >
              {{d-icon "question-circle"}}
            </a>
          </p>
          <div class="controls">
            <TextField @value={{this.format}} @class="format-input" />
          </div>
        </div>
        <div class="control-group">
          <ul class="formats">
            {{#each this.previewedFormats as |previewedFormat|}}
              <li class="format">
                <a
                  class="moment-format"
                  href
                  {{on "click" (fn this.updateFormat previewedFormat.format)}}
                >
                  {{previewedFormat.format}}
                </a>
                <span class="previewed-format">
                  {{previewedFormat.preview}}
                </span>
              </li>
            {{/each}}
          </ul>
        </div>
      </div>
    {{/if}}
  </div>
</DModalBody>

<div class="modal-footer discourse-local-dates-create-modal-footer">
  {{#if this.isValid}}
    <DButton
      @class="btn-primary"
      @action={{action "save"}}
      @label="discourse_local_dates.create.form.insert"
    />
  {{/if}}

  <DButton
    @class="btn-flat"
    @action={{action "cancel"}}
    @translatedLabel={{i18n "cancel"}}
  />

  <DButton
    @class="btn-default advanced-mode-btn"
    @action={{action "advancedMode"}}
    @icon="cog"
    @label={{this.toggleModeBtnLabel}}
  />
</div>