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 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 {{action (mut this.format) previewedFormat.format}}>
                  {{previewedFormat.format}}
                </a>
                <span class="previewed-format">
                  {{previewedFormat.preview}}
                </span>
              </li>
            {{/each}}
          </ul>
        </div>

        <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>
    {{/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}}

  <a class="cancel-action" href {{action "cancel"}}>
    {{i18n "cancel"}}
  </a>

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