Question

我正在尝试使用moment.js和此datetime picker计算react native的睡眠时间。当我尝试时，结果始终为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文档。

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

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()}
 />

使用moment.js发出计算睡眠时间的问题，并做出本机反应。

1 个答案:

问题1

问题2

问题3