Filter date calendar not displaying

[mr_putersmitParticipant]

Hi
I seem to have 2 problems linked to the same date filter. Firstly, in your demo here: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/filtering.htm When a date field is filtered, there is a calendar icon for the two input fields to select a date range. In my filter, this is not appearing. Secondly, whatever values I use in the less than or greater than inputs, it always returns, ‘No data to display’. I have followed your demo and cannot see why this is not working. I would be grateful if someone could help to overcome this. Thanks

`var source =
{
datatype: “json”,
datafields: [
{ name: ‘id’, type: ‘string’},
{ name: ‘date’, type: ‘date’, format: ‘dd-MM-yyyy HH:mm:ss’},
{ name: ‘activity’, type: ‘string’},
{ name: ‘service’, type: ‘string’},
{ name: ‘user’, type: ‘string’},
{ name: ‘item’, type: ‘string’}
],
cache: false,
id: ‘id’,
url: ‘temp/rtvData.php’,
updaterow: function (rowid, rowdata, commit) {
// synchronize with the server – send update command
var data = “update=true&FirstName=” + rowdata.FirstName + “&LastName=” + rowdata.LastName + “&Title=” + rowdata.Title;
data = data + “&EmployeeID=” + rowid;

$.ajax({
dataType: ‘json’,
url: ‘temp/rtvData.php’,
type: ‘POST’,
data: data,
success: function (data, status, xhr) {
// update command is executed.
commit(true);
}
});
}
};

var dataAdapter = new $.jqx.dataAdapter(source);

// initialize the input fields.
/* $(“#activity”).jqxInput({width: 150, height: 23});
$(“#user”).jqxInput({width: 150, height: 23});
$(“#item”).jqxInput({width: 150, height: 23}); */

var dataAdapter = new $.jqx.dataAdapter(source);
var editrow = -1;
var getLocalization = function () {
var localizationobj = {};
localizationobj.pagergotopagestring = “Go to:”;
localizationobj.pagershowrowsstring = “Show row:”;
localizationobj.pagerrangestring = ” of “;
localizationobj.pagernextbuttonstring = “Next”;
localizationobj.pagerpreviousbuttonstring = “Previous”;
localizationobj.sortascendingstring = “Sort in ascending order”;
localizationobj.sortdescendingstring = “Sort descending”;
localizationobj.sortremovestring = “Remove Sort”;
localizationobj.firstDay = 1;
localizationobj.emptydatastring = “No new retrievals for this period”;
localizationobj.currencysymbol = “£”;
localizationobj.currencysymbolposition = “after”;
localizationobj.decimalseparator = “.”;
localizationobj.thousandsseparator = “,”;
$(“#jqxgrid”).jqxGrid(‘localizestrings’, localizationobj);
var days = {
// full day names
names: [“Sunday”, “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”],
// abbreviated day names
namesAbbr: [“Sun”, “Mon”, “Tue”, “Wed”, “Thu”, “Fri”, “Sat”],
// shortest day names
namesShort: [“Su”, “Mo”, “Tu”, “We”, “Th”, “Fr”, “Sa”]
};
localizationobj.days = days;
var months = {
// full month names (13 months for lunar calendards — 13th month should be “” if not lunar)
names: [“January”, “February”, “March”, “April”, “May”, “June”, “July”, “August”, “September”, “October”, “November”, “December”, “”],
// abbreviated month names
namesAbbr: [“Jan”, “Feb”, “Mär”, “Apr”, “May”, “Jun”, “Jul”, “Aug”, “Sep”, “Oct”, “Nov”, “Dec”, “”]
};
var patterns = {
d: “dd/MM/yyyy HH:mm:ss”,
D: “dddd, d. MMMM yyyy”,
t: “HH:mm”,
T: “HH:mm:ss”,
f: “dddd, d. MMMM yyyy HH:mm”,
F: “dddd, d. MMMM yyyy HH:mm:ss”,
M: “dd MMMM”,
Y: “MMMM yyyy”
}
localizationobj.patterns = patterns;
localizationobj.months = months;
localizationobj.todaystring = “Today”;
localizationobj.clearstring = “Clear”;
return localizationobj;
}
// initialize jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 740,
editable: true,
sortable: true,
filterable: true,
columnsresize: true,
columnsreorder: true,
source: dataAdapter,
pageable: true,
autoheight: true,
altrows: true,
localization: getLocalization(),
theme: ‘custom’,
columns: [
{ text: ‘id’, editable: false, datafield: ‘id’, width: 70, hidden: true },
{ text: ‘Retrieval Date’, editable: false, datafield: ‘date’, columntype: ‘DateTime’, cellsformat: ‘dd-MM-yyyy HH:mm:ss’, filtertype: ‘date’, width: 190},
{ text: ‘Activity’, editable: false, datafield: ‘activity’, filtertype: ‘list’, width: 130 },
{ text: ‘Service’, editable: false, datafield: ‘service’, filtertype: ‘list’, width: 130 },
{ text: ‘User’, editable: false, datafield: ‘user’, filtertype: ‘list’, width: 160 },
{ text: ‘Box’, editable: false, datafield: ‘item’, filtertype: ‘checkedlist’, width: ‘auto’ },
/* { text: ‘Edit’, datafield: ‘Edit’, width: 90, sortable: false, filterable: false, columntype: ‘button’, cellsrenderer: function () {
return “Edit”;
}, buttonclick: function (row) {
// open the popup window when the user clicks a button.
editrow = row;
var offset = $(“#jqxgrid”).offset();
$(“#popupWindow”).jqxWindow({ position: { x: parseInt(offset.left) + 60, y: parseInt(offset.top) + 60 }, theme: ‘custom’ });

// get the clicked row’s data and initialize the input fields.
var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, editrow);
$(“#firstName”).val(dataRecord.FirstName);
$(“#lastName”).val(dataRecord.LastName);
$(“#title”).val(dataRecord.Title);

// show the popup window.
$(“#popupWindow”).jqxWindow(‘open’);
}
} */
],
showtoolbar: true,
autoheight: true,
rendertoolbar: function (toolbar) {
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
var span = $(“<span style=’float: left; margin-right: 10px;’><img src=\”../images/box.png\”></span><span style=’float: left; margin-top: 5px; margin-right: 4px; color: #306680; font-size: 12px; font-family: Verdana,Arial,sans-serif;’>Box retrievals for the past 7 days </span>”);

toolbar.append(container);
container.append(span);

/* if (theme != “”) {
input.addClass(‘jqx-widget-content-‘ + theme);
input.addClass(‘jqx-rc-all-‘ + theme);
} */

}

});`

