Change the date picker time region.

[toshio2011]

Hi there,

Right now I`m building an application for my client from Thailand.I seem to have a problem with Alpha.Since my client is from thailand i need to change the time region in my application especially using date picker in thailand time region.Is there any way i can handle this?I`ve been trying jquery but it seems only to change to thai/? character.When i picked the date it still show 2015 instead of 2558.I hope someone can help me with this.Below the jquery i used in the javascript control to customize the date picker

/* Thai initialisation for the jQuery UI date picker plugin. */
jQuery(function($){
$.datepicker.regional.th = {
closeText: "???",
prevText: "« ????",
nextText: "????? »",
currentText: "??????",
monthNames: [ "??????","??????????","??????","??????","???????","????????",
"???????","???????","???????","??????","?????????","???????" ],
monthNamesShort: [ "?.?.","?.?.","??.?.","??.?.","?.?.","??.?.",
"?.?.","?.?.","?.?.","?.?.","?.?.","?.?." ],
dayNames: [ "???????","??????","??????","???","????????","?????","?????" ],
dayNamesShort: [ "??.","?.","?.","?.","??.","?.","?." ],
dayNamesMin: [ "??.","?.","?.","?.","??.","?.","?." ],
weekHeader: "Wk",
dateFormat: "dd/mm/yy",
firstDay: 0,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: "" };
$.datepicker.setDefaults($.datepicker.regional['th']);
}); jQuery('#{dialog.ControlIdEscaped}').datepicker(
{
onSelect: function(dateText, inst) {
$e.execute(this,'change')
}
}
);


I also attached the pic related to the matter I mentioned before1.png2.png


I really hope I can solve this ASAP...will try to fix it while waiting for someone to help me..Thanks Alpha members! :)

[peteconway]

Re: Change the date picker time region.

I'd write to Selwyn on this one. You need real code level help here.

[toshio2011]

Re: Change the date picker time region.

