Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Date/Time Pickers > DatePicker - Prevent future date selection

• Tejas

  Posted on Apr 25, 2011 (permalink)

  I am using Telerik DatePicker. Is there a way I can display whole month, but prevent future date selection.
  e.g.: Current Month is April 2011. Calendar displays Full April 2011, however if today is Apr 25, user can only select Apr 25. Can't go beyond this date.
  
  I tried .Max(), but this will only display today's date max.
  

  Reply

• Georgi Krustev Georgi Krustev

  Posted on Apr 26, 2011 (permalink)

  Hello Tejas,

   
  You can try to achieve your goal with the following code snippet:
  

  function onChange(e){

     var endDate = new Date("10/10/2000");

     if(e.value > endDate){

         e.preventDefault();

     }

  }

  As you can notice you should wire OnChange event and in the event handler you should call preventDefault() if the selected date is bigger than the allowed one.
  
  

  Best regards,
  Georgi Krustev
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Tejas

  Posted on Apr 27, 2011 (permalink)

  Hi Georgi,
  
  

  function ReferredTo_OnChange(e) {
      var endDate = new Date();
      if (e.value > endDate) {
          e.preventDefault();
      }
  }

  
  Based on your sample if I try to select future date, calendar (textbox) shows: 12-31/1969 as default date.
  
  1) Is there a way to grayout future date? If Today is "04-27-2011" than user can't select any future date (as they are greyedout) on calendar.
  
  2) I have two date picker From and To. Is there a way I prevent date selection as follows:
      if "From Date" is 04-20-2011 then "To Date" can't be less than "From Date"?
  
  3) Is there a way we can prevent so that user can't type date in text box and has to use date picker?
      

  Reply

• Tejas

  Posted on Apr 29, 2011 (permalink)

  Any update on how to perform any of this?

  Reply

• Answer Georgi Krustev Georgi Krustev

  Posted on May 3, 2011 (permalink)

  Hello Tejas,

  Here is the correct way to stop selecting date bigger than "endDate":
  

  function onChangeDatePicker(e) {

      var endDate = new Date();

      if (e.value > endDate) {

          if (e.previousValue === null) {

              $(this).data("tDatePicker").value(null);

          }

          e.preventDefault();

      }

  }

  
  And about the other questions:
  
  #1: It will be hard to maintain "grayed" days through months navigation. Even you apply gray style to the days bigger than the "endDate" this style will be removed if the end user navigate to previous and then to the current month. One possible solution is to apply "t-other-month" class to the TD which contains date bigger than the "endDate". You can try to do this in the Load event handler. Just get calendar like so:
  

  var calendar = $(this).data("tDatePicker").dateView.$calendar;

  Then you just need to find required TDs and apply "t-other-month".
  
  #2: On "From Date" change event just set min date of the "To Date". Use min() method to apply MinValue of the "To Date" datepicker.
  
  #3: You can try to apply disabled="disabled" attribute to the HTML input element.
  
  

  Regards,
  Georgi Krustev
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Tejas

  Posted on May 3, 2011 (permalink)

  Thank you. This will surely help. We will take your advice make changes to the UI accrodingly.

  Reply

• Tejas

  Posted on May 4, 2011 (permalink)

  When I try to use 
  
  
  
  
  
  You can try to apply disabled="disabled" attribute to the HTML input element.
  
  
  I get javascript error in IE7.
  Can't move focus to the control because it is invisible, not enabled, or of a type that does not accept the focus!
  
  I have also attached screen shot. 
  How do we resolve this?
  
  

  Attached files

  • CalendarError.jpg

  Reply

• Georgi Krustev Georgi Krustev

  Posted on May 9, 2011 (permalink)

  Hello Tejas,

  In order to avoid the aforementioned behavior I will suggest you apply readonly attribute instead of disabled:
  

  $("#DatePicker").attr("readonly", true)

  Regards,
  Georgi Krustev
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Tejas

  Posted on May 9, 2011 (permalink)

  Hi Georgi,
  
  Do you think this will work:
  

  .InputHtmlAttributes(new { readonly = true })
  
  
  OR do I have to do this with javascript (what function should I use for javascript)? 

  Reply

• Answer Georgi Krustev Georgi Krustev

  Posted on May 12, 2011 (permalink)

  Hello Tejas,
  
  readonly is a modifier in C#. That is why you will need to use the suggested code like this:
  

  .InputHtmlAttributes(new { @readonly = true })

  
  Greetings,
  Georgi Krustev
  the Telerik team

  Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

  Reply

• Tejas

  Posted on May 13, 2011 (permalink)

  This helped. Thanks.

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Date/Time Pickers > DatePicker - Prevent future date selection