We Keep Coding

DataTables momentjs sorting plugin doesn't sort AM/PM times properly

I have some timestamped data that I'm displaying in a table with DataTables and I'm using its momentjs date sorting plugin to order the date/time column properly.
It's working on a page that only has a date but on the page that shows a date and time, it's ignoring AM and PM times.
So if a record was entered at 7:00 AM, it gets sorted as if it were later than another record entered at 6:30 PM.
Am I doing something wrong or is this a bug with the plugin/momentjs?
My code:
$(document).ready(function () {
$.fn.dataTable.moment('MM/DD/YYYY hh:mm:ss A'); //registers the date format we're using as sortable
$('#<%=gvNotes.ClientID%>').dataTable({
"order": [[1, 'desc']],
"columnDefs": [
{ "orderable": false, "targets": 0 }, //disable sorting on the "edit" column
{ "type": "date", "targets": $('#<%=hfDateColumnNum.ClientID%>').val() } //date column formatted like "03/23/2018 10:25:13 AM"
]
});
});

I figured out the issue. In my updated sample code above, the targets value for the date type was dynamically generated and stored in a hidden field.
Calling val() was returning the correct value but it was being parsed as a string rather than an integer, causing the code not to operate correctly. Using parseInt() fixed the problem.
Here's the updated code:
$(document).ready(function () {
$.fn.dataTable.moment('MM/DD/YYYY hh:mm:ss A'); //registers the date format we're using as sortable
$('#<%=gvNotes.ClientID%>').dataTable({
"order": [[1, 'desc']],
"columnDefs": [
{ "orderable": false, "targets": 0 }, //disable sorting on the "edit" column
{ "type": "date", "targets": parseInt($('#<%=hfDateColumnNum.ClientID%>').val()) } //date column formatted like "03/23/2018 10:25:13 AM"
]
});
});

ExtJS not able to set value for timefield component

I've been trying to find an approach on how to fix the issue I have, but I could not find it in Google nor S.O, that's why I'm posting this question.
I have two components of type: timefield that are represented in this piece of code:
{
xtype: 'timefield',
format: 'H:i',
increment: 30,
name: 'shiftStartTime',
itemId: 'shiftStartTime',
fieldLabel: 'Shift Start Time',
required: true,
value: '00:00'
}, {
xtype: 'timefield',
format: 'H:i',
increment: 30,
name: 'shiftEndTime',
itemId: 'shiftEndTime',
fieldLabel: 'Shift End Time',
required: true,
value: '00:00'
},
What I'm doing is easy, actually, I'm trying to set a value for the fields based on an entity that comes from server. I already managed to retrieve the entity which has two fields: 'hour' and 'minute', I want to set the concatenated value to both components, but for some reason, it always display blank. Here's the piece of code I implemented in order to set the value:
setPreEnteredTimes: function(userProfileItem) {
var me = this,
shiftStartTimeComp = me.getItem('shiftStartTime'),
shiftEndTimeComp = me.getItem('shiftEndTime'),
hh = userProfileItem.get('hour'),
mm = userProfileItem.get('minute');
var displayStr = hh + ':' + mm;
shiftStartTimeComp.setValue(displayStr);
shiftEndTimeComp.setValue(displayStr);
},
I've already tried even creating a new Date and using Ext.Date.format() using H:i but not working, the timefield is always displaying blank.
Version of ExtJS is 4.2.3
Thanks in advance.

There is nothing wrong with timefields and .setValue(). I'm sure that you will get an error like me.getItem(...) is not a function on the console. Here is a fiddle with an example: https://fiddle.sencha.com/#fiddle/17al
Replace me.getItem() with a component query like this (included in fiddle):
var shiftStartTimeComp = Ext.ComponentQuery.query('timefield[name="shiftStartTime"]', me)[0];

I can read Name of the release, but not able to read can't read ReleaseDate from the release in rally

columnValue = columnValue.get('Name');
give me Name of the release
but not able to read ReleaseDate
columnvalue1 = columnValue.get('ReleaseEndDate');
this gives me error
Uncaught TypeError: undefined is not a function
This is my release object
columnValue value
j {phantom: false, internalId: "ext-record-2", raw: Object, data: Object, modified: Object…}
data: Object
CreationDate: null
GrossEstimateConversionRatio: ""
Name: "Release 24"
Notes: ""
ObjectID: 12788620953
PlannedVelocity: null
Project: ""
ReleaseDate: Wed Sep 17 2014 10:29:59 GMT+0530 (India Standard Time)
ReleaseStartDate: Wed Jul 23 2014 10:30:00 GMT+0530 (India Standard Time)
RevisionHistory: ""

