Get a humanized, "Morning", "Afternoon", "Evening" from moment.js **Great for user greetings!**

momentjs.humanized.triplesplit.time.js

function getGreetingTime (m) {
	var g = null; //return g
	
	if(!m || !m.isValid()) { return; } //if we can't find a valid or filled moment, we return.
	
	var split_afternoon = 12 //24hr time to split the afternoon
	var split_evening = 17 //24hr time to split the evening
	var currentHour = parseFloat(m.format("HH"));
	
	if(currentHour >= split_afternoon && currentHour <= split_evening) {
		g = "afternoon";
	} else if(currentHour >= split_evening) {
		g = "evening";
	} else {
		g = "morning";
	}
	
	return g;
}

/* USE
    //The var "humanizedGreeting" below will equal (assuming the time is 8pm) "Good evening, James."
    
    var user = "James";
    var humanizedGreeting = "Good " + getGreetingTime(moment()) + ", " + user + ".";
*/

Good stuff! Thanks!

Cool

thanks

Thanks James!

ES6ified:

getGreetingTime = (currentTime) => {
  if (!currentTime || !currentTime.isValid()) { return 'Hello'; }

  const splitAfternoon = 12; // 24hr time to split the afternoon
  const splitEvening = 17; // 24hr time to split the evening
  const currentHour = parseFloat(currentTime.format('HH'));

  if (currentHour >= splitAfternoon && currentHour <= splitEvening) {
    // Between 12 PM and 5PM
    return 'Good afternoon';
  } else if (currentHour >= splitEvening) {
    // Between 5PM and Midnight
    return 'Good evening';
  }
  // Between dawn and noon
  return 'Good morning';
}

Nice contribution Allan.

Minor correction: I guess the 1st if condition should have currentHour < splitEvening instead of currentHour <= splitEvening. Or else anywhere between 5pm-6pm it'll make it afternoon. :)

Thanks, Allan!

If someone looking for vanilla JS solution:

const renderWelcomeMsg = (currentTime = new Date()) => {
  const currentHour = currentTime.getHours()
  const splitAfternoon = 12; // 24hr time to split the afternoon
  const splitEvening = 17; // 24hr time to split the evening

  if (currentHour >= splitAfternoon && currentHour <= splitEvening) {
    // Between 12 PM and 5PM
    return 'Good afternoon';
  } else if (currentHour >= splitEvening) {
    // Between 5PM and Midnight
    return 'Good evening';
  }
  // Between dawn and noon
  return 'Good morning';
}

  greetingText = () => {
    const now = moment()
    const currentHour = now.hour()
      if (currentHour >= 12 && currentHour <=17) return "Good Afternoon,"
      else if (currentHour <= 18) return "Good Evening,"
      else return "Good Morning,"
  }

Simplify the time interval:

if ( currentHour < 12 ) {
  // Before 12PM
  return 'Good morning';
} else if ( currentHour < 18 ) {
  // After 12pm, before 6PM
  return 'Good afternoon';
} else {
  // After 6PM
  return 'Good evening';
}

@yasso1am, better still

    currentHour () {
      const currentHour = this.Moment().format("HH");
      if (currentHour == 0 || currentHour < 12) return "Good Morning"
      else if (currentHour <= 19) return "Good Afternon"
      else return "Good Evening"
    }

@yasso1am, I have changed the code for the local timezone

greetingText = () => {
const now = moment()
const currentHour = now.local().hour()
if (currentHour >= 12 && currentHour <=17) return "Good Afternoon"
else if (currentHour <= 18) return "Good Evening"
else return "Good Morning"
}

@yasso1am, I have changed the code for the local timezone

greetingText = () => {
const now = moment()
const currentHour = now.local().hour()
if (currentHour >= 12 && currentHour <=17) return "Good Afternoon"
else if (currentHour <= 18) return "Good Evening"
else return "Good Morning"
}

Newbie question, how would i format that for a react component?

@marquez138 I'm not sure I understand your question. You could declare this function from inside your component and then call it inside of your return()

const ExampleComponent: React.FunctionComponent = () => {

  const greetingText = () => {
    const now = moment()
    const currentHour = now.local().hour()
    if (currentHour >= 12 && currentHour <=17) return "Good Afternoon"
    else if (currentHour <= 18) return "Good Evening"
    else return "Good Morning"
  }

  return (
    <div>
      <h1> {greetingText()} </h1> 
    </div>
  ) 

}

@yasso1am, I have changed the code for the local timezone

greetingText = () => {
const now = moment()
const currentHour = now.local().hour()
if (currentHour >= 12 && currentHour <=17) return "Good Afternoon"
else if (currentHour <= 18) return "Good Evening"
else return "Good Morning"
}

Newbie question, how would i format that for a react component?

create a class named as a commonFunction

export const greetingText = () => { const now = moment(); const currentHour = now.local().hour(); if (currentHour >= 12 && currentHour <= 17) return 'Good Afternoon'; else if (currentHour <= 18) return 'Good Evening'; else return 'Good Morning'; };
to use

