Question

Here我们有一个日期选择器，可以通过点击输入来打开。我想通过点击我自己的组件（按钮）或点击其他office365组件来更改它并打开它。如何执行？我想，有可能实现使用setState。

this.setState{showDatePicker: !this.state.showDatePicker}

但不幸的是它并非如此。现在我有下一个组件，可以通过点击input打开：

const DayPickerStrings = {
    months: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
        'July',
        'August',
        'September',
        'October',
        'November',
        'December'
    ],

    shortMonths: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
    ],

    days: [
        'Sunday',
        'Monday',
        'Tuesday',
        'Wednesday',
        'Thursday',
        'Friday',
        'Saturday'
    ],

    shortDays: [
        'S',
        'M',
        'T',
        'W',
        'T',
        'F',
        'S'
    ],

    goToToday: 'Go to today',
    prevMonthAriaLabel: 'Go to previous month',
    nextMonthAriaLabel: 'Go to next month',
    prevYearAriaLabel: 'Go to previous year',
    nextYearAriaLabel: 'Go to next year'
};

export class ToolbarDatePicker extends Component {
    constructor() {
    super();

    this.state = {
        firstDayOfWeek: DayOfWeek.Sunday
    };
}

    render() {

        let { firstDayOfWeek } = this.state;
        let placeholder="Outlook - ";
        return (
            <div>
            <DatePicker firstDayOfWeek={ firstDayOfWeek }
                        strings={ DayPickerStrings }
                        placeholder={ placeholder }
                        isMonthPickerVisible={ false }
                        />
            </div>
        );
    }
}

Answer 1

根据文档https://dev.office.com/fabric#Implementation：

您可以像使用参考

一样使用componentRef

所以...

class Foo extends Component {
  handleClick(){
    // their APi is not documented well
    this.datePicker._showDatePickerPopup()
  }

  render(){
    return <div>
      <DatePicker
        label='Start date'
        onSelectDate={ date => this.setState({ value: date }) }
        componentRef={instance => this.datePicker = instance} />

      <button type='button' onClick={e => this.handleClick()} >open</button>
    </div>
  }
}

基于此处的来源：

https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx

您也可以在datepicker实例上setState进行更改，例如this.datePicker.setState({isDatePickerShown: true})

Answer 2

$('#theIdOfTheButton').click(function() {
   // call the library here
});

Answer 3

$("#buttonId").click(function() {
  $("#datepicker").datepicker("show");
});

<button id="buttonId" type="button">Button</button>

如何在按钮点击时打开日期选择器？

3 个答案: