CODEWITHSUNDEEP
javascriptjqueryjquery-uicalendar
William Octavia
William Octavia

Reputation: 135

Jquery calender 2 way block date

I am using jquery ui date selector My query is different from all other asked as i need 2 custom methods to block date

    <script>
        var unavailableDates = ["5-7-2011","6-7-2011","7-7-2011","15-7-2011","16-7-2011","17-7-2011" ];


function unavailable(date) {
  dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
  if ($.inArray(dmy, unavailableDates) == -1) {
    return [true, ""];
  } else {
    return [false,"","Unavailable"];
  }
}
$(function() {
    $( "#datepicker_1,#datepicker_2" ).datepicker({
        beforeShowDay: unavailable,
        changeMonth: true,
        changeYear: true
    });
});

i have customized my code to disable few date , which i took refernce for also, but also i want the other date selector to have date set according to first for eg for selector 2(which is max date) i select 4th july, than the selectot 1 should have date greater than today but less than4th july... if i select from selector1 (which is min date) 1st july it should disable all previous date ...

My problem is similar to jQuery datepicker- 2 inputs/textboxes and restricting range but a step ahead where i need to disable some date as above

Any help will hugely be appreciated as i am new bee in jquery

here is jsfiddle

Upvotes: 0

Views: 355

Answers (1)

June
June

Reputation: 823

$(function() {      $( "#datepicker_1,#datepicker_2" ).datepicker({
             beforeShow: customRange,           beforeShowDay: unavailable,             changeMonth: true,          changeYear: true        });     });         function customRange(input) {   if (input.id == 'datepicker_2') {
    return {
      minDate: jQuery('#datepicker_1').datepicker("getDate")
    };   } else if (input.id == 'datepicker_1') {
    return {
      maxDate: jQuery('#datepicker_2').datepicker("getDate")
    };   } }

Try this if it helps you

Upvotes: 1

Related Questions