This is a migrated thread and some comments may be shown as answers.

position calendar popup to the right

5 Answers 684 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 01 Nov 2014, 06:25 PM
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:

@(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

Sort by
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
0
Georgi Krustev
Telerik team
answered on 05 Nov 2014, 08:34 AM
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
 
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:

$("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
Georgi Krustev
Telerik team
answered on 06 Nov 2014, 11:37 AM
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
 
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:-)
Tags
Date/Time Pickers
Asked by
Michael
Top achievements
Rank 1
Answers by
Michael
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or