在 ember-power-calendar 下拉列表中隐藏工作日 header 的方法是什么？

Question

我在我的应用程序中使用 ember-power-calendar 插件来避免 ember-bootstrap date-picker 因为它有 jQuery 小部件。日历工作得非常好。但是我有一个要求在工作日 header(星期日，星期一..星期六) 需要隐藏的地方。

{{#power-calendar
  center=fixedDummyDate
  selected=fixedDummyDate
  onSelect=(action 'selectDate' value='date') 
  as |calendar|}}
    {{calendar.days}} 
{{/power-calendar}}

交付的输出

预期输出

Answer 1

事实上，官方指南中有一个与您所问的类似的例子。您是否检查了 Basic-customization>days link.

中的示例？

也就是说；让我解释一下你将如何处理这个问题。您需要从日历中删除星期日和星期一。您需要自定义 power-calendar 的 days-component。为了做到这一点；您可以传递自己的组件；假设自定义组件的名称是 days-without-monday-sunday。那么您对 power-calendar 的使用将是：

{{#power-calendar
    center=fixedDummyDate
  selected=fixedDummyDate
  onSelect=(action 'selectDate' value='date')
  daysComponent="days-without-monday-sunday"
  as |calendar|}}
    {{calendar.days}} 
{{/power-calendar}}

现在；让我们考虑一下习俗days-without-monday-sunday。我们可以在插件中重用现有的 power-calendar/days 组件。我们需要从周 header 行中删除 Sunday 和 Monday。那么我们来定义组件的js文件：

import Days from 'ember-power-calendar/components/power-calendar/days'

export default Days.extend({
    // eliminate monday and sunday from the weekdays already constructed ad power-calendar-days
    weekdaysWithoutMondayAndSunday: Ember.computed('weekdays', function() {
        return this.get('weekdays').slice(2,7)
    })
  });

现在让我们定义 days-without-monday-sunday 的模板。我们将在 header 行中使用 weekdaysWithoutMondayAndSunday 并从渲染中删除 Monday 和 Sunday 天：

<div class="ember-power-calendar-row ember-power-calendar-weekdays">
  {{#each weekdaysWithoutMondayAndSunday as |wdn|}}
    <div class="ember-power-calendar-weekday">{{wdn}}</div>
  {{/each}}
</div>
<div class="ember-power-calendar-day-grid" onkeydown={{action "onKeyDown" calendar}}>
  {{#each weeks key='id' as |week|}}
    <div class="ember-power-calendar-row ember-power-calendar-week" data-missing-days={{week.missingDays}}>
      {{#each week.days key='id' as |day|}}
        {{#if (monday-sunday-checker day)}}
          <button type="button"
            data-date="{{day.id}}"
            class="ember-power-calendar-day {{if onSelect 'ember-power-calendar-day--interactive'}} {{if day.isCurrentMonth 'ember-power-calendar-day--current-month' 'ember-power-calendar-day--other-month'}} {{if day.isSelected 'ember-power-calendar-day--selected'}} {{if day.isToday 'ember-power-calendar-day--today'}} {{if day.isFocused 'ember-power-calendar-day--focused'}} {{if day.isRangeStart 'ember-power-calendar-day--range-start'}} {{if day.isRangeEnd 'ember-power-calendar-day--range-end'}}"
            onclick={{action calendar.actions.select day calendar}}
            onfocus={{action 'onFocusDay' day}}
            onblur={{action 'onBlurDay'}}
            disabled={{day.isDisabled}}>
            {{#if hasBlock}}
              {{yield day publicAPI}}
            {{else}}
                {{day.number}}
            {{/if}}
          </button>
        {{/if}}
      {{/each}}
    </div>
  {{/each}}
</div>

不要因为模板的复杂性而分心；我直接从插件本身复制了它； see。消除星期一和星期日的棘手部分是 {{#if (monday-sunday-checker day)}}。为了做到这一点；我们可以创建一个名为 monday-sunday-checker 的自定义助手。 helper 的实现可以是：

import Ember from 'ember';

export function mondaySundayChecker(params/*, hash*/) {
  console.log(params[0]) 
  const day = Ember.get(params[0], 'moment').format('dddd')
  return day !== 'Monday' && day !== 'Sunday';
}

export default Ember.Helper.helper(mondaySundayChecker);

我创建了一个 twiddle 供您实际演示；但由于缺少 css 定义，它看起来不太好；但它至少会给你一个想法。希望这会有所帮助。

Answer 2

目前我找到了一种方法可以将 css class 添加到电源日历以隐藏工作日 header。

CSS 风格：

.no-weekdays {
   .ember-power-calendar-weekdays {     
       display: none;
    }
}

模板：

{{#power-calendar class="no-weekdays"
   selected=abcDate
   onSelect=(action 'selectDate' value='date') 
   as |calendar|}}
   {{calendar.days}}
{{/power-calendar}}

还有其他隐藏 header 的方法吗？

在 ember-power-calendar 下拉列表中隐藏工作日 header 的方法是什么？

What is a way to hide weekdays header in ember-power-calendar dropdown?

ember.js

交付的输出

预期输出