Can the popup calendar be moved to the right on a datepicker when the input field is 100% wide?
The datepicker is created as this:
The datepicker is created as this:
@(Html.Kendo().DatePickerFor(m => m).Format("dd-MM-yyyy").ParseFormats(new string[] { "dd-MM-yyyy", "MM/dd/yyyy" }).Culture("da-DK").HtmlAttributes(new { @class = "form-control datepicker", @style="width:100%" } ))
5 Answers, 1 is accepted
0
Michael
Top achievements
Rank 1
answered on 02 Nov 2014, 12:29 PM
Got it working as to this answer: http://www.telerik.com/forums/popup-align-to-the-right-side-of-input
only problem is that I get "Uncaught TypeError: Cannot read property 'dateView' of undefined" when i use the className.
Its works if using the ID
only problem is that I get "Uncaught TypeError: Cannot read property 'dateView' of undefined" when i use the className.
Its works if using the ID
0
Hello Michael,
If the correct input element is found using a jQuery class selector, then there should be no difference. I suppose that you are using a custom CSS class, which will be copied to the wrapper by default. If you use more specific selector, for instance "input.custom-class" then the approach from the mentioned forum should work flawlessly.
Regards,
Georgi Krustev
Telerik
If the correct input element is found using a jQuery class selector, then there should be no difference. I suppose that you are using a custom CSS class, which will be copied to the wrapper by default. If you use more specific selector, for instance "input.custom-class" then the approach from the mentioned forum should work flawlessly.
Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 05 Nov 2014, 11:01 AM
if I use the class I get
uncaught TypeError: Cannot read property 'dateView' of undefined
In another view i have these to datetime pickers:
<input data-val="true" data-val-date="The field Starter must be a date." data-val-required="Feltet Starter skal udfyldes." id="Start" name="Start" type="text" value="12-12-2014 17:30" data-role="datetimepicker" class="k-input" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="45288f8d-147a-448d-8748-100b06667e38_cell_selected">
<input data-val="true" data-val-date="The field Slutter must be a date." data-val-required="Feltet Slutter skal udfyldes." id="End" name="End" type="text" value="12-12-2014 23:30" data-role="datetimepicker" class="k-input" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="End_option_selected">
and this to position the calendar:
I get: Uncaught TypeError: Cannot read property 'dateView' of null
If i copy the javascript into the console of Chrome i moves the first calendar ?
uncaught TypeError: Cannot read property 'dateView' of undefined
In another view i have these to datetime pickers:
<input data-val="true" data-val-date="The field Starter must be a date." data-val-required="Feltet Starter skal udfyldes." id="Start" name="Start" type="text" value="12-12-2014 17:30" data-role="datetimepicker" class="k-input" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="45288f8d-147a-448d-8748-100b06667e38_cell_selected">
<input data-val="true" data-val-date="The field Slutter must be a date." data-val-required="Feltet Slutter skal udfyldes." id="End" name="End" type="text" value="12-12-2014 23:30" data-role="datetimepicker" class="k-input" role="combobox" aria-expanded="false" aria-disabled="false" aria-readonly="false" style="width: 100%;" aria-activedescendant="End_option_selected">
and this to position the calendar:
$(
"input[data-role='datetimepicker']"
).kendoDateTimePicker()<br> {<br>
// Reposition DatePicker calendar popup so it opens at button position!<br> var pickerDateViewPopup = $("input[data-role='datetimepicker']").data("kendoDateTimePicker").dateView.popup;<br> pickerDateViewPopup.options.origin = "bottom right";<br> pickerDateViewPopup.options.position = "top right";<br> };
I get: Uncaught TypeError: Cannot read property 'dateView' of null
If i copy the javascript into the console of Chrome i moves the first calendar ?
0
Accepted
Hello Michael,
This "$("input[data-role='datetimepicker']")" will return an array of inputs, hence the data() will not be the correct one. You will need to loop the result and set the popup position to every widget separately. Here is a Dojo demo that demonstrates this.
Regards,
Georgi Krustev
Telerik
This "$("input[data-role='datetimepicker']")" will return an array of inputs, hence the data() will not be the correct one. You will need to loop the result and set the popup position to every widget separately. Here is a Dojo demo that demonstrates this.
Regards,
Georgi Krustev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 06 Nov 2014, 12:03 PM
it works beautifully! thanks a million:-)