I wrote such schema for my date field:
StartDate: { type: "date", format: "{0:dd/MM/yyyy}" }
and a column definition:
{
field: "StartDate",
title: "Start Date",
template: '#= StartDate!=null ? kendo.toString(StartDate, "dd/MM/yyyy"): " " #',
width: 100
}
But I still see dates in format MM/dd/yyyy in datepicker during edition:
And if I try to write date manually in dd/MM/yyyy format I see:
Try adding a format field, like this:
columns: [{
field: "StartDate",
format: "{0: dd/MM/yyyy}"
// ...
}]
Setting culture is solved this issue
kendo.culture("en-GB")
Related
I am using jqGrid to bind data and i have a date field which i am binding it to grid. The date is 01/01/0001, but when i try to bind it to grid, it is displaying as 1/1/1. How can i display with out truncating zeros.
I am using "Guriddo jqGrid JS - v5.2.1"
below is my sample colModel for the date i have implemented
{
name: "orderDate",
label: "orderDate",
align: "left",
jsonmap: "orderDate",
formatter: "date",
formatoptions: { newformat: 'm/d/Y' }
}
First of all you will need to set the source format (srcformat). The default srcformat is Y-m-d
In you case you will need to set:
{
name: "orderDate",
label: "orderDate",
align: "left",
jsonmap: "orderDate",
formatter: "date",
formatoptions: { srcformat : m/d/Y, newformat: 'm/d/Y' }
}
Second which is more important is that dates in Javascript begin since 1 jan 1970. Your source date is not correct and it will be not interpreted correcy
In your case you will need to define your own (custom) formatter to do what you want.
I'm using a kendo grid to display the data. When I filter on the date field specifying a date value (equals) then it works fine. But when I use the before or after conditions in the filter, it filters the data incorrectly.
Also sorting on the date field does not sort it properly. Any help would be greatly appreciated. FYI: I used the moment.js to format the data in dd/mm/yyyy format.
Here is the code snippet with the data:
$("#testgrid").kendoGrid({
change:onChange,
dataSource: {
data: [
{"No":"27691","ClientName":"ABC","ExpiryDate":"2015-03-14T00:00:00Z"},
{"No":"27691","Name":"DEF","ExpiryDate":"2016-03-22T00:00:00Z"},
{"No":"27691","Name":"ABC","ExpiryDate":"2015-02-28T00:00:00Z"},
{"No":"27691","Name":"ABC","ExpiryDate":"2011-07-03T00:00:00Z"},
{"No":"27691","Name":"ABC","ExpiryDate":"2015-07-31T00:00:00Z"},
{"No":"27691","Name":"ABC","ExpiryDate":null},
{"No":"27691","Name":"ABC","ExpiryDate":"2012-04-30T00:00:00Z"}
],
schema: {
model: {
fields: {
No: { type: "string" },
ExpiryDate: {
type: "date",
parse: function(inputdate) {
var dtval = moment(inputdate).format('DD/MM/YYYY');
if (dtval == "Invalid date")
return "";
else return dtval;}
},
Name: { type: "string" }
}
}
},
pageSize: 20
},
height: 550,
selectable: "single row",
allowCopy: true,
resizable: true,
groupable: true,
sortable: true,
filterable: {
mode: 'row',
extra: false,
operators: {
string: {
startswith: "Starts with",
eq: "Is equal to",
neq: "Is not equal to"
}
}
},
pageable: true,
columns: [
{ field: "No", title: "Number", filterable: { cell: { showOperators: true, operator: "contains" } } , width: 150 },
{ field: "Name", title: "Name", filterable: { cell: { showOperators: true} }, width: 150 },
{ field: "ExpiryDate", title: "Expiry Date",
format: "{0:dd/MM/yyyy}", filterable: {
cell: {
template: function (args) {
args.element.kendoDatePicker({
format: "{0:dd/MM/yyyy}"
});
}
}}
, width: 150 }
]
});`
Interestingly, I've been struggling with an issue related to the filter field its self; I couldn't change the format of the date...
Your section of code for the "ExpiryDate" field helped solve my problem!
{ filterable: { cell: { template: function (args) { args.element.kendoDatePicker({ format: "{0:dd/MM/yyyy}" }); }
}}
Thought it might be useful to highlight this for others.
Removing the parse setting in the schema probably solves the sorting problem. On the filtering, perhaps the "problem" is that your dates are in UTC, but Kendo displays them in your browser's local time, and you need to deal with time.
I am in US Central Daylight Time (CDT), so 2015-03-14T00:00:00Z shows as 13/03/2015 in the grid. If I use an "equals" filter with 13/03/2015 then I get no results in the grid. Same thing - no result - with 14/03/2015. If I change the datepicker template format to dd/MM/yyyy HH:mm:ss and filter by equals 13/03/2015 19:00:00 then I get that entry, as expected.
Thus in order to use "equals" you must have (a) the time component and (b) remember the conversion of local to UTC.
Demo in Kendo Dojo
I want to pass column value to the delete confirmation. Are you sure you want to delete "Column Value" ? How can I do this ?
I found the question related to my question in the below link. I want extension to this answer.
How to change the text on Kendo UI Grid destroy or delete command action?
You can use a function instead of a hard coded string for the confirmation message
$("#grid").kendoGrid(
{
dataSource: dataSource,
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "120px" },
{ field: "UnitsInStock", title:"Units In Stock", width: "120px" },
{ field: "Discontinued", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: {
mode: "inline",
confirmation: function(e){
return "Are you sure that you want to delete record for " + e.ProductName + "?";
}
}
});
Example here
I can get the following to work and show a datepicker and timepicker:
1) grid with a column type date, columnMenu: not set to true,
I can't get the following to work. It only show the datepicker and not the timepicker:
2) grid with a column type date, columnMenu: set true/{...}
Below are some examples:
This works and shows both the date and time pickers:
jsfiddle grid date filter no columnMenu both date and time pickers show up
This doesn't work and only show the date picker but now time picker:
jsfiddle grid date columnMenu: true/{...} filter only date picker shows up
How do I get the time picker to show up if I use the columnMenu:?
I'm using the datetimepicker but only the datepicker shows up.
// TODO: Make datetimepicker filter show the timepicker next the to datepicker when
// columnMenu: is used
columnMenu:
{
filterable: { ui: "datetimepicker" }, // Partial - Date picker is shown, no time picker shown
//filterable: { ui: "datepicker" }, // Works - Date picker is shown
},
The problem is that ui is part of the filterable defined for each column not defined in columnMenu. Your definition should be:
columnMenu: {
filterable: true
},
height: 200,
columns: [
{
field: "title",
title: "Title",
width: "270px"
},
{
field: "date5",
title: "D 5",
width: "230px",
format:"{0:MM/dd/yyyy hh:mm tt}",
filterable: {
ui: "datetimepicker"
}
}
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/rsa7yqwj/2/
I'm using kendo UI for my solution like in code below
<div id="myGrid" data-role="grid"
data-bind="source: viewModel"
data-sortable="true"
data-pageable="true"
data-filterable="true"
data-resizable="true"
data-editable = "incell"
data-selectable="true"
data-columns='[
{ field: "Name", title: "Name" },
{ field: "StartDate", title: "Start date", format: "{0:dd/MM/yyyy}"},
{ field: "EndDate", title: "End date", format: "{0:dd/MM/yyyy}"},
{ field: "ClosingDate", title: "Closing date", format: "{0:dd/MM/yyyy}"}]'
data-toolbar ='[{name:"create"},
{name:"save"}]'>
</div>
Fields in viewModel have "date" type.
Let's say I'm choosing Start date as 16/05/2014 and after that I'm saving changes. But after updating i see that Start date is 15/05/2014. And it happens with each date cell in grid.
Why date is less than i was chose.
Is there a way to solve this problem?
Refer to the answer given here: javascript Date.parse
I assume that the issue is caused by the browser you are using. I had a lot of trouble with date formatting in IE. I found that creating dates in Chrome or Firefox gave me exactly what I wanted, but in IE any format other than MM/dd/yyyy when creating or parsing a date gave the incorrect date in the Date object once parsed.
My suggestion is the same as the answer I linked to: instead of using the 'format' field of the column, use a template and parse it yourself.
data-columns='[
{ field: "Name", title: "Name" },
{ field: "StartDate", title: "Start date", template: "# parseDate(StartDate) #"},
{ field: "EndDate", title: "End date", template: "# parseDate(EndDate) #"},
{ field: "ClosingDate", title: "Closing date", template: "# parseDate(ClosingDate) #"]'
Then have your parseDate(date) function:
function parseDate(date) {
if (date == null) return '';
//using the .slice() method keeps the leading '0' if MM or dd is single digit
var rtn = ('0' + date.Date()).slice(-2) + '/' +
('0 + (date.Month() + 1)).slice(-2) + '/' +
date.FullYear();
return rtn;
}