Tomorrow, today and yesterday with MomentJS

JavascriptDateMomentjs

Javascript Problem Overview


I'd like the moment().fromNow() functionality, but when the date is close it is too precise - ex. I don't want it to show 'in 3 hours' but 'today' - so basically with a 'daily' precision.

I tried using the moment().calendar() function, it doesn't format if the date difference is more than 1 day

Javascript Solutions


Solution 1 - Javascript

You can also do this to get the date for today and tomorrow and yesterday

let today     = moment();

let tomorrow  = moment().add(1,'days');

let yesterday = moment().add(-1, 'days');

Solution 2 - Javascript

I use a combination of add() and endOf() with moment

//...
const today = moment().endOf('day')
const tomorrow = moment().add(1, 'day').endOf('day')

if (date < today) return 'today'
if (date < tomorrow) return 'tomorrow'
return 'later'
//...

[EDIT 2022-01-04] I suggest you to use now dayjs which has the very same API as moment and is lightweight ;)

Solution 3 - Javascript

You can customize the way that both the .fromNow and the .calendar methods display dates using moment.updateLocale. The following code will change the way that .calendar displays as per the question:

moment.updateLocale('en', {
    calendar : {
        lastDay : '[Yesterday]',
        sameDay : '[Today]',
        nextDay : '[Tomorrow]',
        lastWeek : '[Last] dddd',
        nextWeek : '[Next] dddd',
        sameElse : 'L'
    }
});

Based on the question, it seems like the .calendar method would be more appropriate -- .fromNow wants to have a past/present prefix/suffix, but if you'd like to find out more you can read the documentation at http://momentjs.com/docs/#/customization/relative-time/.

To use this in only one place instead of overwriting the locales, pass a string of your choice as the first argument when you define the moment.updateLocale and then invoke the calendar method using that locale (eg. moment.updateLocale('yesterday-today').calendar( /* moment() or whatever */ ))

EDIT: Moment ^2.12.0 now has the updateLocale method. updateLocale and locale appear to be functionally the same, and locale isn't yet deprecated, but updated the answer to use the newer method.

Solution 4 - Javascript

Requirements:

  • When the date is further away, use the standard moment().fromNow() functionality.
  • When the date is closer, show "today", "yesterday", "tomorrow", etc.

Solution:

// call this function, passing-in your date
function dateToFromNowDaily( myDate ) {

    // get from-now for this date
    var fromNow = moment( myDate ).fromNow();

    // ensure the date is displayed with today and yesterday
    return moment( myDate ).calendar( null, {
        // when the date is closer, specify custom values
        lastWeek: '[Last] dddd',
        lastDay:  '[Yesterday]',
        sameDay:  '[Today]',
        nextDay:  '[Tomorrow]',
        nextWeek: 'dddd',
        // when the date is further away, use from-now functionality             
        sameElse: function () {
            return "[" + fromNow + "]";
        }
    });
}

NB: From version 2.14.0, the formats argument to the calendar function can be a callback, see http://momentjs.com/docs/#/displaying/calendar-time/.

Solution 5 - Javascript

You can use this:


const today     = moment();

const tomorrow  = moment().add(1, 'days');

const yesterday = moment().subtract(1, 'days');

Solution 6 - Javascript

I have similar solution, but allows to use locales:

    let date = moment(someDate);
    if (moment().diff(date, 'days') >= 2) {
        return date.fromNow(); // '2 days ago' etc.
    }
    return date.calendar().split(' ')[0]; // 'Yesterday', 'Today', 'Tomorrow'

Solution 7 - Javascript

Here is how I do that using moment:

  let today = moment().format('DD MMMM YYYY');

  let tomorrow = moment().add(1, 'days').format('DD MMMM YYYY').toString();

  let yesterday = moment().subtract(1, 'days').startOf('day').format('DD MMMM YYYY').toString();

Solution 8 - Javascript

From 2.10.5 moment supports specifying calendar output formats per invocation For a more detailed documentation check Moment - Calendar.

**Moment 2.10.5**
moment().calendar(null, {
  sameDay: '[Today]',
  nextDay: '[Tomorrow]',
  nextWeek: 'dddd',
  lastDay: '[Yesterday]',
  lastWeek: '[Last] dddd',
  sameElse: 'DD/MM/YYYY'
});

From 2.14.0 calendar can also take a callback to return values.

