020cd75369
refs https://github.com/TryGhost/Team/issues/1410 - added block invocation support to `<GhDatePicker>` that exposes the calendar components used inside the datepicker dropdown allowing for customisation of the dropdown content - updated "last seen" datepicker to use the block invocation support to add buttons that select typical "time ago" dates Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
52 lines
1.9 KiB
Handlebars
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> |