show difference in 2 times


show difference in 2 times



enter image description here Its giving me like this instead of showing how many hours its showing "in hrs" but the real issue is even though the date is todays and time should show in minutes its giving me in hours..
I have to display time based on condition that if the order has been placed few minutes earlier it should show "1 min", if few hours ago then "18 hr" if it is not of the present date it should show date in the format "29/06/18". using moment.js any help is appreciated.


"1 min"


"18 hr"


"29/06/18"


moment.js



This is my code:



export class Notifications extends 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 data format is like this


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



Thanks in advance




3 Answers
3



Use fromNow() of momentjs. It will give you desired output.




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

console.log(duration);


https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js





Yeah, that is the function to achieve that. Just a small note for @abhijith you need convert the "29/06/18" into a date var d = new Date("29/06/18"); that should do. and then var duration = moment(d).fromNow();
– Adrian Grzywaczewski
Jun 29 at 8:49


var d = new Date("29/06/18");


var duration = moment(d).fromNow();





@AdrianGrzywaczewski NO. It will not work. Check my answer for how to pass date in moment().
– VicJordan
Jun 29 at 9:00





appreciate your help guys... But i do not want to hard code today's date is there any work around for that
– abhijith
Jun 29 at 9:55





@abhijith Problem is that you don’t have provided enough information in your question. Add some examples of input dates so that I can give you solution accordingly
– VicJordan
Jun 29 at 9:57






@VicJordan i have edited the question please refer it.
– abhijith
Jun 29 at 10:02



Actually to check the difference you can use fromNow() and according to the result, you can return your custom string.



This is how should be your function:


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


https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js





Thanks for the help.....But i don't want to display hours ago or days ago.
– abhijith
Jun 29 at 10:10





@abhijith Oh my bad, I edited the answer.
– chŝdk
Jun 29 at 10:19





thanks a lot what if i get the date in this format "2018-06-12T20:20:52.123Z"
– abhijith
Jun 29 at 10:33





how to convert "2018-06-12T20:20:52.123Z" into "DD/MM/YYYY HH:mm" format.
– abhijith
Jun 29 at 10:37





@abhijith You can just wrap it in new Date(data.dateTime) before passing it, take a look at the example in my snippet.
– chŝdk
Jun 29 at 10:38


new Date(data.dateTime)



You first need to test if the date is "today" and if not, return a date string in the required format. Otherwise, return the time ago in the required format.



Since you want something different to the default "from now" returned by moment.js and it's not difficult to write your own, you might as well do that. See below.



The above function expects to get a Date object, so if your source JSON is:


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



then you need to get the dateTime property and turn it into a Date. Note that the supplied string will be parsed as UTC (given the Z timezone identifier) but the results of the function will be based on the host timezone offset.




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


https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.js



NB. The usual caveat applies to using the built-in parser: if you can guarantee that the string will strictly comply with the format in ECMA-262 with a timezone (e.g. "Z" or ±HH:mm) then it's fairly safe to use. Otherwise, use the moment parser.





Thanks for your effort but if i use date.getDate() it gives me an error saying undefined is not a function. This is exactly what i need.. Please help
– abhijith
22 hours ago






You need to pass a Date to the function, so something like: formatDate(new Date(obj.dateTime)) which is equivalent to formatDate(new Date("2018-06-12T20:20:52.123Z")). Make sure the format is correct though, any deviation from the version of ISO 8601 in ECMA-262 will likely give different results in different browsers.
– RobG
22 hours ago


formatDate(new Date(obj.dateTime))


formatDate(new Date("2018-06-12T20:20:52.123Z"))





I have edited the code above where do i add this function please help me.. I'm new to this.
– abhijith
21 hours ago






@abhijith—change this.getDateFormatted to this.formatDate since that's the name of your function (or change the name of the function to getDateFormatted).
– RobG
21 hours ago



this.getDateFormatted


this.formatDate





Still getting the same error... by the way what is the use of this- (diff/6e4 | 0)
– abhijith
21 hours ago






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Comments

Post a Comment

Popular posts from this blog

paramiko-expect timeout is happening after executing the command

paramiko-expect timeout is happening after executing the command Can someone help me why timeout is happening after executing the command .I am trying to SSH to a machine and execute a command.I want to store the result of the executed command . I have referred paramiko-timeout but i didn't get my expected result. import traceback try: import paramiko except ImportError: raise Exception("Please install paramiko , pip install paramiko") import pexpect from paramiko_expect import SSHClientInteraction def main(): HOSTNAME = "minion5.net" USERNAME = "root" PASSWORD = "help@432" PROMPT = "root@*:~$s+" try: client = paramiko.SSHClient() client.load_system_host_keys() client.set_missing_host_key_policy(paramiko.AutoAddPolicy()) client.connect(hostname=HOSTNAME, username=USERNAME, password=PASSWORD) with SSHClientInteraction(client, timeout=20, display=True) as interact: ...
Read more

Opening a url is failing in Swift

Opening a url is failing in Swift breakpointing inside the callback and logging success shows false. I added itms-apps to my plist: LSApplicationQueriesSchemes and put this in my app delegate: func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool { return true } func moreTapped() { let url = NSURL(string: "itms-apps://itunes.com/developer/quantum-productions/id979315877") if #available(iOS 10.0, *) { UIApplication.shared.open(url! as URL, options: [:], completionHandler: {(success: Bool) in }) } else { UIApplication.shared.openURL(url! as URL) } } Are you testing on a real device? – rmaddy Jun 21 at 23:57 I try on a device, get "Cannot Connect to App Store". Device is online ...
Read more

Export result set on Dbeaver to CSV

Export result set on Dbeaver to CSV Normally I use Dbeaver for windows and always export my result set like this: run my query --> select the result --> export the result set --> select export to clipboard --> done This step by step puts my result set in my clipboard and I can paste it wherever I want to work with it. The problem is that now I am using dbeaver for mac and this guide is not working. I can go on until the moment that I select my result set like in the image below: exporting data set But once I go further in the process, in the last step I get: no query Note that in "source" it was suppose to show the query that originated the result set, but instead it says just "select. As a result it does't select my result or anything (besides being "successful"). Normally my query would show up there automatically and I couldn't find any option that corrects this problem in the menus. Please help me! Thanks. Aft...
Read more