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

DatePicker start & depth

10 Answers 446 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Bryan
Top achievements
Rank 1
Bryan asked on 03 May 2012, 08:05 PM
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.

10 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 07 May 2012, 04:38 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bryan
Top achievements
Rank 1
answered on 07 May 2012, 06:26 PM
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.
0
Iliana Dyankova
Telerik team
answered on 08 May 2012, 12:47 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Bryan
Top achievements
Rank 1
answered on 08 May 2012, 07:53 PM
I have attached a sample project.
0
Iliana Dyankova
Telerik team
answered on 09 May 2012, 04:34 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
James
Top achievements
Rank 1
answered on 18 Feb 2016, 09:16 PM

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".

 

0
Georgi Krustev
Telerik team
answered on 24 Feb 2016, 08:46 AM
Hello James,

The widget works as expected when Depth and Start are defined: (the demo uses code similar to one generated by the wrapper). Could you let me know what I am missing?

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
James
Top achievements
Rank 1
answered on 24 Feb 2016, 02:55 PM

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.

 

 

0
James
Top achievements
Rank 1
answered on 24 Feb 2016, 02:58 PM

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.

 

 

0
Georgi Krustev
Telerik team
answered on 29 Feb 2016, 12:37 PM
Hello James,

Yes, I tested it too with the posted code snippet, but it seems that it works: I will be glad if someone post a repro demo here, which we can debug.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Date/Time Pickers
Asked by
Bryan
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Bryan
Top achievements
Rank 1
James
Top achievements
Rank 1
Georgi Krustev
Telerik team
Share this question
or