How to change dateformat

[spant]

Hi Isomorphic,

I am using SC version : SmartClient_v82p_2013-06-15

I wanted to achive the below:

- Customize the dispaly the dateitem/datetime item e.g. DD-Mon-yyyy HH:mm
- Displaying the same date as received from backend ( Same as DB value).
- Not wanted to convert date/datetime in browser timezone.


Let me know how to achive this.

FYI,

I have gone grough the forum and SC doc and tried Date.setInputFormat(...), Date.setShortDisplayFormat(...) etc but observed that the date has converted to brouser time zone.


Thanks !!!

[spant]

Can you please let us know how to solve this problem ?

[Isomorphic]

The Date Format and Storage overview describes the fundamentals of custom-formatting datetime values in your app.
To specifically apply a custom timezone instead of relying on the browser native timezone offset, you can use Time.setDefaultDisplayTimezone() and adjustForDST.

Regards
Isomorphic Software

[spant]

We are not using custom timezone, we are already using setDefaultDisplayTimezone as below in our global settings:

isc.Time.setDefaultDisplayTimezone(-7 + ":00");

Our issue is that when we use custom date format then date time value is getting converted to browser timezone. Below is our code to change date format.

function iasDateFormatter()
{
var d= this.getDate();

if(d<10) d='0'+d;

return d +'-'+ this.getShortMonthName(3) + "-" +this.getFullYear();
}

function iasDateTimeFormatter()
{
var d= this.getDate();
var hh= this.getHours();
var mm= this.getMinutes();

if(d<10) d='0'+d;
if(hh<10) hh='0'+hh;
if(mm<10) mm='0'+mm;

return d +'-'+ this.getShortMonthName(3) + "-" +this.getFullYear() + " " + hh + ":" + mm;
}

Below lines are to set above custom format globally.

isc.Date.setShortDisplayFormat(iasDateFormatter);
isc.Date.setShortDatetimeDisplayFormat(iasDateTimeFormatter);

[Isomorphic]

Since this is custom code, you'll have to handle displaying in UTC format rather than browser native locale format yourself.

You can use native JavaScript Date APIs for this - getUTCDate(), getUTCFullYear(), getUTCMonth() etc. The short month-names API is not native, but you can easily handle this in your code - something like: Date.shortMonthNames[dateInstance.getUTCMonth()]

Regards
Isomorphic Software

[spant]

We have tried below and it's working. Please let us know if you foresee any problem:

function iasDateFormatter()
{

var dt = this;
var utc = dt.getTime() + (dt.getTimezoneOffset() * 60000);
var nd = new Date(utc + (3600000*timezoneOffset));

var d= nd.getDate();

if(d<10) d='0'+d;

return d +'-'+ nd.getShortMonthName(3) + "-" +nd.getFullYear();

}

function iasDateTimeFormatter()
{

var dt = this;
var utc = dt.getTime() + (dt.getTimezoneOffset() * 60000);
var nd = new Date(utc + (3600000*timezoneOffset));

var d= nd.getDate();
var hh= nd.getHours();
var mm= nd.getMinutes();

if(d<10) d='0'+d;
if(hh<10) hh='0'+hh;
if(mm<10) mm='0'+mm;

return d +'-'+ nd.getShortMonthName(3) + "-" +nd.getFullYear() + " " + hh + ":" + mm;
}

[spant]

By using above code, our output is working fine but now we are having issues in input. Every time the focus is changed on date field, it's value is changed. It's happening because even while inputting date values, it's going in setShortDatetimeDisplayFormat.

[Isomorphic]

You need to set the dateInputFormat to match your custom formatter. This also can be done system-wide, on DateUtil.

[spant]

We have set input format using setInputFormat method and there is no problem with the format now. It's just that we used setShortDatetimeDisplayFormat to manipulate timezone conversion also, input date timezone is also getting converted, we don't want input format to change timezone conversion which we did for output format.

[Isomorphic]

It's difficult to lay out a general solution for you based on the information we have, but in essence what you need to do is ensure that you're parsing user-entered values to dates, and formatting dates to user-visible strings using compatible formats, and matching display-timezone offsets.

The standard implementation for this, with no custom formatting or parsing logic in place, would be just to set the timezone offset and possibly adjustForDST.

Given that you have a custom formatter, you should set the timezone offset to match this, and ensure the inputFormat is set / possibly consider a custom parser (via DateItem.parseEditorValue) to ensure values round-trip successfully.

If you think you've actually hit a bug, or you ultimately can't make this work, we'd recommend you show us a very small test case containing just the customized component we can run on our end which demonstrates the problem.

Regards
Isomorphic Software