показать разницу в 2 раза - PullRequest
Новая
       27

показать разницу в 2 раза

0 голосов
/ 29 июня 2018

enter image description here Это дает мне вот так, вместо того, чтобы показывать, сколько часов показывается "в часах", но реальная проблема в том, что, хотя дата указана сегодня, а время должно показывать в минутах, что она дает мне часы .. Я должен отображать время, исходя из условия, что если заказ был размещен на несколько минут раньше, он должен показывать "1 min", если несколько часов назад, то "18 hr", если он не соответствует текущей дате, он должен показывать дату в формате * 1006. *. используя moment.js любая помощь приветствуется.

Это мой код:

класс экспорта Уведомления расширяет PureComponent {

  constructor(props) {
        super(props);
        this.state = {
            notificationsData: null,
            isLoading: true
        };
    }
componentDidMount() {
    if (notifications) {
        this.setState({
            notificationsData: notifications.data,
            isLoading: false
        });
    } else {
        this.setState({ isLoading: false });
    }
}

renderIconBadge(icon) {
    return (
        <View style={styles.iconBagdeContainer}>
            <Icon name={icon} size={scale(16)} />
        </View>
    );
}

  getDateFormatted(dateTime) {

  var date = moment(dateTime, "DD/MM/YYYY HH:mm").isValid() ? 
  moment(dateTime, "DD/MM/YYYY HH:mm") 
  : moment(new Date(dateTime), "DD/MM/YYYY HH:mm");
  var diff = date.fromNow();

  if (diff.indexOf("minute") > -1) {
    return diff.substring(0, 2).trim() + " mins";
  } else if (diff.indexOf("hour") > -1) {
     //If it's yesterday
     if(date.day() != moment().day()){
         return date.format("DD/MM/YYYY"); 
     } 
    return diff.substring(0, 2).trim() + " hrs";
  } else {
    return date.format("DD/MM/YYYY");
  }
}

renderNotificationCard = ({ item }) => {
    return (
        <Card style={styles.notificationCardContainer}>
            <View
                style={{
                    flexDirection: "row"
                }}
            >
                {/* <View style={{ flexDirection: "row" }}> */}
                {this.renderIconBadge(item.icon)}
                <View
                    style={{
                        marginLeft: scale(12)
                    }}
                >
                    <Text
                        style={styles.location}
                        numberOfLines={3}
                        ellipsizeMode="tail"
                    >
                        {item.location}
                    </Text>
                    <View style={{ flexDirection: "row" }}>
                        <ClickView onPress={() => {}}>
                            <Text style={styles.viewBooking}>
                                View Booking
                            </Text>
                        </ClickView>
                        <Text style={styles.dateFormat}>
                            {this.getDateFormatted(item.dateTime)}
                        </Text>
                    </View>
                </View>
                {/* </View> */}
            </View>
        </Card>
    );
};

renderNotificationList() {
    const { notificationsData } = this.state;
    return (
        <View style={{ marginTop: scale(10), marginBottom: scale(100) }}>
            {notificationsData.notification.length !== 0 ? (
                <FlatList
                    data={this.state.notificationsData.notification}
                    renderItem={this.renderNotificationCard}
                />
            ) : (
                <View
                    style={{
                        marginTop: scale(100),

                        alignItems: "center"
                    }}
                >
                    <Image source={Images.noTaskImg} />
                    <Text
                        style={{
                            marginTop: scale(20),
                            fontSize: scale(18),
                            fontWeight: "600",
                            color: Colors.body
                        }}
                    >
                        No Notifications found.
                    </Text>
                </View>
            )}
        </View>
    );
}

render() {
    const { isLoading } = this.state;
    return (
        <ThemeView
            theme="dark"
            style={styles.mainContainer}
            rightButton="close"
            onRightButtonPress={() => {
                this.props.navigation.goBack();
            }}
        >
            {isLoading ? (
                <ProgressBar />
            ) : (
                <View>
                    <View
                        style={{ marginTop: scale(Metrics.headerHeight) }}
                    >
                        <Text style={styles.newTasks}>New Tasks</Text>
                        {this.renderNotificationList()}
                    </View>
                </View>
            )}
        </ThemeView>
    );
}

}

Формат данных JSON такой 

{
    id: "1",
    icon: "water",
    location:
        "Your booking water",
    dateTime: "2018-06-12T20:20:52.123Z"
}

Заранее спасибо

Ответы [ 3 ]

0 голосов
/ 29 июня 2018

На самом деле, чтобы проверить разницу, вы можете использовать fromNow () и в зависимости от результата вы можете вернуть свою пользовательскую строку.

Вот как должна быть ваша функция: 

