I am using the Datepicker jquery plugin to select the date. When I select the date using the Datepicker, it is displaying using the the format "yy-mm-dd"
However, when I donot select the date, the date is displayed in the "dd/mm/yy"
I tried to change the dateformat in jquery-ui.js from
//dateFormat: "mm/dd/yy", // See format options on parseDate
dateFormat: "yy-mm-dd", // See format options on parseDate
Any idea, how to change the dateformat for display as well ?
2 possibilities:
1) Haven't initialized the dateFormat in your datepicker. So try
$( ".selector" ).datepicker({ dateFormat: "yy-mm-dd" });
2) Might be handled by other methods(not sure)
Related
I want to be able to change my column header dynamically triggered by year picker onChange, but I can't find the proper style to handle it.
I've tried to modify with a check on the inspect element, but it also didn't work.
And my code:
$("#monthpicker").kendoDatePicker({
start: "year",
depth: "year",
format: "yyyy",
dateInput: true,
change: function() {
var year = kendo.toString($("#monthpicker").data("kendoDatePicker").value(), 'yyyy');
$("#treelist").data("kendoTreeList").dataSource.read({start: year});
$(".k-grid-header th.k-header:first-child").text(year);
}
});
And it should be like this:
(just change on the column header above Month column)
is there anyone experienced with this? Thanks.
Your query .k-grid-header th.k-header:first-child is selecting the wrong headers.
I propose using a headerTemplate with a placeholder, for instance:
headerTemplate: function(x) {
return '<span class="year-goes-here"></span>'
}
And then set the year via:
$("#treelist").find(".year-goes-here").text(2018)
Working example: https://dojo.telerik.com/uXuwIDeK
I am using Kendo DatePicker inside KendoGrid using editor template (DD/MM/YYYY format), after changing the date via datepicker i see that its saving the data into grid modal with yyyy-MM-ddThh:mm:ss.SSS format instead of DD/MM/YYYY. I am getting String from server in required DD/MM/YYYY format and display wise is also good only exception is during change of date via DatePicker.
How can i convert the date into required DD/MM/YYYY format while selecting date via datepicker?
function dateEditor(container, options) {
$('<input name="'+options.field+'"data-text-field="'+options.field+'"data-value-field="'+options.field+'" data-bind="value:'+options.field+'" data-format="'+options.format+'"/>')
.appendTo(container)
.kendoDatePicker({
format: "MM/dd/yyyy",
parseFormats: ["MM/dd/yyyy", "MM/d/yyyy", "M/dd/yyyy", "M/d/yyyy"],
change: function() {
// If i try to override with MM/DD/YYYY format using below code and trigger
//change event it goes into a infinite loop, so cant use this.
//this.value(moment(this.value()).format('MM/DD/YYYY'))
//this.trigger('change');
}
});
}
Please note that that requirement is not to use parameterMap as i am sending the data to server via below call so it picks the data directly from Grid without translating.
JSON.stringify($('#grid').data("kendoGrid").dataSource.data())
Let me know if Jsfiddle can help the experts here ?
I'm using date range picker component for choosing date ranges. Does it support I18n?
How can I edit the calendar language into Traditional Chinese?
Here is an example snippet of configuration code:
// Set the date range picker
$('input[name="daterange-last-30-days"]').daterangepicker({
// Predefined Ranges
startDate: moment().subtract('days', 30),
endDate: moment(),
"applyClass": "btn-success",
"cancelClass": "btn-danger",
locale: {
format: 'YYYY/MM/DD',
// Language Setting
monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
daysShort: ["日", "一", "二", "三", "四", "五", "六"]
}
});
Any advice or guidance would be greatly appreciated.
you can use this jquery plugin for chinese language support with date range picker.
check that link if it helps...
I want to show date in format "dd/MM/yyyy" with bootstrap datepicker.
I have the following code:
#Html.TextBoxFor(model => model.StartDate, "{0:dd/MM/yyyy}", new { #class = "w8em format-y-m-d form-control", #value=Model.StartDate.ToShortDateString("dd/MM/yyyy") })
It shows i.e. '20/10/2015' (20 oct 2015). But when I click on it to open datapicker it selects 10 august 2015 (why august? I don't know). If I just close datepicker (no selects anything inside) - textbox value is changed to '08/10/2015'. If I don't touch anything on page and just click "save" on form, StartDate validator says "Start date incorrect" and opens datepicker automatically. Why so strange behavior and how to change format to dd/MM/yyyy forcibly?
Browser is Chrome, the latest ukrainian version, datepicker is shown on english...
UPDATED:
I have added
$('##Html.IdFor(p=>p.StartDate)').datepicker({ dateFormat: 'dd/mm/yyyy' });
and does not work
should be
$('##Html.IdFor(p=>p.StartDate)').datepicker({ format: 'dd/mm/yyyy' });
instead of
$('##Html.IdFor(p=>p.StartDate)').datepicker({ dateFormat: 'dd/mm/yyyy' });
(look at datepicker parameters, should be 'dateFormat' instead of 'format')
I want to display past date in kendo datepicker input ,but want disable the past dates in the calender. For example , I am getting date value as 1st Oct from DB. SO I want to display the same in the date input but when user opens the kendo datepicker , i want to disable the past dates as part of validation. I tried with min: new Date() of kendo datepicker but in this case i am not able to display my data from DB
Can anyone help me on this.
Try below solution.
http://jsfiddle.net/vojtiik/ATmHG/4/
var todaysDate = new Date();
var pastDate = new Date(2013, 1, 1);
var dp = $("#datepicker").kendoDatePicker({
value: pastDate,
min: pastDate,
open: function(e) {
if ( dp.min() == pastDate) {
dp.value(todaysDate);
dp.min(todaysDate);
}
}
}).data("kendoDatePicker");