CODEWITHSUNDEEP
sapui5
fabiopagoti
fabiopagoti

Reputation: 1541

sap.ui.model.type.Date - Wrong value when using style short/medium/long/full

I came across an error which seems to be a bug in OpenUI5.. but as I am not 100% sure of that I wanted to check if I am missing something.

I'm using a javascript object as the data source of a JSONModel. This object has a "birthday" attribute in a string format yyyymmdd. I already attached the JSONModel to the core object so it can be used in all controls on my app.

    obj = { birthday: "19890727" }; // July 27, 1989

    var model = new sap.ui.model.json.JSONModel();
    model.setData(obj);

    sap.ui.getCore().setModel(model);

Then I trying to use data binding so I can display the birthday on a TextView. As I don't want to display this date on the same format from the model, I'm using a type object to format it.

var type_date = new sap.ui.model.type.Date({source: {}});
text_view_birthday.bindProperty("text",{
    path: "/birthday",
    type: type_date
});

The following Date object also works great:

var type_date = new sap.ui.model.type.Date({
                    source: {
                        pattern: "yyyymmdd"
                    },
                    pattern: "dd - mm - yy"
                });

I was playing around with class sap.ui.model.type.Date and when I try to use it passing the style property with any of its possible values (short/medium/long/full), the displayed date is actually different from the model. Instead of July, UI5 is displaying January! 

var type_date =
        new sap.ui.model.type.Date({
            source: {
                pattern: "yyyymmdd"
            },
            style: "short"
        });
// Short: 1/27/89
// Medium: Jan 27, 1989
// Long: January 27, 1989
// Full: Friday, January 27, 1989

I tried to debug sap-ui-core-dbg.. it's beyond me... I had no success

IMO there are two possible situations

  1. I'm using Date class incorrectly (and I created this snippet based on UI5 Developer Guide the documentation of as Model Type classes is quite poor).
  2. It's a bug!

See the full source below.

<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>

<head>
  <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons">
  </script>
  <meta charset="utf-8">
  <title>JS Bin</title>

  <script>
    obj = {
      birthday: "19890727"
    };

    var model = new sap.ui.model.json.JSONModel();
    model.setData(obj);

    sap.ui.getCore().setModel(model);

     // var type_date = new sap.ui.model.type.Date({source: {}}); // Correct: Result is Jul 27, 1989 (in my locale)
     // var type_date = new sap.ui.model.type.Date({
     // 				source: {
     // 					pattern: "yyyymmdd"
     // 				},
     // 				pattern: "dd - mm - yy"
     // 				}); // Correct: Result is 27 - 07 - 89 (ignore my locale)

    var type_date =
      new sap.ui.model.type.Date({
        source: {
          pattern: "yyyymmdd"
        },
        style: "full"
      });
     // Incorrect!
     // Short: 1/27/89
     // Medium: Jan 27, 1989
     // Long: January 27, 1989
     // Full: Friday, January 27, 1989


    var text_view_birthday = new sap.ui.commons.TextView();

    text_view_birthday.bindProperty("text", {
      path: "/birthday",
      type: type_date
    });

    text_view_birthday.placeAt("content");
  </script>
</head>

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

</html>

Thanks!

Upvotes: 0

Views: 3642

Answers (1)

matbtt
matbtt

Reputation: 4231

I'm not familiar with all the details, but the pattern should be in LDML format. The pattern for month would be M or MM, the lower case m represents minutes. To debug this you can just set a break point in formatValue of sap.ui.model.type.Date.

Upvotes: 3

Related Questions