DatePicker start & depth

11 posts, 0 answers
  1. Bryan
    Bryan avatar
    8 posts
    Member since:
    Oct 2012

    Posted 03 May 2012 Link to this post

    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.
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 07 May 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Bryan
    Bryan avatar
    8 posts
    Member since:
    Oct 2012

    Posted 07 May 2012 Link to this post

    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.
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 08 May 2012 Link to this post

    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!
  6. Bryan
    Bryan avatar
    8 posts
    Member since:
    Oct 2012

    Posted 08 May 2012 Link to this post

    I have attached a sample project.
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 09 May 2012 Link to this post

    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!
  8. James
    James avatar
    6 posts
    Member since:
    Aug 2012

    Posted 18 Feb in reply to Iliana Nikolova Link to this post

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

     

  9. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 24 Feb Link to this post

    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!
     
  10. James
    James avatar
    6 posts
    Member since:
    Aug 2012

    Posted 24 Feb in reply to Georgi Krustev Link to this post

    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.

     

     

  11. James
    James avatar
    6 posts
    Member since:
    Aug 2012

    Posted 24 Feb in reply to James Link to this post

    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.

     

     

  12. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 29 Feb Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready