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')
Related
so i want to update lead time which is a date value by displaying the list of records and then clicking a button to display a date in a modal form to update. This only works for the first record returned. It does not popup date for other records.
You need to initialize the datepicker again. if you are cloning the filed
simply initialize at the time of foucs.
$('body').on('focus', ".datepickernew", function () {
$(this).removeClass('hasDatepicker')
.removeData('datepicker')
.removeAttr('id')
.unbind()
.datepicker({dateFormat: "dd M yy", changeMonth: true, changeYear: true,
});
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();
}
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 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 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.