<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

  <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
		id="sap-ui-bootstrap" 
		data-sap-ui-libs="sap.m" 
		data-sap-ui-resourceroots='{"view": "./"}' 
		data-sap-ui-theme="sap_belize" 
		data-sap-ui-xx-bindingSyntax="complex">
  </script>

  <script>
    // Best practice would be to set this stuff up in an Component.js
    // but let's not over-complicate stuff for demonstration purposes
    
    var oModel = new sap.ui.model.json.JSONModel();
     // Load JSON in model
    oModel.loadData("locale_F4.json");
    sap.ui.getCore().setModel(oModel, "localeF4Model");
    
    //Load all locales
    sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel("locale_all.json"), "locale_all_model");
    
    sap.ui.localResources("view");  //get access to view folder
    
    var app = new sap.m.App({
      initialPage: "idMain"
    });
    
    var page = sap.ui.view({
      id: "idMain",
      viewName: "view.Main",
      type: sap.ui.core.mvc.ViewType.XML
    });
    
    app.addPage(page);
    app.placeAt("content"); 
  </script>

</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>
# UI5 - Date Picker
Get value as showed in display format
locale_all.json taken from https://gist.github.com/gamache/b933a1587155f133bf6c#file-language-and-locale-codes-json
<sap.ui.core.mvc:View controllerName="view.Main"
    xmlns="sap.m"
    xmlns:core="sap.ui.core"
    xmlns:sap.ui.core.mvc="sap.ui.core.mvc"
    xmlns:f="sap.ui.layout.form"
    xmlns:l="sap.ui.layout">
    <Page title="Date picker - to get date in display format as per locale">
        <content>
          
        	<f:SimpleForm editable="true" width="500px">
        	  <f:content>
        	    <Label text="Locale" />
              <ComboBox items="{path: 'localeF4Model>/data'}"
                        selectionChange="onLocaleChange">
                <core:Item key="{localeF4Model>key}" text="{localeF4Model>key}: {localeF4Model>text}" />
              </ComboBox>
              <Label text="Date with Binding" />
              <DatePicker id="date_01" value="{
                            path:'/dateValue', 
                            type:'sap.ui.model.type.Date', 
                            formatOptions: { 
                                style: 'medium', 
                                strictParsing: true
                            }
                          }"
                          width="250px"/>
              
        	  </f:content>
        	</f:SimpleForm>
          
          <Button text="Get Date in Display Format" press="onGetDate"/>
          <Button text="Get Date in All formats" press="onGetDateInAllFormats"/>
        </content>
    </Page>