import {greetingText } from '../commonFunction' <Text>{greetingText()}</Text>

  greetingText = () => {
    const now = moment()
    const currentHour = now.hour()
      if (currentHour >= 12 && currentHour <=17) return "Good Afternoon,"
      else if (currentHour <= 18) return "Good Evening,"
      else return "Good Morning,"
  }

Why 'Good evening' is <= 18, i think it should be >= 18.
Or i am wrong ?

const currentHour = moment().format('HH');
const dayTime = currentHour < 12 ? 'Morning' : currentHour <= 17 ? 'Afternoon' : 'Evening';

To anyone finding this from Google like I did, I set mine up like this:

const currentHour = new Date().getHours();

const greetingMessage =
  currentHour >= 4 && currentHour < 12 ? // after 4:00AM and before 12:00PM
  'Good morning.' :
  currentHour >= 12 && currentHour <= 17 ? // after 12:00PM and before 6:00pm
  'Good afternoon.' :
  currentHour > 17 || currentHour < 4 ? // after 5:59pm or before 4:00AM (to accommodate night owls)
  'Good evening.' : // if for some reason the calculation didn't work
  'Welcome'

console.log(greetingMessage)

Because I think people looking at their computer or phone between 12AM and 4AM are more likely staying up late than waking up early 😉

To anyone finding this from Google like I did, I set mine up like this:

const currentHour = new Date().getHours();

const greetingMessage =
  currentHour >= 4 && currentHour < 12 ? // after 4:00AM and before 12:00PM
  'Good morning.' :
  currentHour >= 12 && currentHour <= 17 ? // after 12:00PM and before 6:00pm
  'Good afternoon.' :
  currentHour > 17 || currentHour < 4 ? // after 5:59pm or before 4:00AM (to accommodate night owls)
  'Good evening.' : // if for some reason the calculation didn't work
  'Welcome'

console.log(greetingMessage)

Because I think people looking at their computer or phone between 12AM and 4AM are more likely staying up late than waking up early 😉

Works like a cham, thanks @danielcolinjames

I did a little spin off of @danielcolinjames

const MORNING = 'MORNING';
const AFTERNOON = 'AFTERNOON';
const EVENING = 'EVENING';

const getTimeOfDay = () => {
  const currentHour = new Date().getHours();
  const MORNING = 'MORNING', AFTERNOON = 'AFTERNOON', EVENING = 'EVENING';
  const results = [ MORNING, AFTERNOON, EVENING ];
  const idx = currentHour >= 4 && currentHour < 12 ? 0 : currentHour >= 12 && currentHour <= 17 ? 1 : 2

  return results[idx];
}

export { getTimeOfDay, MORNING, AFTERNOON, EVENING }

I then use it like:

if (getTimeOfDay() === MORNING) {
...
}

To anyone finding this from Google like I did, I set mine up like this:

const currentHour = new Date().getHours();

const greetingMessage =
  currentHour >= 4 && currentHour < 12 ? // after 4:00AM and before 12:00PM
  'Good morning.' :
  currentHour >= 12 && currentHour <= 17 ? // after 12:00PM and before 6:00pm
  'Good afternoon.' :
  currentHour > 17 || currentHour < 4 ? // after 5:59pm or before 4:00AM (to accommodate night owls)
  'Good evening.' : // if for some reason the calculation didn't work
  'Welcome'

console.log(greetingMessage)

Because I think people looking at their computer or phone between 12AM and 4AM are more likely staying up late than waking up early 😉

Haha...the best and easy!

I'm just popping in to give my thanks to OP and all the comments below. It's fun seeing everyone riff on such a simple code snippit.

To anyone finding this from Google like I did, I set mine up like this:

const currentHour = new Date().getHours();

const greetingMessage =
  currentHour >= 4 && currentHour < 12 ? // after 4:00AM and before 12:00PM
  'Good morning.' :
  currentHour >= 12 && currentHour <= 17 ? // after 12:00PM and before 6:00pm
  'Good afternoon.' :
  currentHour > 17 || currentHour < 4 ? // after 5:59pm or before 4:00AM (to accommodate night owls)
  'Good evening.' : // if for some reason the calculation didn't work
  'Welcome'

console.log(greetingMessage)

Because I think people looking at their computer or phone between 12AM and 4AM are more likely staying up late than waking up early 😉

Fair enough, but let's just shift midnight by 4 hours, and simplify the expressions.

let currentHour = new Date().getHours();
if (currentHour < 4) {  // After midnight, but before 4am
  currentHour = currentHour + 24
}

const greetingMessage =
  currentHour < 12 ? // after 4:00AM and before 12:00PM
  'Good morning.' :
  currentHour < 18 ? // after 12:00PM and before 6:00pm
  'Good afternoon.' :
  currentHour < 28 ? // // after 5:59pm or before 4:00AM (to accommodate night owls)
  'Good evening.' : // if for some reason the calculation didn't work
  'Welcome'