Release object has ReleaseStartDate and ReleaseDate. There is no ReleaseEndDate in WS API.
Use ReleaseDate.
Try this example of a simple grid from the guide. Replace model: 'userstory' with model: 'release', and use config:
columnCfgs:[
'Name',
'ReleaseStartDate',
'ReleaseDate'
]
You should see ReleaseDate.
Then try custom data example from the grid that requires explicit fetching of ReleaseDate. Modify that example to display a grid of releases instead of a grid of user stories. You may do something like this to create a custom column Release Dates based on values of both ReleaseStartDate and ReleaseDate:
launch: function() {
Ext.create('Rally.data.wsapi.Store', {
model: 'release',
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
},
fetch: ['Name', 'ReleaseStartDate', 'ReleaseDate']
//fetch: ['Name', 'ReleaseStartDate']
});
},
_onDataLoaded: function(store, data) {
var records = _.map(data, function(record) {
console.log(record);
return Ext.apply({
ReleaseDates: record.get('ReleaseStartDate') + " -- " + record.get('ReleaseDate')
}, record.getData());
});
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
data: records
}),
columnCfgs: [
{
text: 'Name',
dataIndex: 'Name'
},
{
text: 'Release Dates',
dataIndex: 'ReleaseDates',
flex: 1
}
]
});
}
This should also display ReleaseDate as long as fetch includes ReleaseDate fetch: ['Name', 'ReleaseStartDate',ReleaseDate']
The problem is likely to be related to your code. Start with working examples as above and see if ReleaseDate is returned.

Flot chart displaying data from data that aren't even in JSON

I have the following
<div id="chart"></div>
<script src="js/flot/jquery.flot.js"></script>
<script src="js/flot/jquery.flot.tooltip.min.js"></script>
<script src="js/flot/jquery.flot.resize.js"></script>
var sessions = [
[1418706000000, 14813],
[1418792400000, 39580],
[1418878800000, 51193],
[1418965200000, 66700],
[1419051600000, 108737],
[1419138000000, 101081],
[1419224400000, 94449],
[1419310800000, 109039],
[1419397200000, 92329],
[1419483600000, 68942],
[1419570000000, 75391],
[1419656400000, 120016],
[1419742800000, 132495],
[1419829200000, 103469],
[1419915600000, 88940],
[1420002000000, 59938],
[1420088400000, 72359],
[1420174800000, 74663]
];
var users = [
[1418706000000, 2632],
[1418792400000, 9588],
[1418878800000, 9273],
[1418965200000, 10839],
[1419051600000, 14948],
[1419138000000, 11226],
[1419224400000, 13394],
[1419310800000, 10493],
[1419397200000, 8482],
[1419483600000, 2375],
[1419570000000, 5783],
[1419656400000, 10068],
[1419742800000, 8288],
[1419829200000, 5423],
[1419915600000, 4866],
[1420002000000, 1862],
[1420088400000, 5560],
[1420174800000, 1257]
];
function doPlot(position) {
$.plot($("#chart"), [{
data: sessions,
label: "Sessions"
}, {
data: revenue,
label: "Revenue",
yaxis: 2
}], {
xaxes: [{
mode: 'time'
}],
yaxes: [{
min: 0
}, {
alignTicksWithAxis: position == "right" ? 1 : null,
position: position
}],
legend: {
position: 'sw'
},
grid: {
hoverable: true
},
tooltip: true,
tooltipOpts: {
content: "%s for %x was %y",
xDateFormat: "%y-%0m-%0d",
onHover: function (flotItem, $tooltipEl) {
}
}
});
}
doPlot("right");
Thhis displays figures for both sessions and users on dates that there isn't even data for. The last date that there is data for is Dec 27th. Yet, this line graph shows data for up until Jan 2nd.
Here is a working example here
Any ideas?

According to your last data entry in each array element time = 1420174800000, so:
var date = new Date(1420174800000);
// output "Fri, 02 Jan 2015 05:00:00 GMT"
console.log(date.toGMTString());

I converted your data to dates:
date = new Date(sessions[i][0])
It contains dates between Dec 16 2014 and Jan 02 2015. You can see it in this fiddle.
When you fill your arrays, you should convert your dates to numbers simply with:
sessions[i] = [Number(date), value];
I'm not sure how you meant Date('D, M j'), I assume it's a string like "Date(month,day,year)". An example of converting this kinf of json to plottable data: in this other fiddle.
Actually, I reversed the day and month, but you get the idea. :)

ExtJS Forms > .getFieldValues() function doesn't return any value for "timefield" xtype

I am using ExtJS Forms.
My form code is as follows:
Ext.create('Ext.form.Panel', {
width: 600,
layout: 'anchor',
defaultType: 'textfield',
items: [{
fieldLabel: "Specimen",
name: "Specimen"
}, {
.
.
.
}, {
fieldLabel: "Time Stamp",
name: "timestamp",
xtype: "timefield",
allowBlank: false
}],
buttons: [{
text: 'Save',
handler: function() {
var form = this.up('form').getForm();
var fieldValuePair = form.getFieldValues();
}
}],
renderTo: "ui"
});
For some special purpose, I want to get the id/value pairs in json format, which I have acheived using the .getFieldValues() function.
The problem is, when I press the "Save" button, the "fieldValuePair" variable in the handler function correctly gets all the values in json format except for the fields that have the "timefield" or "datefield" xtypes.
I have searched the web, but didn't come across any solution.
Any idea what may be the problem...?

Try with:
handler: function () {
var form = this.up('form').getForm();
var formValues = form.getValues(); // instead getFieldValues
console.log(formValues);
}
this way it returns:
date "12:30 AM"
and not:
date
Date {Tue Jan 01 2008 00:15:00 GMT+0100 (Central European Standard Time)} // this being another object
cheers!