</sap.ui.core.mvc:View>
sap.ui.controller("view.Main", {

  onInit: function() {

    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
      dateValue: new Date()
    });

    this.getView().setModel(oModel);
    
  },

  onBeforeRendering: function() {},

  onAfterRendering: function() {},

  onExit: function() {},
  
  onLocaleChange: function(oEvent){
    var sLocaleKey = oEvent.getParameter('selectedItem').getKey();
    
    sap.ui.getCore().getConfiguration().setLanguage(sLocaleKey);
    sap.ui.getCore().getConfiguration().setFormatLocale(sLocaleKey);
    
  },
  
  onGetDate: function(oEvent){
    var oDatePicker = this.getView().byId("date_01");
    sap.m.MessageToast.show(oDatePicker.getValue());
  },
  
  onGetDateInAllFormats: function(){
    //Step 1: get date value from date picker
    var oDatePicker = this.getView().byId("date_01");
    var oDate = oDatePicker.getDateValue();
    
    //Step 2: get all locales from model
    var aLocales = sap.ui.getCore().getModel("locale_all_model").getData();
    
    //Step 3: loop through all locales and get the date formats
    for(var i in aLocales.data){
      console.log("Desc: "+ aLocales.data[i].desc + "  Code: "+ aLocales.data[i].code + "  Date: "+ oDate.toLocaleDateString(aLocales.data[i].code) );
    }
  }

});
{
  "data": [{
      "desc": "Abkhaz",
      "code": "ab"
    }, {
      "desc": "Afar",
      "code": "aa"
    }, {
      "desc": "Afrikaans",
      "code": "af"
    }, {
      "desc": "Akan",
      "code": "ak"
    }, {
      "desc": "Albanian",
      "code": "sq"
    }, {
      "desc": "Amharic",
      "code": "am"
    }, {
      "desc": "Arabic",
      "code": "ar"
    }, {
      "desc": "Aragonese",
      "code": "an"
    }, {
      "desc": "Armenian",
      "code": "hy"
    }, {
      "desc": "Assamese",
      "code": "as"
    }, {
      "desc": "Avaric",
      "code": "av"
    }, {
      "desc": "Avestan",
      "code": "ae"
    }, {
      "desc": "Aymara",
      "code": "ay"
    }, {
      "desc": "Azerbaijani",
      "code": "az"
    }, {
      "desc": "Bambara",
      "code": "bm"
    }, {
      "desc": "Bashkir",
      "code": "ba"
    }, {
      "desc": "Basque",
      "code": "eu"
    }, {
      "desc": "Belarusian",
      "code": "be"
    }, {
      "desc": "Bengali, Bangla",
      "code": "bn"
    }, {
      "desc": "Bihari",
      "code": "bh"
    }, {
      "desc": "Bislama",
      "code": "bi"
    }, {
      "desc": "Bosnian",
      "code": "bs"
    }, {
      "desc": "Breton",
      "code": "br"
    }, {
      "desc": "Bulgarian",
      "code": "bg"
    }, {
      "desc": "Burmese",
      "code": "my"
    }, {
      "desc": "Catalan",
      "code": "ca"
    }, {
      "desc": "Chamorro",
      "code": "ch"
    }, {
      "desc": "Chechen",
      "code": "ce"
    }, {
      "desc": "Chichewa, Chewa, Nyanja",
      "code": "ny"
    }, {
      "desc": "Chinese",
      "code": "zh"
    }, {
      "desc": "Chuvash",
      "code": "cv"
    }, {
      "desc": "Cornish",
      "code": "kw"
    }, {
      "desc": "Corsican",
      "code": "co"
    }, {
      "desc": "Cree",
      "code": "cr"
    }, {
      "desc": "Croatian",
      "code": "hr"
    }, {
      "desc": "Czech",
      "code": "cs"
    }, {
      "desc": "Danish",
      "code": "da"
    }, {
      "desc": "Divehi, Dhivehi, Maldivian",
      "code": "dv"
    }, {
      "desc": "Dutch",
      "code": "nl"
    }, {
      "desc": "Dzongkha",
      "code": "dz"
    }, {
      "desc": "English",
      "code": "en"
    }, {
      "desc": "Esperanto",
      "code": "eo"
    }, {
      "desc": "Estonian",
      "code": "et"
    }, {
      "desc": "Ewe",
      "code": "ee"
    }, {
      "desc": "Faroese",
      "code": "fo"
    }, {
      "desc": "Fijian",
      "code": "fj"
    }, {
      "desc": "Finnish",
      "code": "fi"
    }, {
      "desc": "French",
      "code": "fr"
    }, {
      "desc": "Fula, Fulah, Pulaar, Pular",
      "code": "ff"
    }, {
      "desc": "Galician",
      "code": "gl"
    }, {
      "desc": "Ganda",
      "code": "lg"
    }, {
      "desc": "Georgian",
      "code": "ka"
    }, {
      "desc": "German",
      "code": "de"
    }, {
      "desc": "Greek (modern)",
      "code": "el"
    }, {
      "desc": "Guaraní",
      "code": "gn"
    }, {
      "desc": "Gujarati",
      "code": "gu"
    }, {
      "desc": "Haitian, Haitian Creole",
      "code": "ht"
    }, {
      "desc": "Hausa",
      "code": "ha"
    }, {
      "desc": "Hebrew (modern)",
      "code": "he"
    }, {
      "desc": "Herero",
      "code": "hz"
    }, {
      "desc": "Hindi",
      "code": "hi"
    }, {
      "desc": "Hiri Motu",
      "code": "ho"
    }, {
      "desc": "Hungarian",
      "code": "hu"
    }, {
      "desc": "Icelandic",
      "code": "is"
    }, {
      "desc": "Ido",
      "code": "io"
    }, {
      "desc": "Igbo",
      "code": "ig"
    }, {
      "desc": "Indonesian",
      "code": "id"
    }, {
      "desc": "Interlingua",
      "code": "ia"
    }, {
      "desc": "Interlingue",
      "code": "ie"
    }, {
      "desc": "Inuktitut",
      "code": "iu"
    }, {
      "desc": "Inupiaq",
      "code": "ik"
    }, {
      "desc": "Irish",
      "code": "ga"
    }, {
      "desc": "Italian",
      "code": "it"
    }, {
      "desc": "Japanese",
      "code": "ja"
    }, {
      "desc": "Javanese",
      "code": "jv"
    }, {
      "desc": "Kalaallisut, Greenlandic",
      "code": "kl"
    }, {
      "desc": "Kannada",
      "code": "kn"
    }, {
      "desc": "Kanuri",
      "code": "kr"
    }, {
      "desc": "Kashmiri",
      "code": "ks"
    }, {
      "desc": "Kazakh",
      "code": "kk"
    }, {
      "desc": "Khmer",
      "code": "km"
    }, {
      "desc": "Kikuyu, Gikuyu",
      "code": "ki"
    }, {
      "desc": "Kinyarwanda",
      "code": "rw"
    }, {
      "desc": "Kirundi",
      "code": "rn"
    }, {
      "desc": "Komi",
      "code": "kv"
    }, {
      "desc": "Kongo",
      "code": "kg"
    }, {
      "desc": "Korean",
      "code": "ko"
    }, {
      "desc": "Kurdish",
      "code": "ku"
    }, {
      "desc": "Kwanyama, Kuanyama",
      "code": "kj"
    }, {
      "desc": "Kyrgyz",
      "code": "ky"
    }, {
      "desc": "Lao",
      "code": "lo"
    }, {
      "desc": "Latin",
      "code": "la"
    }, {
      "desc": "Latvian",
      "code": "lv"
    }, {
      "desc": "Limburgish, Limburgan, Limburger",
      "code": "li"
    }, {
      "desc": "Lingala",
      "code": "ln"
    }, {
      "desc": "Lithuanian",
      "code": "lt"
    }, {
      "desc": "Luba-Katanga",
      "code": "lu"
    }, {
      "desc": "Luxembourgish, Letzeburgesch",
      "code": "lb"
    }, {
      "desc": "Macedonian",
      "code": "mk"
    }, {
      "desc": "Malagasy",
      "code": "mg"
    }, {
      "desc": "Malay",
      "code": "ms"
    }, {
      "desc": "Malayalam",
      "code": "ml"
    }, {
      "desc": "Maltese",
      "code": "mt"
    }, {
      "desc": "Manx",
      "code": "gv"
    }, {
      "desc": "Marathi (Marāṭhī)",
      "code": "mr"
    }, {
      "desc": "Marshallese",
      "code": "mh"
    }, {
      "desc": "Mongolian",
      "code": "mn"
    }, {
      "desc": "Māori",
      "code": "mi"
    }, {
      "desc": "Nauruan",
      "code": "na"
    }, {
      "desc": "Navajo, Navaho",
      "code": "nv"
    }, {
      "desc": "Ndonga",
      "code": "ng"
    }, {
      "desc": "Nepali",
      "code": "ne"
    }, {
      "desc": "Northern Ndebele",
      "code": "nd"
    }, {
      "desc": "Northern Sami",
      "code": "se"
    }, {
      "desc": "Norwegian",
      "code": "no"
    }, {
      "desc": "Norwegian Bokmål",
      "code": "nb"
    }, {
      "desc": "Norwegian Nynorsk",
      "code": "nn"
    }, {
      "desc": "Nuosu",
      "code": "ii"
    }, {
      "desc": "Occitan",
      "code": "oc"
    }, {
      "desc": "Ojibwe, Ojibwa",
      "code": "oj"
    }, {
      "desc": "Old Church Slavonic, Church Slavonic,Old Bulgarian",
      "code": "cu"
    }, {
      "desc": "Oriya",
      "code": "or"
    }, {
      "desc": "Oromo",
      "code": "om"
    }, {
      "desc": "Ossetian, Ossetic",
      "code": "os"
    }, {
      "desc": "Panjabi, Punjabi",
      "code": "pa"
    }, {
      "desc": "Pashto, Pushto",
      "code": "ps"
    }, {
      "desc": "Persian (Farsi)",
      "code": "fa"
    }, {
      "desc": "Polish",
      "code": "pl"
    }, {
      "desc": "Portuguese",
      "code": "pt"
    }, {
      "desc": "Pāli",
      "code": "pi"
    }, {
      "desc": "Quechua",
      "code": "qu"
    }, {
      "desc": "Romanian",
      "code": "ro"
    }, {
      "desc": "Romansh",
      "code": "rm"
    }, {
      "desc": "Russian",
      "code": "ru"
    }, {
      "desc": "Samoan",
      "code": "sm"
    }, {
      "desc": "Sango",
      "code": "sg"
    }, {
      "desc": "Sanskrit (Saṁskṛta)",
      "code": "sa"
    }, {
      "desc": "Sardinian",
      "code": "sc"
    }, {
      "desc": "Scottish Gaelic, Gaelic",
      "code": "gd"
    }, {
      "desc": "Serbian",
      "code": "sr"
    }, {
      "desc": "Shona",
      "code": "sn"
    }, {
      "desc": "Sindhi",
      "code": "sd"
    }, {
      "desc": "Sinhala, Sinhalese",
      "code": "si"
    }, {
      "desc": "Slovak",
      "code": "sk"
    }, {
      "desc": "Slovene",
      "code": "sl"
    }, {
      "desc": "Somali",
      "code": "so"
    }, {
      "desc": "Southern Ndebele",
      "code": "nr"
    }, {
      "desc": "Southern Sotho",
      "code": "st"
    }, {
      "desc": "Spanish",
      "code": "es"
    }, {
      "desc": "Sundanese",
      "code": "su"
    }, {
      "desc": "Swahili",
      "code": "sw"
    }, {
      "desc": "Swati",
      "code": "ss"
    }, {
      "desc": "Swedish",
      "code": "sv"
    }, {
      "desc": "Tagalog",
      "code": "tl"
    }, {
      "desc": "Tahitian",
      "code": "ty"
    }, {
      "desc": "Tajik",
      "code": "tg"
    }, {
      "desc": "Tamil",
      "code": "ta"
    }, {
      "desc": "Tatar",
      "code": "tt"
    }, {
      "desc": "Telugu",
      "code": "te"
    }, {
      "desc": "Thai",
      "code": "th"
    }, {
      "desc": "Tibetan Standard, Tibetan, Central",
      "code": "bo"
    }, {
      "desc": "Tigrinya",
      "code": "ti"
    }, {
      "desc": "Tonga (Tonga Islands)",
      "code": "to"
    }, {
      "desc": "Tsonga",
      "code": "ts"
    }, {
      "desc": "Tswana",
      "code": "tn"
    }, {
      "desc": "Turkish",
      "code": "tr"
    }, {
      "desc": "Turkmen",
      "code": "tk"
    }, {
      "desc": "Twi",
      "code": "tw"
    }, {
      "desc": "Ukrainian",
      "code": "uk"
    }, {
      "desc": "Urdu",
      "code": "ur"
    }, {
      "desc": "Uyghur",
      "code": "ug"
    }, {
      "desc": "Uzbek",
      "code": "uz"
    }, {
      "desc": "Venda",
      "code": "ve"
    }, {
      "desc": "Vietnamese",
      "code": "vi"
    }, {
      "desc": "Volapük",
      "code": "vo"
    }, {
      "desc": "Walloon",
      "code": "wa"
    }, {
      "desc": "Welsh",
      "code": "cy"
    }, {
      "desc": "Western Frisian",
      "code": "fy"
    }, {
      "desc": "Wolof",
      "code": "wo"
    }, {
      "desc": "Xhosa",
      "code": "xh"
    }, {
      "desc": "Yiddish",
      "code": "yi"
    }, {
      "desc": "Yoruba",
      "code": "yo"
    }, {
      "desc": "Zhuang, Chuang",
      "code": "za"
    }, {
      "desc": "Zulu",
      "code": "zu"
    },

    {
      "desc": "Arabic - Algeria",
      "code": "ar-dz"
    }, {
      "desc": "Arabic - Bahrain",
      "code": "ar-bh"
    }, {
      "desc": "Arabic - Egypt",
      "code": "ar-eg"
    }, {
      "desc": "Arabic - Iraq",
      "code": "ar-iq"
    }, {
      "desc": "Arabic - Jordan",
      "code": "ar-jo"
    }, {
      "desc": "Arabic - Kuwait",
      "code": "ar-kw"
    }, {
      "desc": "Arabic - Lebanon",
      "code": "ar-lb"
    }, {
      "desc": "Arabic - Libya",
      "code": "ar-ly"
    }, {
      "desc": "Arabic - Morocco",
      "code": "ar-ma"
    }, {
      "desc": "Arabic - Oman",
      "code": "ar-om"
    }, {
      "desc": "Arabic - Qatar",
      "code": "ar-qa"
    }, {
      "desc": "Arabic - Saudi Arabia",
      "code": "ar-sa"
    }, {
      "desc": "Arabic - Syria",
      "code": "ar-sy"
    }, {
      "desc": "Arabic - Tunisia",
      "code": "ar-tn"
    }, {
      "desc": "Arabic - United Arab Emirates",
      "code": "ar-ae"
    }, {
      "desc": "Arabic - Yemen",
      "code": "ar-ye"
    }, {
      "desc": "Azeri - Cyrillic",
      "code": "az-az"
    }, {
      "desc": "Azeri - Latin",
      "code": "az-az"
    }, {
      "desc": "Chinese - China",
      "code": "zh-cn"
    }, {
      "desc": "Chinese - Hong Kong SAR",
      "code": "zh-hk"
    }, {
      "desc": "Chinese - Macau SAR",
      "code": "zh-mo"
    }, {
      "desc": "Chinese - Singapore",
      "code": "zh-sg"
    }, {
      "desc": "Chinese - Taiwan",
      "code": "zh-tw"
    }, {
      "desc": "Dutch - Belgium",
      "code": "nl-be"
    }, {
      "desc": "Dutch - Netherlands",
      "code": "nl-nl"
    }, {
      "desc": "English - Australia",
      "code": "en-au"
    }, {
      "desc": "English - Belize",
      "code": "en-bz"
    }, {
      "desc": "English - Canada",
      "code": "en-ca"
    }, {
      "desc": "English - Caribbean",
      "code": "en-cb"
    }, {
      "desc": "English - Great Britain",
      "code": "en-gb"
    }, {
      "desc": "English - India",
      "code": "en-in"
    }, {
      "desc": "English - Ireland",
      "code": "en-ie"
    }, {
      "desc": "English - Jamaica",
      "code": "en-jm"
    }, {
      "desc": "English - New Zealand",
      "code": "en-nz"
    }, {
      "desc": "English - Phillippines",
      "code": "en-ph"
    }, {
      "desc": "English - Southern Africa",
      "code": "en-za"
    }, {
      "desc": "English - Trinidad",
      "code": "en-tt"
    }, {
      "desc": "English - United States",
      "code": "en-us"
    }, {
      "desc": "French - Belgium",
      "code": "fr-be"
    }, {
      "desc": "French - Canada",
      "code": "fr-ca"
    }, {
      "desc": "French - France",
      "code": "fr-fr"
    }, {
      "desc": "French - Luxembourg",
      "code": "fr-lu"
    }, {
      "desc": "French - Switzerland",
      "code": "fr-ch"
    }, {
      "desc": "Gaelic - Ireland",
      "code": "gd-ie"
    }, {
      "desc": "German - Austria",
      "code": "de-at"
    }, {
      "desc": "German - Germany",
      "code": "de-de"
    }, {
      "desc": "German - Liechtenstein",
      "code": "de-li"
    }, {
      "desc": "German - Luxembourg",
      "code": "de-lu"
    }, {
      "desc": "German - Switzerland",
      "code": "de-ch"
    }, {
      "desc": "Italian - Italy",
      "code": "it-it"
    }, {
      "desc": "Italian - Switzerland",
      "code": "it-ch"
    }, {
      "desc": "Malay - Brunei",
      "code": "ms-bn"
    }, {
      "desc": "Malay - Malaysia",
      "code": "ms-my"
    }, {
      "desc": "Norwegian - Bokml",
      "code": "no-no"
    }, {
      "desc": "Norwegian - Nynorsk",
      "code": "no-no"
    }, {
      "desc": "Portuguese - Brazil",
      "code": "pt-br"
    }, {
      "desc": "Portuguese - Portugal",
      "code": "pt-pt"
    }, {
      "desc": "Romanian - Moldova",
      "code": "ro-mo"
    }, {
      "desc": "Russian - Moldova",
      "code": "ru-mo"
    }, {
      "desc": "Serbian - Cyrillic",
      "code": "sr-sp"
    }, {
      "desc": "Serbian - Latin",
      "code": "sr-sp"
    }, {
      "desc": "Spanish - Argentina",
      "code": "es-ar"
    }, {
      "desc": "Spanish - Bolivia",
      "code": "es-bo"
    }, {
      "desc": "Spanish - Chile",
      "code": "es-cl"
    }, {
      "desc": "Spanish - Colombia",
      "code": "es-co"
    }, {
      "desc": "Spanish - Costa Rica",
      "code": "es-cr"
    }, {
      "desc": "Spanish - Dominican Republic",
      "code": "es-do"
    }, {
      "desc": "Spanish - Ecuador",
      "code": "es-ec"
    }, {
      "desc": "Spanish - El Salvador",
      "code": "es-sv"
    }, {
      "desc": "Spanish - Guatemala",
      "code": "es-gt"
    }, {
      "desc": "Spanish - Honduras",
      "code": "es-hn"
    }, {
      "desc": "Spanish - Mexico",
      "code": "es-mx"
    }, {
      "desc": "Spanish - Nicaragua",
      "code": "es-ni"
    }, {
      "desc": "Spanish - Panama",
      "code": "es-pa"
    }, {
      "desc": "Spanish - Paraguay",
      "code": "es-py"
    }, {
      "desc": "Spanish - Peru",
      "code": "es-pe"
    }, {
      "desc": "Spanish - Puerto Rico",
      "code": "es-pr"
    }, {
      "desc": "Spanish - Spain (Traditional)",
      "code": "es-es"
    }, {
      "desc": "Spanish - Uruguay",
      "code": "es-uy"
    }, {
      "desc": "Spanish - Venezuela",
      "code": "es-ve"
    }, {
      "desc": "Swedish - Finland",
      "code": "sv-fi"
    }, {
      "desc": "Swedish - Sweden",
      "code": "sv-se"
    }, {
      "desc": "Uzbek - Cyrillic",
      "code": "uz-uz"
    }, {
      "desc": "Uzbek - Latin",
      "code": "uz-uz"
    }
  ]
}
{
  "data": [{
    "key": "en-GB",
    "text": "UK"
  }, {
    "key": "en-US",
    "text": "US"
  }, {
    "key": "ar-eg",
    "text": "Egypt"
  },{
    "key": "zh-cn",
    "text": "Chinese - China"
  }]
}