I have a doubt in Kendo chart tool tip .That is how to display the date with time format .I have a field time: `2013-02-13 16:58:07`,
some thing like this so when i am reading in tool tip template i am
calling the field as
tooltip: {
visible: true,
template: '#= category # ,
font: '11px Trebuchet MS'
}
In tool tip it was showing as fri feb 01 2013 00:00:00 gmt+0530(indian standard time)**
How can I change that and display only 2013-02-13 16:58:07 using remote data
I used dataitem in local data it was working fine but with remote data i am getting as undefined.
tooltip: {
visible: true,
format: "{0}",
template: 'DATE:#= dataItem.time<br/>'
}
The problem is the timeformat,this is from ww3c:
var d=new Date();
var n=d.toISOString();
And this is the result:
2013-02-28T07:41:04.188Z
Also try to read this:
http://blog.stevenlevithan.com/archives/date-time-format
Related
How do I add a 15 day (bimonthly) view in Kendo UI Scheduler?
The idea is to show 15 days at a time (as opposed to 30 days in a month).
Any help is greatly appreciated.
This can be done using custom timeline view ,
var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
options: {
name: "MyCustomTimelistView",
title: "Timeline Week",
selectedDateFormat: "{0:D} - {1:D}",
selectedShortDateFormat: "{0:d} - {1:d}",
majorTick: 1440,
**numberOfDays: 15**
},
and then the view type will be "MyCustomTimelistView"
var scheduler = $("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
views: [{
type: "**MyCustomTimelistView**",
selected: true,
dateHeaderTemplate: "<span class='k-link k-nav-day'>#=kendo.toString(date, ' dd/M ddd')#</span>"
}],
Reference: https://docs.telerik.com/kendo-ui/controls/scheduling/scheduler/how-to/custom-views/timeline-with-dynamic-length
I'm quite new to Highcharts and the documentation is pretty huge for me to solve my little big problem.
I'm working on app for runners and want to display running pace on chart in minutes:seconds by kilometer or mile, in format like 05:30, which means pace 5 minutes and 30 seconds pre kilometer or mile.
My current (and not working) code is here:
Highcharts.chart('container', {
yAxis: {
type: 'datetime',
categories: ['03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30'],
labels: { format: '{value:%H:%M}'}
},
xAxis: {
categories: ['2018-01-01', '2018-05-01', '2018-10-01']
},
series: [{
data: ['05:00', '06:00' , '06:30'],
dataLabels: { format: '{value:%H:%M}'}
}],
legend: {layout: 'vertical',align: 'right',verticalAlign: 'middle'},
plotOptions: {series: {label: {connectorAllowed: false},pointStart: 0}},
responsive: {rules: [{condition: {maxWidth: 1000},chartOptions: {legend: {layout: 'horizontal',align: 'center',verticalAlign: 'bottom'}}}]}
});
Currently the line in chart is not appearing. Can anybody repair my code to work correctly? Thanks.
Data needs to be numbers, not string values. If you look in console, you will most likely have Error 14 telling you this.
Changing your data to milliseconds (the format needed for highcharts to understand time) will work, like this:
data: [5 * 3600 * 1000, 06 * 3600 * 1000, 6.5 * 3600 * 1000],
Working example: https://jsfiddle.net/ewolden/55bk99ke/2/
If you want to fix the tooltip in the above example, you just need to format it the same way you format the yAxis labels. Like this:
tooltip: {
pointFormat: '{point.y:%H:%M}'
},
https://jsfiddle.net/ewolden/55bk99ke/5/
I am using Kendo UI v2016.2.714 and jQuery v1.9.1. I am unable to turn off the scheduler tool bar k-current-view which seems to redundantly indicate which of the Day/Week/Month buttons is selected:
This appears to be the result of a recent KendoUI upgrade as I never saw it before. Basically I just want to see the three buttons which I have defined in my javascript file:
var sch = $("#schAppointment").kendoScheduler({
date: new Date(), // date: new Date(), The current date of the scheduler
showWorkHours: true,
workDayStart: new Date("2013/1/1 06:00 AM"),
workDayEnd: new Date("2013/1/1 08:00 PM"),
height: 700,
timezone: "Etc/UTC",
views: [{
type: "day",
eventTemplate: $("#event-day-template").html(),
eventHeight: 40
}, {
type: "week",
eventTemplate: $("#event-week-template").html(),
eventHeight: 40
}, {
type: "month",
selected: true,
startTime: new Date("2013/1/1 06:00 AM"),
endTime: new Date("2013/1/1 08:00 PM"),
eventTemplate: $("#event-month-template").html(),
}],
I have not found in the Kendo documentation how to disable this k-current-view and I am still learning Javascript so I haven't discovered how to find the attribute to disable either.
Just for those who might be looking for this answer:
Turns out it was the missing kendo.*.min.css type files. I upgraded everything else but that...dumb mistake
My kendo grid is showing date like this /Date(691869600000)/ . How do i solve this?
Using this answer I got the Steve code to work for my case. Try this template:
"#= kendo.toString(new Date(parseInt(myField.substr(6))),'MM/dd/yyyy HH:mm tt')#"
'#= kendo.toString(yourDateField,"MM/dd/yyyy HH:MM tt")#'
and make your field type as date.
You need to specify the date as a type in your datasource definition - else it will just be a string:
For example if your field is birthday:
var kendoDS = new kendo.data.DataSource({
schema: {
model: {
fields: {
birthday: { type: "date"}
}
}
});
And when you define the Grid:
kendoGrid({
selectable: whatever values..etc
columns: your-response,
dataSource: kendoDS
});
See this for more info: http://www.kendoui.com/forums/framework/data-source/json-date-handling-changed-in-latest-release.aspx
Use template like the following or like the one in the documentation link.
#= kendo.format("{0:d}",theDateTimeFieldName)#
var offsetMiliseconds = new Date().getTimezoneOffset() * 60000;
#= kendo.toString(new Date( parseInt(JSONDateTime.substr(6)) + offsetMiliseconds),"dd-MMM-yyyy hh:mm tt") #
Does anybody have an example of using the date formatter with a server side database, or can you point me to something to help?
You can find information about predefined formatters on the jqGrid wiki.
The following is an example of how date formatting can be used in the grid. The format ShortDate displays the date according to the selected locale. You can use your own formatting instead, for example Y-m-d H:i:s.
srcformat describes the format of the date as sent by the server, newformat describes the desired output format.
This example includes searchoptions which will make sure that your users can select the desired date with the help of a datepicker when performing a search on the grid.
colModel :[
{ name:'startdate', index:'startdate', formatter:'date',
formatoptions: { srcformat:'m/d/Y', newformat:'ShortDate' },
searchoptions: { sopt: ['eq','lt','le','gt','ge'],
dataInit : function (elem) {
$(elem).datepicker({ changeMonth: true, changeYear: true,
dateFormat: 'yy-mm-dd' });
}
}
}
]
We can also take the transient field of the date in pozo class and check in getter methed if date is not null then convert it into datetostring .Also we have to change in jsp where we used this jqgrid we have to take transient field instead of date field.
example :
(Pozo Class)
transient private String indentDate_String;
public String getIndentDate_String()
{
if(indentDate != null)
indentDate_String = DateConversion.dateToString(indentDate);
return indentDate_String;
}
jqgrid (jsp form):
colNames:['Indent Date'],
colModel:[
{name:'indentDate_String',index:'indentDate',autoheight: true, width:100},
]