**Moment 2.14.0**
    moment().calendar(null, {
     sameDay: function (now) {
       if (this.isBefore(now)) {
         return '[Will Happen Today]';
       } else {
        return '[Happened Today]';
       }
       /* ... */
      }
    });

Solution 9 - Javascript

In Moment.js, the from() method has the daily precision you're looking for:

var today = new Date();
var tomorrow = new Date();
var yesterday = new Date();
tomorrow.setDate(today.getDate()+1);
yesterday.setDate(today.getDate()-1);

moment(today).from(moment(yesterday)); // "in a day"
moment(today).from(moment(tomorrow)); // "a day ago" 

moment(yesterday).from(moment(tomorrow)); // "2 days ago" 
moment(tomorrow).from(moment(yesterday)); // "in 2 days"

Solution 10 - Javascript

So this is what I ended up doing

var dateText = moment(someDate).from(new Date());
var startOfToday = moment().startOf('day');
var startOfDate = moment(someDate).startOf('day');
var daysDiff = startOfDate.diff(startOfToday, 'days');
var days = {
  '0': 'today',
  '-1': 'yesterday',
  '1': 'tomorrow'
};

if (Math.abs(daysDiff) <= 1) {
  dateText = days[daysDiff];
}

Solution 11 - Javascript

You can use .add() and .subtract() method to get yesterday and tomorrow date. Then use format method to get only date .format("D/M/Y"), D stand for Day, M for Month, Y for Year. Check in Moment Docs

 let currentMilli = Date.now()
 let today = Moment(currentMilli).format("D/M/Y");
 let tomorrow = Moment(currentMilli).add(1, 'days').format("D/M/Y");
 let yesterday = Moment(currentMilli).subtract(1, 'days').format("D/M/Y");

Result will be:

Current Milli - 1576693800000
today - 19/12/2019
tomorrow - 18/12/2019
yesterday - 18/12/2019

Solution 12 - Javascript

const date = moment(YOUR_DATE)
return (moment().diff(date, 'days') >= 2) ? date.fromNow() : date.calendar().split(' ')[0]

Solution 13 - Javascript

enter image description here

Add Past and future date in Date time picker in react-native

import DateTimePickerModal from "react-native-modal-datetime-picker";
import moment from 'moment';


 let addFutureDay = new Date();
    addFutureDay = moment(addFutureDay).add(2, 'day').format('MM/DD/YYYY');
    const FutureMonthAdd = moment(addFutureDay, 'MM/DD/YYYY').toDate();
   
    let addPastDate = new Date();
    addPastDate = moment(addPastDate).add(-2, 'day').format('MM/DD/YYYY');
    const PastMonthAdd = moment(addPastDate, 'MM/DD/YYYY').toDate();

    return (
        <View>
            <Text> DatePickerDemo </Text>
            <Button title="Show Date Picker" onPress={showDatePicker} />
            <DateTimePickerModal
                isVisible={isDatePickerVisible}
                mode="date"
                minimumDate={PastMonthAdd}
                maximumDate={FutureMonthAdd}
                onConfirm={handleConfirm}
                onCancel={hideDatePicker}
            />

        </View>
    )

const formatedDate= moment(date).format("DD-MM-YYYY hh:mm:ss a")

const formatedDate2= moment(date).format("DD-MM-YYYY hh:mm A") // DD-MM-YYYY hh:mm a

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionZiarnoView Question on Stackoverflow
Solution 1 - JavascriptHussienKView Answer on Stackoverflow
Solution 2 - JavascriptguillaumepotierView Answer on Stackoverflow
Solution 3 - JavascriptsvangordonView Answer on Stackoverflow
Solution 4 - JavascriptBenView Answer on Stackoverflow
Solution 5 - JavascriptAlexandr EgorovView Answer on Stackoverflow
Solution 6 - JavascriptadaView Answer on Stackoverflow
Solution 7 - JavascriptIffatView Answer on Stackoverflow
Solution 8 - JavascriptpravinView Answer on Stackoverflow
Solution 9 - JavascripttwerntView Answer on Stackoverflow
Solution 10 - JavascriptZiarnoView Answer on Stackoverflow
Solution 11 - JavascriptAshutoshView Answer on Stackoverflow
Solution 12 - JavascriptDodyView Answer on Stackoverflow
Solution 13 - JavascriptSourabh GeraView Answer on Stackoverflow