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

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>