Populate date in dropdownlist in dd/mm/yyyy format

[NishchaljainParticipant]

Hi ,

i am trying to populate date in my dropdownlist in dd/MM/yyyy format.DropDownList is bound to JSON data.Date is coming in “Fri Sep 18 2015 21:39::17 GMT+0530 (India Standard Time)” Format. Please help me to get the date in dd/MM/yyyyy format. Below is my jquery code

$.get(‘/XREFCustDPChannel/GetAllStartDates’, “”, function (data) {
modules = data;
modulesSource =
{
datatype: “array”,
datafields: [
{ name: ‘START_DATE’, type: ‘date’ },
{ name: ‘START_DATE’, type: ‘date’ }
],
localdata: modules
};

modulesAdapter = new $.jqx.dataAdapter(modulesSource, {
autoBind: true
});

$(“#startDate”).jqxDropDownList({ promptText: ‘Please Select Start Date’, source: modulesAdapter, selectedIndex: -1, width: ‘275’, displayMember: ‘START_DATE’, valueMember: ‘START_DATE’ });

[VladimirParticipant]

Hello Nishchaljain,

You should also add a format option for that date to be properly recognised.

{ name: ‘START_DATE’, type: ‘date’, format: ‘ddd MMM dd yyyy hh:mm:ss’ }

Possible Date format strings:

“d”-the day of the month;
“dd”-the day of the month;
“ddd”-the abbreviated name of the day of the week;
“dddd”- the full name of the day of the week;
“h”-the hour, using a 12-hour clock from 1 to 12;
“hh”-the hour, using a 12-hour clock from 01 to 12;
“H”-the hour, using a 24-hour clock from 0 to 23;
“HH”- the hour, using a 24-hour clock from 00 to 23;
“m”-the minute, from 0 through 59;
“mm”-the minutes,from 00 though59;
“M”- the month, from 1 through 12;
“MM”- the month, from 01 through 12;
“MMM”-the abbreviated name of the month;
“MMMM”-the full name of the month;
“s”-the second, from 0 through 59;
“ss”-the second, from 00 through 59;
“t”- the first character of the AM/PM designator;
“tt”-the AM/PM designator;
“y”- the year, from 0 to 99;
“yy”- the year, from 00 to 99;
“yyy”-the year, with a minimum of three digits;
“yyyy”-the year as a four-digit number;
“yyyyy”-the year as a four-digit number.

Here is a sample demo.

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com/

[NishchaljainParticipant]

Hi Vladimir ,

Thanks for the quick response. i tried by doing the same thing but getting the dates in the same order. Don’t know where i am doing wrong , please find the jquery code that i did in the same way you gave me :

$.get(‘/XREFCustDPChannel/GetAllStartDates’, “”, function (data) {
modules = data;
var source =
{
localdata: modules,
datatype: “json”,
datafields: [
{ name: ‘START_DATE’, type: ‘date’, format: ‘ddd MMM dd yyyy hh:mm:ss’ } // START_DATE IS MY COLUMN NAME IN THE DATABASE
],
beforeLoadComplete: function (records) {
for (var i = 0; i < records.length; i++) {
records[i].date = records[i].START_DATE.getDate() + ‘/’ + (records[i].START_DATE.getMonth() + 1) + ‘/’ + records[i].START_DATE.getFullYear();
}
}
};
var dataAdapter = new $.jqx.dataAdapter(source);

// Create a jqxDropDownList
$(“#startDate”).jqxDropDownList({ promptText: ‘Please Select Start Date’,
selectedIndex: -1, source: dataAdapter, displayMember: “date”, valueMember: “START_DATE”, width: 200, height: 25
});

below is the cs file code from where i am fetching the records from the oracle sql database , the column is of date type :

public static List<XREF_CUST_DP_CHANNEL_RDM> GetAllDPChannels()
{
CustEntities dc = new CustEntities();
List<XREF_CUST_DP_CHANNEL_RDM> obj = dc.XREF_CUST_DP_CHANNEL_RDM.Where(m => m.SOURCE == “CUST_SALES”).ToList();
return obj;
}

Thanks for all your help in advance.

NISHCHAL.

[VladimirParticipant]

Hello Nishchaljain,

What do you mean by getting the dates in the same order? There is no code in the above snippets that would reorder the dates, so they should be listed in the order in which they were returned from your database. What should be changed is the display format only. (Also you may have posted the wrong cs file code, as this one reffers to GetAllDPChannels() and your code calls GetAllStartDates(), or maybe I just don’t understand how this works).

Additionally you could use the dataAdapter ajax functionality and just specify the url: parameter instead of doing a seperate get request. Here is a sample data binding to json.

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com/

[NishchaljainParticipant]

Hi Vladimir,

Sorry for using the wrong word “Order” , what i was trying to say is , i used your code but still i am getting the dates in same format i.e “Fri Sep 18 2015 21:39::17 GMT+0530 (India Standard Time)”. please find the my below code for more clarification :

$.get(‘/XREFCustDPChannel/GetAllStartDates’, “”, function (data) {
modules = data;
var source =
{
localdata: modules,
datatype: “json”,
datafields: [
{ name: ‘START_DATE’, type: ‘date’, format: ‘ddd MMM dd yyyy hh:mm:ss’ } // START_DATE IS MY COLUMN NAME IN THE DATABASE
],
beforeLoadComplete: function (records) {
for (var i = 0; i < records.length; i++) {
records[i].date = records[i].START_DATE.getDate() + ‘/’ + (records[i].START_DATE.getMonth() + 1) + ‘/’ + records[i].START_DATE.getFullYear();
}
}
};
var dataAdapter = new $.jqx.dataAdapter(source);

// Create a jqxDropDownList
$(“#startDate”).jqxDropDownList({ promptText: ‘Please Select Start Date’,
selectedIndex: -1, source: dataAdapter, displayMember: “date”, valueMember: “START_DATE”, width: 200, height: 25
});

Thanks.

[VladimirParticipant]

Hello Nishchaljain,

Can you please provide a sample of the JSON that your server returns, so I could test it.

Also note that the above code will only change the display format in the DropDownList. If you need to use it in another way by getting the selected value, keep in mind that it will still get the original date object.
So maybe tell me what are you trying to achieve and how you try to do it.

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com/

[NishchaljainParticipant]

Hi Vladimir ,

Thanks for your response. Below is the json sample data :

[
{
DP_CHANNEL_KEY: 1951,
CHANNEL_GROUP_KEY: 2883,
SC_KEY: 143,
SLOT_START_KEY: 1,
SLOT_END_KEY: 14,
START_DATE: “/Date(1442592557000)/”,
END_DATE: null,
ACTIVE: “Y”,
SOURCE: “CUST_SALES”
},
{
DP_CHANNEL_KEY: 1952,
CHANNEL_GROUP_KEY: 2884,
SC_KEY: 143,
SLOT_START_KEY: 1,
SLOT_END_KEY: 14,
START_DATE: “/Date(1442592557000)/”,
END_DATE: null,
ACTIVE: “Y”,
SOURCE: “CUST_SALES”
},
{
DP_CHANNEL_KEY: 1953,
CHANNEL_GROUP_KEY: 2908,
SC_KEY: 143,
SLOT_START_KEY: 1,
SLOT_END_KEY: 14,
START_DATE: “/Date(1442592557000)/”,
END_DATE: null,
ACTIVE: “Y”,
SOURCE: “CUST_SALES”
}

I simply want to display the date in dd/MM/yyyy format in the jqxdropdownlist thats it.

Thanks.

[VladimirParticipant]

Hello Nishchaljain,

I have updated the fiddle using your data.
As you can see the labels of the fields are with dd/mm/yyyy format, and the value is the actual date object.

Note that if you want to use the value for other purposes – it is a date object which will get printed by your local computer settings unless you specifically print it in another way.

Best Regards,
Vladimir

jQWidgets team
http://www.jqwidgets.com/

[NishchaljainParticipant]

Hi Vladimir,

Thanks for all your help. The problem is solved now. I called the Function “beforeLoadComplete” in the dataAdapter after binding the modulesource and it starts working.

This is how i did :

var rmodulesAdapter = new $.jqx.dataAdapter(rmodulesSource, {
autoBind: true,

beforeLoadComplete: function (records) {
for (var i = 0; i < records.length; i++) {
records[i].date = (“0” + records[i].START_DATE.getDate()).slice(-2) + ‘/’ + (“0” + (records[i].START_DATE.getMonth() + 1)).slice(-2) + ‘/’ + records[i].START_DATE.getFullYear();
}
}
});

Thank you so much.

[Author]

Posts