SharePoint Framework (SPFx) — это мощная среда разработки для создания расширений и настроек SharePoint. Если вы работаете над проектом, который требует реализации Time Picker в SPFx, вы попали по адресу. В этой статье мы рассмотрим различные методы включения средства выбора времени в ваши решения SPFx, а также приведем примеры кода.

Метод 1: использование React-DateTimePicker
Библиотека React-DateTimePicker предоставляет простой способ реализации средства выбора времени в SPFx с использованием React. Вы можете установить библиотеку с помощью npm и импортировать ее в веб-часть SPFx, как показано в фрагменте кода ниже:

import { DateTimePicker } from 'react-datetime-picker';
export default class TimePickerWebPart extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      selectedTime: new Date(),
    };
  }
  handleTimeChange = (time: Date) => {
    this.setState({
      selectedTime: time,
    });
  };
  render() {
    return (
      <DateTimePicker
        onChange={this.handleTimeChange}
        value={this.state.selectedTime}
      />
    );
  }
}

Метод 2. Использование Office UI Fabric TimePicker
Office UI Fabric — это набор адаптивных, повторно используемых компонентов пользовательского интерфейса для создания решений SPFx. Он включает в себя компонент TimePicker, который можно использовать для реализации функции выбора времени. Вот пример использования TimePicker Office UI Fabric в SPFx:

import { TimePicker } from 'office-ui-fabric-react';
export default class TimePickerWebPart extends React.Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      selectedTime: new Date(),
    };
  }
  handleTimeChange = (time: Date | null | undefined) => {
    if (time) {
      this.setState({
        selectedTime: time,
      });
    }
  };
  render() {
    return (
      <TimePicker
        value={this.state.selectedTime}
        onChange={this.handleTimeChange}
      />
    );
  }
}

Метод 3: пользовательский компонент выбора времени
Если вы предпочитаете создать собственный компонент выбора времени, адаптированный к вашим конкретным требованиям, вы можете сделать это, используя HTML, CSS и JavaScript. Вот простой пример:

<input type="time" id="customTimePicker">
<script>
  const timePickerElement = document.getElementById('customTimePicker');
  timePickerElement.addEventListener('change', (event) => {
    const selectedTime = event.target.value;
    // Handle the selected time
  });
</script>

В этой статье мы рассмотрели три различных метода реализации средства выбора времени в SPFx. Вы можете выбрать метод, который лучше всего соответствует вашим потребностям и требованиям проекта. Независимо от того, решите ли вы использовать предварительно созданную библиотеку, такую ​​как React-DateTimePicker или Office UI Fabric, или создать собственный компонент выбора времени, SPFx предоставляет гибкость и инструменты для создания удобного пользовательского интерфейса. Приятного кодирования!