DatePicker

2 posts, 0 answers
  1. Sailaja
    Sailaja avatar
    2 posts
    Member since:
    May 2014

    Posted 27 May 2014 Link to this post

    Hi,
    I am using Kendo MVC DatePicker. I am trying to disable all the dates except few for the user to select. It is working fine on initial view. When I change the month the dates are getting enabled. I not able to catch the change event for month.(when month is changed).Below is the code. Can you please let me know if you have questions.


    <div id="email-settings">
        <div style="margin-top: 59px; margin-left: 180px">
            @(Html.Kendo().DatePicker()
                    .Name("calendar")
                    .Value(DateTime.Today)
                    .Footer(" ")
                    .Min(DateTime.Today)
                     .Depth(CalendarView.Month)

                    .Events(e =>
                    {
                        e.Open("Checkthis");
                        e.Change("Calender_change");
                        e.Close("Checkthis");

                    })
                      .MonthTemplate("# if ($.inArray(+data.date, events) != -1) { #" +
                                                    "#= data.value #" +
                                  "# } else { #" +
                                               "<div class='disabled'>#= data.value #</div>" +

                                    "# } #")        
                    
     
                )
        </div>
    </div>
    <script>

       
        var today = new Date(),
            events = [
                +new Date(today.getFullYear(), today.getMonth(), 29),
               +new Date(today.getFullYear(), today.getMonth(), 28)
            ];


        function Checkthis(e) {

            $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
            $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
        }
        function Calender_change(e) {
         
            $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
            $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
        }
       
    </script>
  2. Sailaja
    Sailaja avatar
    2 posts
    Member since:
    May 2014

    Posted 28 May 2014 in reply to Sailaja Link to this post

    Just in case if anyone needs found the answer ...needed to bind the navigate.

    <div id="email-settings">
        <div style="margin-top: 59px; margin-left: 180px" >
            @(Html.Kendo().DatePicker()
                    .Name("calendar")
                     .Footer(" ")
                    .Min(DateTime.Today)
                    .Depth(CalendarView.Year)
                   .Events(e =>
                    {
                        e.Open("Checkthis");
                        e.Change("Calender_change");
                        e.Close("Checkthis");

                    })
                      .MonthTemplate("# if ($.inArray(+data.date, events) != -1) { #" +
                                                    "#= data.value #" +
                                  "# } else { #" +
                                               "<div class='disabled'>#= data.value #</div>" +

                                    "# } #")        
                    
     
                )
        </div>
    <div>  <button id="open" class="k-button">Open</button> or <button id="close" class="k-button">Close</button> the calendar</div>
              
            
    </div>


    <script>
        $(document).ready(function () {
            $("#calendar").closest(".k-widget")
                            .attr("id", "datepicker_wrapper");

            var datepicker = $("#calendar").data("kendoDatePicker");

            var setValue = function () {
                datepicker.value($("#value").val());
            };

            $("#enable").click(function () {
                datepicker.enable();
            });

            $("#disable").click(function () {
                datepicker.enable(false);
            });

            $("#readonly").click(function () {
                datepicker.readonly();
            });

            $("#open").click(function () {
                datepicker.open();
            });

            $("#close").click(function () {
                datepicker.close();
            });

            $("#value").kendoDatePicker({
                change: setValue
            });

            $("#set").click(setValue);

            $("#get").click(function () {
                alert(datepicker.value());
            });
        });
    </script>



    <script>
        var isCalendarInitialized = false;

        var today = new Date(),
            events = [
                +new Date(today.getFullYear(), today.getMonth(), 29),
               +new Date(today.getFullYear(), today.getMonth(), 28)
            ];

    function  highlightDates(){
     $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
     $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
    }
        function Checkthis(e) {
        
              
             
              if(!isCalendarInitialized) {
                $("[data-role=calendar]").data("kendoCalendar").bind("navigate", highlightDates);
                isCalendarInitialized = true; 
              }
             $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
            $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
           }



          
        
        function Calender_change(e) {
         
            $(".disabled").parent().removeClass("k-link") //removing this class makes the day unselectable
            $(".disabled").parent().removeAttr("href") //this removes the hyperlink styling
        }
       
    </script>

    <style>
        .disabled{ 
          /* adding some CSS to match the normal days styling */
          display: block;
          overflow: hidden;
          min-height: 15px;
          line-height: 15px;
          padding: 0;
          cursor:default;
          opacity: 0.5;
        }
        </style>
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top