Thanks for the help.i do really need one since I`m a beginner here.Heres some update I managed to come with so far.

I managed to make the date picker to be the thai calendar.It works well..but my boss want some new thing.He want to store the 2015 date instead of 2558 into the database.So far it only stored 2558.Still trying to figure this out.Hope someone can really help me.Below the jquery code i used to get the thai calendar.

/* Thai initialisation for the jQuery UI date picker plugin. */
jQuery(function($){
//Proxy Pattern
var d_showDatepicker = $.datepicker._showDatepicker;
var d_selectDay = $.datepicker._selectDay;
var d_selectDate = $.datepicker._selectDate;
var d_attachDatepicker = $.datepicker._attachDatepicker;
var d_adjustInstDate = $.datepicker._adjustInstDate;
var d_inlineDatepicker = $.datepicker._inlineDatepicker;
var d_setDate = $.datepicker._setDate;
var d_updateDatepicker = $.datepicker._updateDatepicker;
var d_generateHTML = $.datepicker._generateHTML;
var d_generateMonthYearHeader = $.datepicker._generateMonthYearHeader;

//Insert default parameter to datepicker
$.extend($.datepicker._defaults, {
isBE:false,
autoConversionField:true
});

$.extend($.datepicker, {
_attachBE: function () {
$.extend($.datepicker._defaults, {
beforeShow : function(){ }
});

},

_selectDate: function(id, dateStr){
d_selectDate.apply(this,arguments);
},

/*Override methods*/
_attachDatepicker: function(target, settings) {
d_attachDatepicker.apply(this,arguments);
var autoConvert = (typeof(settings.autoConversionField) !== 'undefined' && settings.autoConversionField != null) ? settings.autoConversionField : true;
var _isBE = (typeof(settings.isBE) !== 'undefined' && settings.isBE != null) ? settings.isBE : false;
var _isInput = $(target).is("input")
if(autoConvert == true && _isBE == true && _isInput == true){ //Only for input for now
$.datepicker._attachConversion(target);
}

},

_attachConversion : function(target){
var _name = $(target).attr('name');
var _id = $(target).attr('id');
var convertId = _id +"_convert";
$(target).parent().append('<input type="hidden" rel="'+_id+'" id="'+convertId+'" name="'+_name+'" />');
//change original name
$(target).attr('name',convertId);
},

_adjustInstDate: function(inst, offset, period) {
var _isBE = (typeof(inst.settings.isBE) !== 'undefined' && inst.settings.isBE != null) ? inst.settings.isBE : false;
if(_isBE == true){
//Change drawYear back to CE after it got parse
inst.drawYear = $.datepicker._convertToCe(inst.drawYear);

}
d_adjustInstDate.apply(this,arguments);
},

_selectDay: function(id, month, year, td) {
//need the instance
var target = $(id);
if ($(td).hasClass(this._unselectableClass) || this._isDisabledDatepicker(target[0])) {
return;
}
var _inst = this._getInst(target[0]);
var _isBE = (typeof(_inst.settings.isBE) !== 'undefined' && _inst.settings.isBE != null) ? _inst.settings.isBE : false;
var autoConvert = (typeof(_inst.settings.autoConversionField) !== 'undefined' && _inst.settings.autoConversionField != null) ? _inst.settings.autoConversionField : true;
var d_year = $.datepicker._convertToCe(year);

if(_isBE == true ){ //Fire only when isBE
year = $.datepicker._convertToBe(year);
}

d_selectDay.apply(this,arguments);
//Restore value
//_inst.selectedYear = _inst.currentYear = _inst.drawYear = d_year;
_inst.currentYear = $.datepicker._convertToCe(_inst.currentYear);
_inst.drawYear = $.datepicker._convertToCe(_inst.drawYear);
_inst.selectedYear = $.datepicker._convertToCe(_inst.selectedYear);
if(autoConvert == true && _isBE == true){
//Parse value to child element
var childName = target.attr('name');
var childId = '#' + childName;
var childValue = this._formatDate(_inst,_inst.currentDay, _inst.currentMonth, d_year);
$(childId).val(childValue);
}
},

_showDatepicker : function(input){
var _inst = $.datepicker._getInst(this);
var _isBE = $.datepicker._isBE(_inst);

//Datetimepicker Compatible
if(jQuery.timepicker && _isBE == true){
var tp_inst = $.datepicker._get(_inst, 'timepicker');
if(tp_inst){
var tp_updateDateTime = tp_inst._updateDateTime;
$.extend(_inst.settings.timepicker,{
_updateDateTime : function(dp_inst){
dp_inst = _inst || dp_inst,
dp_inst.selectedYear = $.datepicker._convertToBe(dp_inst.selectedYear);
tp_updateDateTime.apply(this,arguments);
//Restore after finish use
dp_inst.selectedYear = $.datepicker._convertToCe(dp_inst.selectedYear);

}
});
}
}

if(_isBE == true){ //Fire only when isBE
$.datepicker._SetBEDisplay(_inst);
}

d_showDatepicker.apply(this,arguments);
},

_inlineDatepicker: function(target, inst) {
d_inlineDatepicker.apply(this,arguments);
},

_generateMonthYearHeader: function(inst, drawMonth, drawYear, minDate, maxDate,
secondary, monthNames, monthNamesShort) {

var _isBE = $.datepicker._isBE(inst);

if(_isBE == true){
drawYear = $.datepicker._convertToBe(drawYear);
}

return d_generateMonthYearHeader.apply(this,arguments);


},

_updateDatepicker: function(inst) {
var _inst = inst;
var _isBE = (typeof(_inst.settings.isBE) !== 'undefined' && _inst.settings.isBE != null) ? _inst.settings.isBE : false;
d_updateDatepicker.apply(this,arguments);

if(_isBE == true){ //Fire only when isBE
$.datepicker._SetBEDisplay(_inst);
}

},

_setDate: function(inst, date, noChange) {
d_setDate.apply(this,arguments);
},

_generateHTML: function(inst) {
var _isBE = (typeof(inst.settings.isBE) !== 'undefined' && inst.settings.isBE != null) ? inst.settings.isBE : false;
if(_isBE){
//This will restore the selected
if(inst.currentYear != 0){
inst.currentYear = $.datepicker._convertToCe(inst.currentYear);
}
}
var result = d_generateHTML.apply(this,arguments);
//Restore value
if(_isBE){
inst.currentYear = $.datepicker._convertToCe(inst.currentYear);
inst.drawYear = $.datepicker._convertToCe(inst.drawYear);
inst.selectedYear = $.datepicker._convertToCe(inst.selectedYear);
}
return result;
},

_SetBEDisplay: function(inst){
var _inst = inst;
var element = _inst.inline == true ? _inst.dpDiv : _inst.dpDiv[0];
var drawYear = _inst.drawYear;
if(drawYear == 0){
drawYear = _inst.currentYear;
}
drawYear = $.datepicker._convertToCe(drawYear);
var selectedYear = _inst.selectedYear = _inst.currentYear = _inst.drawYear = $.datepicker._convertToCe(inst.selectedYear);

if(selectedYear == 0){
selectedYear = new Date().getFullYear();
}
var yF = $(element).find( '.ui-datepicker-year' );

var domEl = $(yF).get(0);

if(!domEl){
return false;
}

if(typeof(domEl.tagName) !== 'undefined' && domEl.tagName != null){
switch(domEl.tagName){
case "SELECT" : //Change all value
$(domEl).children('option').each(function(){
$(this).text($.datepicker._convertToBe($(this).val()));
var _year = $(this).val();
if(_year == drawYear){
$(this).attr('selected','selected');
}

});
break;
case "SPAN" :
//Use generate month header instead
break;
default :
//console.log(domEl.tagName);
break;
}
}

},

_isBE : function (inst){
var _isBE = (typeof(inst.settings.isBE) !== 'undefined' && inst.settings.isBE != null) ? inst.settings.isBE : false;
return _isBE;
},

_convertToBe : function(year){
if((parseInt(year) - 543) < 1900 ){
return parseInt(year) + 543;
}else{
return year;
}
},

_convertToCe : function(year){
if((parseInt(year) - 543) >= 1900 ){
return parseInt(year) - 543;
}else{
return year;
}
}



});
}); jQuery('#{dialog.ControlIdEscaped}').datepicker(
{isBE: true,
autoConversionField: true,
onSelect: function(dateText, inst) {
$e.execute(this,'change')
}
}
);

[toshio2011]

Re: Change the date picker time region.

ouh..and I`m using ux for this project.

