I have a Kendo React Grid to display data that I am fetching from a Sharepoint List. It is a simple grid as shown in this link - https://www.telerik.com/kendo-react-ui/components/grid/get-started/
<Column field="StartDate" title="Start Date" width="200px" format="{0:MMM yyyy}" />
<Column field="EndDate" title="End Date" width="200px" format="{0:MMM yyyy}" />
Right now the date is in ISO format like this-2014-08-14T15:30:10Z
How can I convert to mm/dd/yyyy format? The above value for format property doesn't seem to be working.
The KendoReact Grid formats only valid JavaScript date objects.
There is clarification from telerik:
https://www.telerik.com/kendo-react-ui/knowledge-base/grid-date-format/
You can pass a custom function in 'cell' property to Column. Use 'moment' to customize the date as per your format.
<Column field="StartDate" title="Start Date" width="200px" cell={this.myCustomDateCell}" />
myCustomDateCell = props => {
if (props.dataItem[props.field] !== '') {
return <td>{moment(props.dataItem[props.field]).format("MM/DD/YYYY")}</td>
}
return <td>{props.dataItem[props.field]}</td>
}
First you need to check what is returned from the server.
If the server returned the date value in this format: 2022-02-11T15:50:51.000+00:00
you don't need to use 'moment', you can see my answer here:
https://stackoverflow.com/a/72772927/13663916
Related
I want to refine my value today but i cant set. Can help me!
<input type="date" name="start" value="2022-12-25"/>
<input type="date" name="end" value="2022-12-25"/>
I want to refine my value today but i cant set. Can help me!
You can try to set the default date with js:
<input type="date" name="start" />
<input type="date" name="end" />
#section Scripts{
<script>
$(function(){
document.getElementsByName('start')[0].valueAsDate = new Date();
document.getElementsByName('end')[0].valueAsDate = new Date();
})
</script>
}
result:
the information you provided is not sufficient. Provide which language/technology you are working, i figured it out that you are looking for help in Microsoft technology stack.
Coming to the point you want to print/show Current Datetime value, for that, According to me Create variable storage Current Datetime and bind it to the Html
for Ex.
var CurrentDateTime = DateTime.now;
this will set Current date time to the variable and in HTML MVC if you are using razor view / pages
you just need to bind that value to it.
there are multiple ways for that.
but here i would like to GO with ViewBag approach
you can do like following
ViewBag.CurrentDatetime = DateTime.Now;
And in your UI cshtml file
retrieve that stored value from ViewBag like following
#{
var CurrentDatetime = ViewBag.CurrentDatetime;
}
<input type="date" name="end" value=#CurrentDatetime/>
Note: If you not find this answer Helpful, i am requesting you to Provide some Detailed and precise Explanation regarding what you exactly looking for.
Thanks.
I am using <input type="date"> and developed my app in Firefox. Theres is no way on manipulating the date field and the format is alway valid. From https://caniuse.com/input-datetime I see, this is not supported for any browser, e.g. Safari doesn't have a build-in Datepicker for Desktop Browser.
My Format (out-of-the-box) is DD.MM.YYYY and the value is stored as YYYY.MM.DD.
My app is used in Germany only, so the date format for the user to enter is always DD.MM.YYYY.
Safari uses the value format YYYY.MM.DD out of the box. How can I make sure, the date format is always DD.MM.YYYY during entering for the enduser.
This is my input:
<input
id="birthday"
type="date"
name="birthday"
placeholder="Geburtsdatum"
style={errors.birthday ? { border: "2px solid red" } : {}}
onChange={(e) => {
e.target.value = moment(e.target.value).format(
"YYYY-MM-DD"
);
handleChange(e);
}}
onBlur={handleBlur}
value={moment(values.birthday || user.birthday).format(
"YYYY-MM-DD"
)}
/>
This code looks like this in Firefox:
and like this in Safari:
The user is not used to the format YYYY-MM-DD and I want him to enter the format like: DD.MM.YYYY
I working on Angular Kendo Grid and I am getting server data in format
1900-01-01T00:00:00
But I want it to display in standard format, not sure how to do it. I have applied format='{0:MM/dd/yyyy h:mm a}' in grid column but no effect. What ever data format conversion to do, I need to do at client side of code i.e server date to javascript format!!
<kendo-grid-column field="mydata.openDate" width="220" title="Open Date" filter="date"
format='{0:MM/dd/yyyy h:mm a}'>
</kendo-grid-column>
Try this:
<kendo-grid-column field="dateField" width="220" title="Open Date">
<ng-template kendoGridCellTemplate let-dataItem>
{{dataItem.dateField | date: 'MM/dd/yyyy'}}
</ng-template>
</kendo-grid-column>
You can also use short or other formats provided by angular Date Pipe
if you have a big project and you have to use the same format multiple times then a directive is the way to go.
This is super important for the usability and in case you decided to change the format you use (Maintenance)
import { Directive, OnInit } from '#angular/core';
import { ColumnComponent } from '#progress/kendo-angular-grid';
#Directive({
selector: '[kendo-grid-column-date-format]'
})
export class KendoGridColumnDateFormatDirective implements OnInit {
constructor(private element: ColumnComponent) {
}
ngOnInit() {
this.element.format = "{0:dd.MM.yyyy}";
}
}
and you can use it like this
<kendo-grid-column field="yourField"
title="your title"
kendo-grid-column-date-format>
</kendo-grid-column>
Super important do not forget to register the directive
The Grid data needs to contain actual JavaScript Date objects as opposed to some string representations. Then built-in formatting, sorting, filtering and editing will treat the dates as such and will work as expected:
Docs
Map the data so that it contains actual dates.
EXAMPLES:
String
Date
I have simple date object made in JS and I don't know why AngularJS can't bind it to the input control(Probably the problem is the format of date) but please explain me it. The sample problem occurs when I return Json object which contains date.
View:
<div ng-controller="MyCtrl" ng-app>
<input type="date" ng-model="dateVal" />
<hr/>
{{dateVal}} </br>
</div>
Controller:
function MyCtrl($scope) {
$scope.dateVal = new Date(2013, 06,07);
}
Entire example is placed
here - jsfiddle
The input control doesn't appear to bind to a date object, but a string object.
Change your dateVal to a string like
$scope.dateVal = "2013-06-07";
See this fiddle http://jsfiddle.net/2BZV4/2/
i have the following code:
<p:barChart id="bar" extender="extBar"
value="#{primeBean.findBarModel('simpleBarChart')}" />
<script>
function ext() {
}
</script>
Will be renderized the values:
[
[[5,1], [1,2], [3,3], [4,4]],
[[4,1], [7,2], [1,3], [2,4]]
]
How can i get the category/serie value inside ext function ? Is there an element that i can get these values inside ext ?
Yes and it's very easy. Add a widgetVar attribute to your <p:barChart this way :
<p:barChart widgetVar="myWidget" ... />
The you can access the data in javascript using myWidget.cfg.data. You'll get an array of array that you can read using regular js.
You can test it online in the showcase, open a javascript console if your browser has one and type : widget_basic.cfg.data