使用 moment.js 计算睡眠时间并做出本机反应。

Question

Detailed screenshot of issues

我正在尝试使用 moment.js 和 datetime picker 计算本机反应的睡眠时间。当我尝试时，结果总是 0，这是不正确的。

这是我从 moment.js 使用的格式：moment.duration(moment(this.selectedEndDateTime).diff(moment(this.selectedStartDateTime))).asHours()。

Snack link with working code:

export default class DateTimePickerTester extends Component {

state = {
    startDateTimePickerVisible: false,
    endDateTimePickerVisible: false,
    selectedStartDateTime: moment().format('ddd MMM D YYYY 12:00 AM').toUpperCase(),
    selectedEndDateTime: moment().format('ddd MMM D YYYY 8:00 AM').toUpperCase(),
  };

  showStartDateTimePicker = () => this.setState({ startDateTimePickerVisible: true });
  showEndDateTimePicker = () => this.setState({ endDateTimePickerVisible: true });

  hideStartDateTimePicker = () => this.setState({ startDateTimePickerVisible: false });
  hideEndDateTimePicker = () => this.setState({ endDateTimePickerVisible: false });

  handleStartDateTimePicked = (datetime) => {
    this.setState({
        selectedStartDateTime: moment(datetime).format('ddd MMM D YYYY h:mm a').toUpperCase()
      })
    this.hideStartDateTimePicker();
  };

  handleEndDateTimePicked = (datetime) => {
    this.setState({
        selectedEndDateTime: moment(datetime).format('ddd MMM D YYYY h:mm a').toUpperCase()
      })
    this.hideEndDateTimePicker();
    this.displaySleepDuration()
  };

  displaySleepDuration = (datetime) => {
    this.setState({
      sleepDuration: moment.duration(moment(this.selectedEndDateTime).diff(moment(this.selectedStartDateTime))).asHours()
    })
  }

  render () {
    console.log( this.state.sleepDuration )
    return (
      <View style={{ flex: 1, margin: 50 }}>

        <Text style={{ fontWeight: 'bold', marginBottom: 10 }}>
           Time Slept: {this.state.sleepDuration}
        </Text>

        <TouchableOpacity onPress={this.showStartDateTimePicker}>
          <Text>
            In Bed: {this.state.selectedStartDateTime}
          </Text>
        </TouchableOpacity>

        <TouchableOpacity onPress={this.showEndDateTimePicker}>
          <Text>
            Awake: {this.state.selectedEndDateTime}
          </Text>
        </TouchableOpacity>

        <DateTimePicker
          mode='datetime'
          isVisible={this.state.startDateTimePickerVisible}
          onConfirm={this.handleStartDateTimePicked}
          onCancel={this.hideStartDateTimePicker}
        />

        <DateTimePicker
          mode='datetime'
          isVisible={this.state.endDateTimePickerVisible}
          onConfirm={this.handleEndDateTimePicked}
          onCancel={this.hideEndDateTimePicker}
        />
      </View>
    );
  }  
}

Answer 1

问题编号指的是在提供的屏幕截图中分配的编号。

问题 1

您对moment.duration() 和moment.diff() 的使用是正确的，但是，您正在引用未定义的对象：您必须引用状态属性：

this.setState({
  sleepDuration: moment.duration(  
    moment(this.state.selectedEndDateTime).diff(         // instead of this.selectedEndDateTime
    moment(this.state.selectedStartDateTime))).asHours() // instead of this.selectedStartDateTime
})

问题 2

您正在尝试使用实际值格式化矩对象，这是无效的。请参考format 文档。

相反，您应该在格式化之前先操作 moment 对象，如下所示：

selectedStartDateTime: moment().hours(0).minutes(0).format('ddd MMM D YYYY h:mm a').toUpperCase(),
selectedEndDateTime: moment().hours(8).minutes(0).format('ddd MMM D YYYY h:mm a').toUpperCase()

注意正确的格式字符串，12 AM 是 0 小时。

问题 3

您没有将初始时间设置为日期选择器。 library props documentation 表示您可以通过 date 属性设置初始值：

 <DateTimePicker
   mode='datetime'
   datetime='12:00'
   isVisible={this.state.startDateTimePickerVisible}
   onConfirm={this.handleStartDateTimePicked}
   onCancel={this.hideStartDateTimePicker}
   date={moment().hours(0).minutes(0).toDate()}
 />

 <DateTimePicker
   mode='datetime'
   isVisible={this.state.endDateTimePickerVisible}
   onConfirm={this.handleEndDateTimePicked}
   onCancel={this.hideEndDateTimePicker}
   date={moment().hours(8).minutes(0).toDate()}
 />