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 ?
Related
I am using Kendo Date Picker with their MVVM support.
I have date picker input like this
I want to open the Date picker on click of the input box also, currently date picker triggers on click of Date Icon
<input data-role="datepicker" id="somedateinput" name="somedateinput"
data-bind="visible: true,
enabled: true,
value: data.formattedDueDate,
events: { change: onChangeDate }"
readonly onKeyDown="return false;"
placeholder="mm/dd/yyyy"
data-message="Delivery Date is Required" required
onclick='open_date_picker(event)'>
Now I am not sure what to do in open_date_picker(event) function
I tried this
open_date_picker function (event) {
this.open();
}
But its not working. Any suggestion about how to achieve this?
Actually I just need to reattach the kendodatepicker as below to open the datepicker on click of even date.
open_date_picker function (event) {
$(event.srcElement).data("kendoDatePicker").open();
}
$("#ElementId").attr("disabled","disabled");
The Above code only works for the Date pickers which are declared in Html page.
But I want to Disable the kendo Date picker in the kendo Grid Header Filter area.
Here is a simple way of achieving what you want.
Disabled text input on grid filter
I have modified the date cell to have the following:
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
filterable: {
cell: {
template: function (element) {
element.element.kendoDatePicker({
});
element.element.attr('disabled', 'disabled');
}
}
}
}
You will notice that I have added a template to the cell which will override the default date picker and add my own date picker to the filter row.
Note if you want to do this via the menu you just need to do this at the first element item e.g. element.kendoDatePicker({})
Hope this is what you are after.
For more info on this take a look at this link:
kendo grid filter api
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)
I have a input field that is formatted with the data-format HH:mm:ss PP. When the timepicker is clicked the focus on the input field don't appear that's why I couldn't use onblur event. What i want is like keydown or keyup event but it seems doesn't work in my case because focus is out in the input field so what jQuery event should i used?
change seems to work fine:
Fiddle
$("#datepicker").datepicker()
.on("change", function () {
console.log("Changed");
});
Example is with datepicker(), I'm not sure what your timepicker implementation is as it's not in the jquery(ui) api. But it should work as well.
Edit: after looking at the datetimepicker you are using, based on the DOM I'm seeing as a result of datetimepicker() - I think this should work for you:
Fiddle
$('#datetimepicker1').closest(".well").next(".bootstrap-datetimepicker-widget").on("click", "*", function () {
console.log("Changed");
});
Just make sure this is after your datetimepicker() call. Note that this will be triggered on any click within your calendar/time picker even if it is a click on something that is already selected (no change).
If you want, you could store the last value of your input and then check that if it changed before continuing with this event callback function. If it did change, be sure to update the variable you are holding the "last value" in... something like this.
If possible, the best option would actually be to modify datetimepicker()'s js to call a function or trigger an event from the same place it updates the text input. Looking at the code:
set: function () {
var formatted = "";
if (!this._unset) formatted = this.formatDate(this._date);
if (!this.isInput) {
if (this.component) {
var input = this.$element.find("input");
input.val(formatted);
input.trigger("change"); // added this
this._resetMaskPos(input)
}
this.$element.data("date", formatted)
} else {
this.$element.val(formatted);
this.$element.trigger("change"); //added this
this._resetMaskPos(this.$element)
}
},
With the two lines I added above, you should be able to rely on a change event bound to the input element.
I have a simple MVC3 form that has a date field and client side validation enabled (jquery.validate / jquery.validate.unobtrusive). I've added code to attach a datepicker (jQuery UI) to the date field per the documentation. However, if the datepicker is the last thing I click prior to clicking the submit button and the date field is invalid, it causes the datepicker for that field to automatically show itself. I don't want this. How can I disable?
Edit:
After reviewing the code for the validation plugin, it looks like it tries to manually focus on the last active input control using the focusInvalid() function below:
focusInvalid: function() {
if( this.settings.focusInvalid ) {
try {
$(this.findLastActive() || this.errorList.length && this.errorList[0].element || [])
.filter(":visible")
.focus()
// manually trigger focusin event; without it, focusin handler isn't called, findLastActive won't have anything to find
.trigger("focusin");
} catch(e) {
// ignore IE throwing errors when focusing hidden elements
}
}
},
There appear to be 2 options for dealing with this. One is to set the focusInvalid setting on the validator itself to false. I opted to monkey patch the focusInvalid function instead because it allows me to focus on the FIRST invalid element in the form, not necessarily the last active element.
$('form').data('validator').focusInvalid = function () {
$(this.currentForm).find('.input-validation-error').first().focus();
};
I'd be interested to hear any other approaches to this problem, however.
If acceptable in your case, you could show the datepicker only using a button, using the following datepicker options:
showOn: 'button', showButtonPanel: true, buttonImage: '<your image file>',
buttonImageOnly: true,
buttonText: 'Choose a Date',
If you do it this way the datepicker won't automatically display in case validation fails when submitting the form.