display day and month, without a year according to locale

Question

Is there any better way for getting only day and month from a date including location appropriate separator?

I have a solution that gets separator first:

Answer 1

While the accepted answer does the job by manipulating the pre-defined localized formats Moment provides, there's another way that Moment allows you to extend its localized configuration that may be more suitable in some situations.

If you open up one of the localization files in the npm module, like /moment/locale/de.js, you'll see a list of localized date formats that looks like this:

longDateFormat : {
    LT: 'HH:mm',
    LTS: 'HH:mm:ss',
    L : 'DD.MM.YYYY',
    LL : 'D. MMMM YYYY',
    LLL : 'D. MMMM YYYY HH:mm',
    LLLL : 'ffffdd, D. MMMM YYYY HH:mm'
},

This will give you a good starting point and clue at how to localize for each locale you support. For example, German places the day with a period before the month, where in English, The month comes before the day.

You can then copy and tweak the format you want, by extending the configuration at initialization:

// Update configs with custom date formats per language after
// moment locales are loaded (LMD is a custom format here)
moment.updateLocale('en', { longDateFormat: { LMD: 'MMMM D' } });
moment.updateLocale('de', { longDateFormat: { LMD: 'D. MMMM' } });
// repeat with culturally-correct formatting for other locales you support

function changeLang(value){
  moment.locale(value);
  
  // Retrieve stored custom format
  var format = moment.localeData().longDateFormat('LMD');
  var res = moment().format(format);
  
  $("#result").html(res);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>

<select onchange="changeLang(value)">
  <option value="en">EN</option>
  <option value="de">DE</option>
</select>

<div id="result"></div>

You could also forego extending the configuration, and keep your custom formats in a custom data structure something like this:

var MOMENT_FORMATS = {
  LMD: {
    en: 'MMMM D',
    de: 'D. MMMM'
  }
};
moment().format(MOMENT_FORMATS.LMD[moment.locale()])

Answer 2

As stated in the linked question: One way to do what you need is getting localized longDateFormat and then remove the year part with a regular expression.

Daniel T. highlighted in comments that the solution will not work in locales like en-CA, so I'm going to provide an updated solution that takes in account some other locales that starts with year part.

Probably there are some other locales the are not convered with /.YYYY/ and /YYYY./ RegExp, if you need to support every locale you can target them with ad hoc condition, as I made for ar-ly in the following snippet.

Here a code sample the shows possible output in various locales:

function changeLang(value){
  moment.locale(value);
  
  // Get locale data
  var localeData = moment.localeData();
  var format = localeData.longDateFormat('L');
  
  // Manage custom cases
  if( value === "ar-ly"){
    format = 'D/\u200FM';
  }
  // if( value === ...) possible othter cases
  
  // Check locale format and strip year
  if( format.match(/.YYYY/g) ){
    format = format.replace(/.YYYY/, '');
  }
  if( format.match(/YYYY./g) ){
    format = format.replace(/YYYY./, '');
  }

  var res = moment().format(format);
  
  $("#result").html(res);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment-with-locales.min.js"></script>

<select onchange="changeLang(value)">
  <option value="en">EN</option>
  <option value="en-CA">en-CA (Canada)</option>
  <option value="eo">eo (Esperanto)</option>
  <option value="de">DE</option>
  <option value="it">IT</option>
  <option value="hu">hu (Hungarian)</option>
  <option value="ja">ja (Japanese)</option>
  <option value="lv">lv (Latvian)</option>
  <option value="fr">FR</option>
  <option value="zh-hk">zh-hk - Chinese (Hong Kong)</option>
  <option value="ar-ly">ar-ly - Arabic (Lybia)</option>
</select>

<div id="result"></div>

Answer 3

You can try the regex below and check if it works for you.I tried with different locale it was working as expeted

dateFormat.replace(/Y/ig, '  ').replace(/^\W{1,}|\W{1,}$|\W{3,3}/, '');

Answer 4

Have you considered using Date#toLocaleDateString instead of monentjs?

It takes a JS Date object and options to output a locale date in the format you specify.

Example:

var date = new Date();
var options = { day: 'numeric', month: 'short' };

console.log(date.toLocaleDateString('en-GB', options));
// outputs: Feb 24

var numeric = { day: 'numeric', month: 'numeric' };

console.log(date.toLocaleDateString('en-GB', numeric));
// outputs: 24/02

As pointed out in the comments, it's worth ensuring that your targeted platforms support the toLocaleDateString approach above with options. For instance, this approach isn't currently supported by Android webview as detailed here for toLocaleDateString's Browser_compatibility