rtvData.php

{
    // SELECT COMMAND
	$result = mysql_query($query) or die("SQL Error 1: " . mysql_error());
	while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
		$act[] = array(
			'id' => $row['id'],
			'date' => date('d-m-Y H:i:s', strtotime($row['date'])),
			'activity' => $row['activity'],
			'service' => $row['service'],
			'user' => $row['user'],
			'item' => $row['item']
		  );
	}
	 
	echo json_encode($act);
}

[NadezhdaParticipant]

Hello mr_putersmit,

For the first issue, please check if you include all necessary scripts (i.e jqxDateTimeInput,jqxCalendar and globalize.js) or you don’t use the last version of jQWidgets. In your code you are using “columntype: ‘DateTime’ “, which is incorrect, the correct value is ‘datetimeinput’.

For the second issue could you, please, provide us with some sample data in jsfiddle?

Best Regards,
Nadezhda

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

[mr_putersmitParticipant]

Hi nadezhda

I am using jqxwidets 3.2.2 with the jqx-all.js script. I have amended as per your suggestion but it has made no difference. What I find strange, is in the demo, it allows you to select the first date then the second. When my calendar opens and I select the first date it selects all the date ranges and also, there is no Today or Clear buttons in the calendar. As far as my 2nd question is concerned, could it have something to do with the way I am returning the date from php? I shall try to make a fiddle and see if I can get a working demo. Thanks

[NadezhdaParticipant]

Hello mr_putersmit,

It is better to use the last version of jQWidgets. The features that you want to use are supported in our demo’s with version 3.4.0 so I suggest you to update your jQWidgets version and use widgets in the same way as in the demo’s and documentation.

Best Regards,
Nadezhda

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

[mr_putersmitParticipant]

Hi nadezhda

I beat you to it and downloaded 3.4.0 but still the problem persists. I have uploaded some grabs so you can possibly see the problem yourself. Many thanks

Calendar Open

Calendar selected

[NadezhdaParticipant]

Hi mr_putersmit,

Could you, please, check the implementation on our demo and check again if you include all necessary scripts? It would be good to clear your browsing data like Browsing history and Cache.

Best Regards,
Nadezhda

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

[mr_putersmitParticipant]

Hi nadezhda
I did that but still problem persists. I tried to debug and what happens is if I click a date in the calendar, say 6, this triggers an error of:

TypeError: an is null

which points to jqx-all.js file. As I said in earlier post, I am using the jqx-all.js file save loading in individual files. Don’t know how to proceed with this. Thanks

[NadezhdaParticipant]

Hi mr_putersmit,

Did you include “globalize.js” because it is not included in “jqx-all.js” file?

Best Regards,
Nadezhda

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

[mr_putersmitParticipant]

Hi nadezhda

I wasn’t aware of that. However, I included globalize.js and still throwing same error. I have tried different versions of jquery up to 1.11.0 but no change. How can I troubleshoot this. Thanks

[NadezhdaParticipant]

Hi mr_putersmit,

You may download again the last version of jQWidgets and begin with our demo.

Best Regards,
Nadezhda

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

[mr_putersmitParticipant]

nazezhda

In my globalize.js file, do I have to amend anything in there to accompany my localization code. Such as, I noticed that in the globalize.js file the first day is set to 0. But in my code it is set to 1. Would that make a difference. Thanks

[mr_putersmitParticipant]

Hi nazezhda

There is definitely something weird going on. When I run the filterrow demo that works fine. Although I would expect to to bearing in mind it is just generating random data and setting a time to midnight. This is not working however when trying to use with php and json. Is there a demo i can view where this is working in a php environment? Obviously the TypeError is not getting a format it is expecting. Many thanks

[Author]

Posts