Ghost-Admin/app/components/gh-date-picker.hbs

52 lines
1.9 KiB
Handlebars

<div class="gh-date-picker" ...attributes>
<PowerDatepicker
@selected={{@value}}
@center={{@value}}
@onSelect={{this.onDateSelected}}
@renderInPlace={{true}}
@disabled={{@disabled}}
as |dp|
>
<dp.Trigger @tabindex="-1" data-test-date-picker-trigger>
<div class="{{if this.error "error"}}">
{{!-- template-lint-disable no-down-event-binding --}}
<input
type="text"
placeholder={{this.dateFormat}}
value={{moment-format @value this.dateFormat}}
disabled={{@disabled}}
aria-label="Selected date"
class="gh-input gh-datepicker-input"
{{on "input" (fn this.onDateInput dp)}}
{{on "blur" this.onDateBlur}}
{{on "keydown" (fn this.onDateKeydown dp)}}
{{did-update this.resetInputValue @value}}
data-test-date-picker-input
/>
{{svg-jar "calendar" class="gh-date-picker-cal-icon"}}
</div>
</dp.Trigger>
<dp.Content class="dropdown-menu">
{{#if (has-block)}}
{{yield (assign
dp
(hash
select=this.onDateSelected
Triger=null
Content=null
Nav=dp.Nav
Days=(component dp.Days minDate=this.minDate maxDate=this.maxDate weekdayFormat="min")
)
)}}
{{else}}
<dp.Nav />
<dp.Days @minDate={{this.minDate}} @maxDate={{this.maxDate}} @weekdayFormat="min" />
{{/if}}
</dp.Content>
</PowerDatepicker>
{{#if this.error}}
<div class="gh-date-time-picker-error" data-test-date-picker-error>{{this.error}}</div>
{{/if}}
</div>