[toshio2011]

Re: Change the date picker time region.

luckily....i managed to find the solution for my problem...heres the solution..


jQuery(function($){
//Proxy Pattern
var d_showDatepicker = $.datepicker._showDatepicker;
var d_selectDay = $.datepicker._selectDay;
var d_selectDate = $.datepicker._selectDate;
var d_attachDatepicker = $.datepicker._attachDatepicker;
var d_adjustInstDate = $.datepicker._adjustInstDate;
var d_inlineDatepicker = $.datepicker._inlineDatepicker;
var d_setDate = $.datepicker._setDate;
var d_updateDatepicker = $.datepicker._updateDatepicker;
var d_generateHTML = $.datepicker._generateHTML;
var d_generateMonthYearHeader = $.datepicker._generateMonthYearHeader;

$.extend($.datepicker, {

_selectDate: function(id, dateStr){
d_selectDate.apply(this,arguments);
},

/*Override methods*/
/* Attach the date picker to a jQuery selection.
* @param target element - the target input field or division or span
* @param settings object - the new settings to use for this date picker instance (anonymous)
*/
_attachDatepicker: function(target, settings) {
var nodeName, inline, inst;
nodeName = target.nodeName.toLowerCase();
inline = (nodeName === "div" || nodeName === "span");
if (!target.id) {
this.uuid += 1;
target.id = "dp" + this.uuid;
}
inst = this._newInst($(target), inline);
inst.settings = $.extend({}, settings || {});
if (nodeName === "input") {
this._connectDatepicker(target, inst);
} else if (inline) {
this._inlineDatepicker(target, inst);
}
},
/* Generate the month and year header. */
_generateMonthYearHeader: function(inst, drawMonth, drawYear, minDate, maxDate,
secondary, monthNames, monthNamesShort) {

var inMinYear, inMaxYear, month, years, thisYear, determineYear, year, endYear,
changeMonth = this._get(inst, "changeMonth"),
changeYear = this._get(inst, "changeYear"),
showMonthAfterYear = this._get(inst, "showMonthAfterYear"),
html = "<div class='ui-datepicker-title'>",
monthHtml = "";

// month selection
if (secondary || !changeMonth) {
monthHtml += "<span class='ui-datepicker-month'>" + monthNames[drawMonth] + "</span>";
} else {
inMinYear = (minDate && minDate.getFullYear() === drawYear);
inMaxYear = (maxDate && maxDate.getFullYear() === drawYear);
monthHtml += "<select class='ui-datepicker-month' data-handler='selectMonth' data-event='change'>";
for ( month = 0; month < 12; month++) {
if ((!inMinYear || month >= minDate.getMonth()) && (!inMaxYear || month <= maxDate.getMonth())) {
monthHtml += "<option value='" + month + "'" +
(month === drawMonth ? " selected='selected'" : "") +
">" + monthNamesShort[month] + "</option>";
}
}
monthHtml += "</select>";
}

if (!showMonthAfterYear) {
html += monthHtml + (secondary || !(changeMonth && changeYear) ? "*" : "");
}

// year selection
if ( !inst.yearshtml ) {
inst.yearshtml = "";
if (secondary || !changeYear) {
html += "<span class='ui-datepicker-year'>" + (drawYear + 543) + "</span>";
} else {
// determine range of years to display
years = this._get(inst, "yearRange").split(":");
thisYear = new Date().getFullYear();
determineYear = function(value) {
var year = (value.match(/c[+\-].*/) ? drawYear + parseInt(value.substring(1), 10) :
(value.match(/[+\-].*/) ? thisYear + parseInt(value, 10) :
parseInt(value, 10)));
return (isNaN(year) ? thisYear : year);
};
year = determineYear(years[0]);
endYear = Math.max(year, determineYear(years[1] || ""));
year = (minDate ? Math.max(year, minDate.getFullYear()) : year);
endYear = (maxDate ? Math.min(endYear, maxDate.getFullYear()) : endYear);
inst.yearshtml += "<select class='ui-datepicker-year' data-handler='selectYear' data-event='change'>";
for (; year <= endYear; year++) {
inst.yearshtml += "<option value='" + year + "'" +
(year === drawYear ? " selected='selected'" : "") +
">" + (year + 543) + "</option>";
}
inst.yearshtml += "</select>";

html += inst.yearshtml;
inst.yearshtml = null;
}
}

html += this._get(inst, "yearSuffix");
if (showMonthAfterYear) {
html += (secondary || !(changeMonth && changeYear) ? "*" : "") + monthHtml;
}
html += "</div>"; // Close datepicker_header
return html;
},



});
}); jQuery('#{dialog.ControlIdEscaped}').datepicker(
{
onSelect: function(dateText, inst) {
$e.execute(this,'change')
}
}
);

[kkfin]

Re: Change the date picker time region.

....
jQuery('#{dialog.ControlIdEscaped}').datepicker(
{
onSelect: function(dateText, inst) {
$e.execute(this,'change');
}
}
);

Missing semicolon