DatePicker start & depth

[Bryan]

When creating a DatePicker that looks like:

$("#dobPicker").kendoDatePicker({
    min: new Date(1900, 0, 1),
    max: new Date(),
    depth: "decade",
    start: "decade"
});

I can not get the start value to start the DatePicker in any depth but the default. I also can not seem to get the depth value to limit the depth of the DatePicker.

[Iliana Dyankova]

Hello Bryan,

The code snippet you have sent looks OK, but I am not sure if I understand your question correctly. Could you provide more details about your issue?

 

Kind regards,
Iliana Nikolova
the Telerik team

[Bryan]

The issue that I am having is that the DatePicker while initialized with a depth and start of "decade" does not seem to work. The start view depth is still at the "month" level. Along with this the depth limit the DatePicker still allows the user to still go to the century depth view. The chrome javascript console and the attached debugger both indicate there are no javascript exceptions.

[Iliana Dyankova]

Hi Bryan,

I am not sure where the problem in your application comes from, because I tested your scenario and everything works as expected. Could you please send us a simple test project which reproduces the depicted issue? This way I will be able to observe the problem and advice you further. Also, here is the screencast from my test. 

Greetings,
Iliana Nikolova
the Telerik team

[Bryan]

I have attached a sample project.

[Iliana Dyankova]

Hi Bryan,

Thank you for sending your project. It seems that you found a bug in the current version of Kendo UI. I informed our our developer team for the problem and the fix will be available with our next internal build. As a sign of gratitude I updated your points.

 

Regards,
Iliana Nikolova
the Telerik team

[James]

I know this is an old post, but was this defect ever fixed?  I have an MVC datepicker which is initialized like this...

 

     @(Html.Kendo().DatePicker()
                           .Name("DateOfBirth")
                           .Start(CalendarView.Decade)
                           .Depth(CalendarView.Month)
                           .Value(""))

 

The calendar still starts at the default Month view.  Since this is a Date of Birth field, it makes more sense for the user to pick the Year, then the Month, then the Day.  If there's a way I can accomplish this, please let me know.  I can open a new thread if needed, but decided to post on this one because it tops google searches already so it would be useful to have the answer right here, and the last answer was just "It's a defect, we're working on it".

 

[Georgi Krustev]

Hello James,

The widget works as expected when Depth and Start are defined:

• http://dojo.telerik.com/uxave

(the demo uses code similar to one generated by the wrapper). Could you let me know what I am missing?

Regards,
Georgi Krustev
Telerik

 

 

[James]

Here's the exact markup in the cshtml file for this Date of Birth form field.  This is within a form within a Bootstrap modal.

<div class="form-group">
                        <label class="col-sm-4 control-label"
                               for="modal-student-dob">Date of Birth</label>
                        <div class="col-sm-8">
                           @(Html.Kendo().DatePicker()
                           .Name("DateOfBirth")
                           .Depth(CalendarView.Month)
                           .Start(CalendarView.Decade)
                           .HtmlAttributes(new { @id = "modal-student-dob", @style = "width: 80%", placeholder = "mm/dd/yyyy",  onchange = "centerPortal.viewCustomer.setAddEditStudentDirty()"  })
                        )
                        </div>
                    </div>

 

Here is the final markup that is emitted.  Testing in Chrome, this doesn't work as expected.  It starts on the Month view instead of the Decade view after clicking the datepicker icon...

<div class="form-group">
  <label class="col-sm-4 control-label" for="modal-student-dob">Date of Birth</label>
  <div class="col-sm-8">
    <span class="k-widget k-datepicker k-header k-input" style="width: 100%;">
 <span class="k-picker-wrap k-state-default">
   <input id="modal-student-dob" name="DateOfBirth" onchange="centerPortal.viewCustomer.setAddEditStudentDirty()" placeholder="mm/dd/yyyy" style="width: 100%;" type="text" data-role="datepicker" class="k-input" role="combobox" aria-expanded="false" aria-owns="modal-student-dob_dateview" aria-disabled="false" aria-readonly="false" aria-activedescendant="8033c885-fa5f-475a-8530-5484134bc0d4_cell_selected">
     <span unselectable="on" class="k-select" role="button" aria-controls="modal-student-dob_dateview">
       <span unselectable="on" class="k-icon k-i-calendar">select</span>
     </span>
   </span>
 </span>
<script>
jQuery(function(){jQuery("#modal-student-dob").kendoDatePicker({"format":"M/d/yyyy","min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0),"depth":"month","start":"decade"});});
    </script>
  </div>
</div>

 

 

What's odd though is that I edited your dojo example, and plugged in the final markup that I gave just above, and in dojo it works fine.  No idea why it isn't working in my project.  We are using a different version of Kendo, but it is Q4 2015, so it's not exactly super old.

 

I don't have a ton of time to spend on this right now, but you've answered the question that this isn't an outstanding defect, and clearly there's something wrong specific to my project.  So I'll troubleshoot further when I have time - thank you for your response.

 

 

[James]

P.S. my first inclination is to think this is somehow a bootstrap conflict, because that's the only other real difference between running this in dojo, and running it in my project.  Again, I can try to prove that one way or another when I have more time.

 

 

[Georgi Krustev]

Hello James,

Yes, I tested it too with the posted code snippet, but it seems that it works:

• http://dojo.telerik.com/uxave/4

I will be glad if someone post a repro demo here, which we can debug.

Regards,
Georgi Krustev
Telerik