var getDateFormatted = function(dateTime) {

  var date = moment(dateTime, "DD/MM/YYYY HH:mm").isValid() ? 
  moment(dateTime, "DD/MM/YYYY HH:mm") 
  : moment(new Date(dateTime), "DD/MM/YYYY HH:mm");
  var diff = date.fromNow();

  if (diff.indexOf("minute") > -1) {
    return diff.substring(0, 2).trim() + " mins";
  } else if (diff.indexOf("hour") > -1) {
     //If it's yesterday
     if(date.day() != moment().day()){
         return date.format("DD/MM/YYYY"); 
     } 
    return diff.substring(0, 2).trim() + " hrs";
  } else {
    return date.format("DD/MM/YYYY");
  }
}


var getDateFormatted = function(dateTime) {

  var date = moment(dateTime, "DD/MM/YYYY HH:mm").isValid() ?
    moment(dateTime, "DD/MM/YYYY HH:mm") :
    moment(new Date(dateTime), "DD/MM/YYYY HH:mm");
  var diff = date.fromNow();

  if (diff.indexOf("minutes") > -1) {
    return diff.substring(0, 2).trim() + " mins";
  } else if (diff.indexOf("hour") > -1) {
    if (date.day() != moment().day()) {
      return date.format("DD/MM/YYYY");
    }
    return diff.substring(0, 2).trim() + " hrs";
  } else {
    return date.format("DD/MM/YYYY");
  }
}

var data = {
  id: "1",
  icon: "water",
  location: "Your booking water",
  dateTime: "2018-06-12T20:20:52.123Z"
};

console.log(getDateFormatted("28/06/2018 23:00"));
console.log(getDateFormatted("29/06/2018 11:50"));
console.log(getDateFormatted("28/06/2018 01:00"));
console.log(getDateFormatted(data.dateTime));
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
0 голосов
/ 29 июня 2018

Сначала необходимо проверить, является ли дата «сегодня», а если нет, вернуть строку даты в требуемом формате. В противном случае верните время назад в требуемом формате.

Поскольку вам нужно что-то, отличное от значения по умолчанию, возвращаемое моментом.js, и вы не можете написать свой собственный, вы также можете сделать это. Смотри ниже.

Редактировать

Приведенная выше функция ожидает получить объект Date, поэтому, если ваш исходный JSON: 

'{"id":"1","icon":"water","location":"Your booking water","dateTime":"2018-06-12T20:20:52.123Z"}'

тогда вам нужно получить свойство dateTime и превратить его в Date. Обратите внимание, что предоставленная строка будет проанализирована как UTC (учитывая идентификатор часового пояса Z), но результаты функции будут основаны на смещении часового пояса хоста. 

function formatDate(date) {
  var d = new Date();
  var diff = d - date;

  // If yesterday, return a formatted date
  if (d.getDate() != date.getDate()) {
    return moment(date).format('DD/MM/YYYY');
  }

  // If diff less than an hour ago, return minutes
  if (diff < 3.6e6) {
    return (diff/6e4 | 0) + ' min';
  }

  // Otherwise, return hours
  return (diff/3.6e6 | 0) + ' hr';
}

// Some test dates
var a = new Date();
// 3 minutes ago
var b = new Date(a.setMinutes(a.getMinutes() - 3));
// 1 hour and 3 minutes ago
var c = new Date(a.setHours(a.getHours() - 1));
// 2 hour and 3 minutes ago
var d = new Date(a.setHours(a.getHours() - 1));
// 1 day, 2 hour and 3 minutes ago
a.setDate(a.getDate() - 1);

[b,c,d,a].forEach(function(d) {
  console.log(`${moment(d).format('DD/MM/YY HH:mm')} => ${formatDate(d)}`);
});

// Using sample JSON:
var jsonTxt = '{"id":"1", "icon":"water", "location":"Your booking water", "dateTime":"2018-06-12T20:20:52.123Z"}';
var obj = JSON.parse(jsonTxt);

// Without moment.js
console.log(formatDate(new Date(obj.dateTime)));

// With moment.js
console.log(formatDate(moment(obj.dateTime).toDate()));

// Make dateTime 3 minutes ago
var s = b.toISOString(); // UTC 3 mins ago
obj.dateTime = s;
console.log(`${s} => ${formatDate(new Date(obj.dateTime))}`);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>

NB. Обычное предостережение относится к использованию встроенного синтаксического анализатора: если вы можете гарантировать, что строка будет строго соответствовать формату в ECMA-262 с часовым поясом (например, «Z» или ± ЧЧ: мм), то это довольно безопасно для использования. В противном случае используйте анализатор момента.

0 голосов
/ 29 июня 2018

Используйте fromNow () из momentjs . Это даст вам желаемый результат. 

var duration = moment("29/06/18", "DD/MM/YYYY").fromNow(); // in moment("pass your timestamp/valid date")

console.log(duration);
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js"></script>
...