0
私のアプリでhttps://github.com/skratchdot/react-bootstrap-daterangepickerを使用しています。カスタム範囲を選択すると、入力が適用された後に入力が更新されます。あらかじめ定義された範囲を選択すると、ウィジェットは適用ボタンを押して閉じます。また、あらかじめ定義された範囲は入力に書き込まれません。Daterangepicker入力が更新されていません
class DateTimePicker extends React.Component {
constructor(props) {
super(props);
this.DATE_FORMAT = 'YYYY-MM-DD HH:mm:ss';
this.ranges = {
\t \t \t 'Today': [moment().startOf('day'), moment().endOf('day')],
\t \t \t 'Yesterday': [moment().startOf('day').subtract(1, 'days'), moment().endOf('day').subtract(1, 'days') ],
\t \t \t 'Last 7 Days': [moment().subtract(6, 'days'), moment()],
\t \t \t 'Last 30 Days': [moment().subtract(29, 'days'), moment()],
\t \t \t 'This Month': [moment().startOf('month'), moment().endOf('month')],
\t \t \t 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')],
};
this._handleApply = this._handleApply.bind(this);
}
_handleApply(event, picker) {
\t this.props.onChange(
\t \t picker.startDate.format(this.DATE_FORMAT),
\t \t picker.endDate.format(this.DATE_FORMAT));
}
render() {
\t let startDate = moment(this.props.startDate);
\t let endDate = moment(this.props.endDate);
let start = startDate.format(this.DATE_FORMAT);
let end = endDate.format(this.DATE_FORMAT);
let label = start + ' to ' + end;
if (start === end) {
label = start;
}
let locale = {
format: 'YYYY-MM-DD HH:mm:ss',
separator: ' to ',
applyLabel: 'Apply',
cancelLabel: 'Cancel',
weekLabel: 'W',
customRangeLabel: 'Custom Range',
daysOfWeek: moment.weekdaysMin(),
monthNames: moment.monthsShort(),
firstDay: moment.localeData().firstDayOfWeek(),
};
return (
\t <div>
\t \t Time frame:<br/>
\t \t \t \t <DatetimeRangePicker
\t \t \t \t timePicker
\t \t \t \t timePicker24Hour
\t \t \t \t autoUpdateInput
alwaysShowCalendars
\t \t \t \t locale={locale}
\t \t \t \t startDate={startDate}
\t \t \t \t endDate={endDate}
\t \t \t \t ranges={this.ranges}
\t \t \t \t onApply={this._handleApply}
\t \t \t \t >
\t \t \t \t <div className='input-group'>
\t \t \t \t <input type='text' className='form-control' defaultValue={label}/>
\t \t \t \t <span className='input-group-btn'>
\t \t \t \t <button className='btn btn-default date-range-toggle'>
\t \t \t \t <BootstrapGlyphicon glyphicon='calendar'/>
\t \t \t \t </button>
\t \t \t \t </span>
\t \t \t \t </div>
\t \t \t \t </DatetimeRangePicker>
\t \t \t </div>
);
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
これは、ブートストラップがDOMを更新するときに反応を妨げるjQueryを使用するため、reactjsで使用するのは簡単ではありません。たぶんあなたは[this]（https://github.com/pushtell/react-bootstrap-date-picker）を見ることができます。 – trixn
時間と時間の範囲を選択できるピッカーが必要です。あなたのリンクで役に立つ情報を見つけることができません。私は何を探すべきですか？ – t7bdh3hdhb