使用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

问题编号是指提供的屏幕截图中指定的编号。

Issue 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
})

Issue 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小时。

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