Change order of dateFormat and timeFormat

[dinhtrung]

My country (Vietnam) use the format "hh:ii:ss dd/mm/YY" to format the date and time.

Is there any way to change the order between dateFormat and timeFormat?

[tmlee]

Yes you can.
So for instance, we have a div #datetimecalendar.
Then pass in the 2 arguments for dateFormat and timeFormat
$('#datetimecalendar').datetimepicker(
dateFormat: 'yy/mm/dd',
timeFormat: '...'
)

[dinhtrung]

Currently, the date string always in the format [date] + [separator] + [time]. In my case, I want it in [time] + [separator] + [date].

As of your recommendation, I think the output format will be: "2011/13/06 09:40". But it cannot be configured to be "09:40 2011/13/06", right?

[trentrichardson]

dinhtrung,

You are correct, currently this is not possible, I guess if this is the case that would be useful as a regional setting. I think if you need to make this happen outputting the time would be (in the dev branch) line 707. Input/reading the datetime occurs on line 208-215. I think you just need to re-order the regex to look for date last.

[dinhtrung]

Yep, I add a new regional setting named 'dateBefore', and modify around line 707. It works.

diff -r c90ab7be39d3 protected/extensions/widgets/datetimepicker/assets/jquery-ui-timepicker-addon.js
--- a/protected/extensions/widgets/datetimepicker/assets/jquery-ui-timepicker-addon.js  Tue Jun 14 12:59:22 2011 +0700
+++ b/protected/extensions/widgets/datetimepicker/assets/jquery-ui-timepicker-addon.js  Tue Jun 14 13:06:38 2011 +0700
@@ -38,6 +38,7 @@
        hourText: 'Hour',
        minuteText: 'Minute',
        secondText: 'Second',
