So deaktivieren Sie ausgewählte Tage?

Ich habe ein Reservierungsformular für Reservierungshotels, also möchte ich ausgewählte Tage deaktivieren, wie kann ich das tun? Ich meine, wenn ich 20 von ersten picker wählen so 20 in der zweiten pickerSo deaktivieren Sie ausgewählte Tage?

function datePicker() { 
 
    var dateFormat = "DD/MM/YY", 
 
    from = $("#checkin,.checkin").datepicker({ 
 
     //numberOfMonths: 2, 
 
     firstDay: 1, 
 
     minDate: 0, 
 
     ignoreReadonly: true, 
 
     showButtonPanel: true, 
 
     closeText: 'Temizle', 
 
     onClose: function(dateText, inst) { 
 
     if ($(window.event.srcElement).hasClass('ui-datepicker-close')) { 
 
      document.getElementById(this.id).value = ''; 
 
      //$('.checkin,#checkin,#checkout,.checkout').val(''); 
 
     } 
 
     }, 
 
     onSelect: function(selectedDate) { 
 
     window.setTimeout($.proxy(function() { 
 
      $(this).parents(".book-holiday").find("#checkout,.checkout").focus(); 
 
     }, this), 10); 
 

 
     var date2 = $('#checkin,.checkin').datepicker('getDate'); 
 
     date2.setDate(date2.getDate() + 1); 
 
     $('#checkout,.checkout').datepicker('setDate', date2); 
 
     //sets minDate to dt1 date + 1 
 
     $('#checkout,.checkout').datepicker('option', 'minDate', date2); 
 
     }, 
 
     isTo1: true, 
 
     beforeShow: function(input, inst) { 
 

 
     $(this).datepicker("widget").addClass("main-datepicker"); 
 
     // controlDatepicker(".checkin,#checkin"); 
 
     /*setTimeout(function() { 
 
      inst.dpDiv.css({ 
 
       top: $(".datepicker").offset().top + 35, 
 
       left: $(".datepicker").offset().left 
 
      }); 
 
     }, 0);*/ 
 
     } 
 
    }); 
 
    $("#checkout,.checkout").datepicker({ 
 
    firstDay: 1, 
 
    minDate: 0, 
 
    ignoreReadonly: true, 
 
    showButtonPanel: true, 
 
    closeText: 'Temizle', 
 
    onClose: function(dateText, inst) { 
 
     if ($(window.event.srcElement).hasClass('ui-datepicker-close')) { 
 
     document.getElementById(this.id).value = ''; 
 
     //$('.checkin,#checkin,#checkout,.checkout').val(''); 
 
     } 
 
     var dt1 = $('#checkin.checkin').datepicker('getDate'); 
 
     console.log(dt1); 
 
     var dt2 = $('#checkout,.checkout').datepicker('getDate'); 
 
     if (dt2 <= dt1) { 
 
     var minDate = $('#checkin,.checkin').datepicker('option', 'minDate'); 
 
     $('#checkin,.checkout').datepicker('setDate', minDate); 
 
     } 
 
    }, 
 
    ignoreReadonly: true, 
 
    isTo1: true, 
 
    onSelect: function() { 
 
     //$(this).parents(".book-holiday").find(".popover-wrapper").addClass("open"); 
 
    }, 
 
    beforeShow: function(input, inst) { 
 
     /* $(this).datepicker("widget").addClass("main-datepicker"); 
 
     controlDatepicker(".checkin,#checkin"); 
 
     setTimeout(function() { 
 
      inst.dpDiv.css({ 
 
       top: $(".datepicker").offset().top + 35, 
 
       left: $(".datepicker").offset().left 
 
      }); 
 
     }, 0);*/ 
 
    } 
 

 
    }); 
 

 
} 
 

 

 
datePicker();

<link href="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" /> From : <input type="text" class="checkin"> To: <input type="text" class="checkout"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Quelle

2017-07-19 ani_css

var specialDays = {'08/01/2012 ': 'gebucht', '08/02/2012': 'Anfrage'}; $ ('# date'). Datepicker ({vorShowDay: Funktion (Datum) { date = $ .datepicker.formatDatum ('mm/tt/jj', Datum); var special = specialDays [Datum] || ' '; return [special ==' ', special]; }}); – Dasma

Versuchen Sie so etwas wie dieses unselectable sein muss:

$("#dt1").datepicker({ 
      dateFormat: "dd-M-yy", 
      minDate: 0, 
      onSelect: function (date) { 
       var date2 = $('#dt1').datepicker('getDate'); 
       date2.setDate(date2.getDate() + 1); 
       $('#dt2').datepicker('setDate', date2); 
       //sets minDate to dt1 date + 1 
       $('#dt2').datepicker('option', 'minDate', date2); 
      } 
     }); 
     $('#dt2').datepicker({ 
      dateFormat: "dd-M-yy", 
      onClose: function() { 
       var dt1 = $('#dt1').datepicker('getDate'); 
       console.log(dt1); 
       var dt2 = $('#dt2').datepicker('getDate'); 
       if (dt2 <= dt1) { 
        var minDate = $('#dt2').datepicker('option', 'minDate'); 
        $('#dt2').datepicker('setDate', minDate); 
       } 
      } 
     });

Working Fiddle

Quelle

2017-07-19 08:56:03

Hallo, Ich habe versucht, Ihr Code ist Arbeit, aber ich denke, es ist ein kleiner Fehler. Wenn ich den ersten Tag wähle es automatisch zweiten Tag auswählen.Ich habe meinen Beitrag bearbeitet. –

Es ist kein Fehler, es ist die in der Geige implementierte Funktionalität und Sie können dies entfernen, indem Sie einige Zeilen kommentieren. Überprüfen Sie die aktualisierte Geige hier: http://jsfiddle.net/PPSh3/2768/ –

aber dann kann ich wieder vergangene Tage auswählen? Welchen Code soll ich entfernen? –

Vielleicht könnten Sie versuchen, Datum zu speichern und sie zu vergleichen, wenn Aktion ausgelöst wird? In diesem Fall werden Sie keine Aktion auslösen, wenn die Bedingung nicht erfüllt ist.

Oder Sie könnten etwas verwenden iike dass: Jquery UI datepicker. Disable array of Dates

Quelle

2017-07-19 08:58:06

Ich brauche nur ausgewählte Tage Ich denke, es gibt keine Grund, Arrays zu verwenden –

So deaktivieren Sie ausgewählte Tage?

Antwort

Verwandte Themen