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:

 function getDateSep() {
   var temp = moment().format('L');
   var locale = moment().locale;
   var datesep = temp.substring(5, 6);
   return datesep;
}

and then builds the date like this:

var sep = function getDateSep()
var date = date.format('D' + sep + 'M'+ sep)

Is there a solution that builds the whole date dynamically?

The result I want to achieve would be like: 31.01 (dd.mm) 31/01 (dd/mm) 01.31 (mm.dd) 01/31 (mm/dd) etc

Answer 1

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

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/\‏M'; } // 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

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 : 'dddd, 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 4

您可以尝试下面的正则表达式并检查它是否适合您。我尝试使用不同的语言环境，它按预期工作

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