+       dateBefore: true,
        timezoneText: 'Time Zone'
    };
    this._defaults = { // Global defaults for all the datetime picker instances
@@ -699,7 +700,11 @@
        if (this._defaults.timeOnly === true) {
            formattedDateTime = this.formattedTime;
        } else if (this._defaults.timeOnly !== true && (this._defaults.alwaysSetTime || timeAvailable)) {
-           formattedDateTime += this._defaults.separator + this.formattedTime;
+           if (this._defaults.dateBefore){
+               formattedDateTime += this._defaults.separator + this.formattedTime;
+           } else {
+               formattedDateTime = this.formattedTime + this._defaults.separator + formattedDateTime;
+           }
        }

        this.formattedDateTime = formattedDateTime;

[dinhtrung]

Regional settings for Vietnamese:

/* Vietnamese translation for the jQuery Timepicker Addon */
/* Written by Nguyen Dinh Trung */
$.timepicker.regional['vi'] = {
    timeOnlyTitle: 'Chọn giờ',
    timeText: 'Thời gian',
    hourText: 'Giờ',
    minuteText: 'Phút',
    secondText: 'Giây',
    timezoneText: 'Múi giờ',
    currentText: 'Giờ hiện thời',
    closeText: 'Đóng'
    timeFormat: 'h:m',
    ampm: false,
    dateBefore: false,
};
$.timepicker.setDefaults($.timepicker.regional['vi']);

[trentrichardson]

Thanks for posting your changes and new regional settings. It works ok without changing lines 208-215? Can you re-open the datetimepicker and it parse the time correctly?

[dinhtrung]

Currently it is not working.

I tried to reverse the regexp string, but still it cannot parse the date time correctly.
But this changing is only needed for typing directly the date and time in the text box, am I right?
Also, when changing the regexp, it is conflict with jQuery datepicker, so we also need to change around line 814 - 830.

My JS skill is not good enough to fix this bug.

[cmhuynh]

Sorry to jump in, but I believe Vietnamese's day time display (15/06/2011 13:37) is much similar to French's (http://en.wikipedia.org/wiki/Alexander_de_Rhodes, our Vietnamese scholars created the new Vietnamese writing system on top of the dictionary mentioned in the article)

Here is minor revision:
currentText: 'Hiện thời' (which is a better fit to "Now", while "'Giờ hiện thời'" means "Current time", but the function deals with date also).

The translation will look to me like this:
$.timepicker.regional['vi'] = {
currentText: 'Hiện thời',
closeText: 'Đóng',
ampm: false,
timeFormat: 'hh:mm',
timeOnlyTitle: 'Chọn giờ',
timeText: 'Thời gian',
hourText: 'Giờ',
minuteText: 'Phút',
secondText: 'Giây',
timezoneText: 'Múi giờ'
};
$.timepicker.setDefaults($.timepicker.regional['vi']);

Can you kindly review and with Trent's help we can have the file committed to share? Of course additional modification can be made if better translation?

Thanks,
-Châu

[dinhtrung]

As to review the order between date and time, I navigate through some website in Vietnamese (yep, just to make sure). :D

It is quite common to write in the format hh:ii dd/mm/YY. E.g: 14:17 | 14/06/2011 See: [http://baodientu.chinhphu.vn/]

In some newspaper, I see the time put after date, but the date has weekday before. E.g: Thứ 4, 15/6/2011 - 01:32:36 PM. See: [http://vnexpress.net]

I also prefer to put the time before the date part.

[cmhuynh]

Got you. Those are to say, either format is correct, and it does not request to one unified format only.
I am OK with the "French" style format :)
Good luck with the enhancement request.

-Châu

[trentrichardson]

I can go ahead and commit the translation, however after further thinking the beforeDate functionality will take a bit of time. I think changing timepicker will be fairly easy, but it will need to override datepicker, which may get tricky. datepicker expects the date to be first. Which format is the "formal" format?

[dinhtrung]

Well, the translation from cmhuynh is correct.

About the beforeDate function, if it is digging too much into datepicker code, then currently i have no choice but to use the date first, then parse it from server, or the user will have to re-organize the date and sliders if the form already populate with defined values.

I don't know if any other language in my case. If only Vietnamese, then we can close this issue.

[trentrichardson]

Ok, I will leave it open for a bit to see if anyone else can chime in on other languages needing this. I will go ahead and add that translation. Thank you for your input!

[jun66j5]

Hi,

Vietnamese is the only locale which the time part is put before the date part, as far as I know.

Babel which Trac uses is a Python interface to CLDR (Common Locale Data Repository) and provides localized date time formatting.

The following code is getting date time format from babel. {1} is the date part. {0} is the tiem part.

>>> from babel.dates import get_datetime_format
>>> for l in 'ca cs de el es et fr he hu id it ja lt nl pl ro ru tr vi'.split(' '): print l, get_datetime_format('meduim', locale=l)
...
ca {1} {0}
cs {1} {0}
de {1} {0}
el {1} {0}
es {1} {0}
et {1} {0}
fr {1} {0}
he {1} {0}
hu {1} {0}
id {1} {0}
it {1} {0}
ja {1} {0}
lt {1} {0}
nl {1} {0}
pl {1} {0}
ro {1}, {0}
ru {1} {0}
tr {1} {0}
vi {0} {1}

[hzlzh]

you'd better add some of those date format wiki to the release page, it's really helpful.

[clears]

there is a missing comma.

https://github.com/trentrichardson/jQuery-Timepicker-Addon/blob/master/localization/jquery-ui-timepicker-vi.js

@@ -10,7 +10,7 @@
        millisecText: 'Phần nghìn giây',
        timezoneText: 'Múi giờ',
        currentText: 'Hiện thời',
-       closeText: 'Đóng'
+       closeText: 'Đóng',
        timeFormat: 'h:m',
        amNames: ['SA', 'AM', 'A'],
        pmNames: ['CH', 'PM', 'P'],

[ferdinandbalbin]

hi...i am also using the jquery-ui.timepicker.addon.js....i just want to modify the format of the date...i want it yy-mm-dd instead of the timepicker format which is dd-mm-yy..i also want to change the separator / to - in the date...is this possible? where in the code i have to make adjustment to make this work? pls help..thanks

[trentrichardson]

That is a datepicker setting, read up on the dateFormat:
http://jqueryui.com/demos/datepicker/

[carlosamus123]

Hello trent richardson..I really need your help

Your date time picker addon is excellent however it shows as MM/DD/YY but i would like to change it to DD/MM/YY please- can you help me at all ? or anyone?

[tamjap]

I'm pretty late to the game, but I could use this functionality for a project I'm working on. Was a version of dinhtrung's change ever implemented? If so, what is the parameter name?

Thanks