Используя vuejs-datepicker, как настроить внешний вид каждой даты? - PullRequest
Новая
       14

Используя vuejs-datepicker, как настроить внешний вид каждой даты?

0 голосов
/ 23 января 2019

Я использую превосходный компонент vuejs-datepicker , и, как это часто бывает с подобными надстройками, он делает 99% от того, что я хочу, но, к сожалению, этого недостаточно. .

Я понимаю, что могу установить выделенные даты и даты отключения, но я хотел бы иметь возможность применять различное форматирование к разным датам (поэтому даты в Лондоне отображаются красным цветом, например, синим цветом Манчестерского синего и зеленым Тимбукту).

Самое близкое, что у меня есть, это использование свойства day-cell-content : 

:day-cell-content="setcell"

В сочетании с этой функцией: 

setcell(x) {      
  // put day number in italics
  return '<em>' + (x.date) + '</em>';
}

Это работает, но единственное, что я могу получить, это номер дня, и я хочу дату. Другие возможности включают эти свойства:

enter image description here

Однако я не могу заставить их работать, и в любом случае они применяются ко всему календарю, а не к каждой отдельной дате.

Это действительно расстраивает, потому что я посмотрел на объектную модель (пример показан ниже), и все, что мне нужно было бы сделать, - это как-нибудь помечать каждый день!

enter image description here

Я что-то упустил?

1 Ответ

0 голосов
/ 23 января 2019

Если вы хотите работать с инструментами, которые дает вам DatePicker, я думаю, вам придется изменить свой подход. Я использую опору highlighted, чтобы выделить даты для выбранного города. Я поместил их в слот beforeCalendarHeader , чтобы вы могли выбрать город с открытой панелью выбора. Это довольно просто, если это будет работать для вас.

Я думаю, что если вам нужно сделать пользовательскую раскраску дат, вам нужно войти в источник компонента и создать собственное расширение .

По вашему плану неясно, какие будут цветовые ячейки, если даты перекрываются (возможно, они просто не перекрываются в вашем случае использования). 

const app = new Vue({
  el: '#app',
  data: {
    selectedCity: 'London',
    cityDates: {
      London: [
        [1, 13],
        [1, 14],
        [1, 15]
      ],
      Manchester: [
        [1, 16],
        [1, 17],
        [1, 18]
      ]
    }
  },
  computed: {
    highlighted() {
      return this.selectedCity ? {
        dates: this.cityDates[this.selectedCity].map((pair) => new Date(2019, ...pair))
      } : {};
    }
  },
  components: {
    vuejsDatepicker
  }
});
<div id="app">
  <vuejs-datepicker :highlighted="highlighted" :open-date="new Date(2019, 1, 1)">
    <div slot="beforeCalendarHeader" class="calender-header">
      <div v-for="city in Object.keys(cityDates)">
        <label><input type="radio" v-model="selectedCity" :value="city">{{city}}</label>
      </div>
    </div>
  </vuejs-datepicker>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuejs-datepicker"></script>
...