Выполняйте расчет времени сна с помощью moment.js и реагируйте на него. - PullRequest
Новая
       22

Выполняйте расчет времени сна с помощью moment.js и реагируйте на него.

0 голосов
/ 18 сентября 2018

Подробный снимок экрана с проблемами

Я пытаюсь рассчитать время сна в нативной реакции, используя moment.js и этот указатель даты и времени .Когда я пытаюсь это сделать, результат всегда равен 0, что неверно.

Это формат, который я использую с moment.js: moment.duration (moment (this.selectedEndDateTime) .diff (moment (this.selectedStartDateTime))). asHours ().

Закусочная ссылка с рабочим кодом: 

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

1 Ответ

0 голосов
/ 19 сентября 2018

Номера выпусков относятся к номерам, назначенным на предоставленном снимке экрана.

Выпуск 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 часов .

выпуск 3

Вы не устанавливаете начальное время для средств выбора даты.В документации о реквизитах библиотеки сказано, что вы можете передать 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()}
 />
...