2016-04-27 2 views
0

Ich benutze den Foundation-Datepicker und ich habe es so der Benutzer kann nur ein Startdatum auswählen, das nach dem aktuellen Datum ist (dh alle anderen Werte können nicht ausgewählt werden).Foundation Datepicker, Enddatum (und Zeit) kann nicht vor Startdatum (und Zeit) sein

Ich möchte das Enddatum auf die gleiche Weise arbeiten, wo der Benutzer nur ein Datum nach dem Startdatum auswählen kann.

Ich habe die Daten (Tage) arbeiten, dh Benutzer nicht 1. Januar 2016 als Enddatum auswählen können, wenn das Startdatum 3. Januar ist 2016.

Mein erstes Problem ist, aufgrund der Tatsache, dass ich nicht das haben kann Startdatum ist das gleiche wie das Enddatum, und zweitens, weil ich auch die Zeit nutze, möchte ich, dass alle Selektionen nach Startdatum/-zeit für Enddatum/Zeit Popup deaktiviert werden.

, d. H. Der Benutzer kann den 1. Januar 2016, 13:00 als Start und 1 Januar, 14:00 als Ende auswählen.

Mein Code ist folgende:

// Get Date of today 
var newDate = new Date(); 
// Prase newDate 
var now = new Date(newDate.getFullYear(), newDate.getMonth(), newDate.getDate(), 0, 0, 0, 0); 
// Initialize datepicker with restricted date 
var startDate = $('.has-datepicker').fdatepicker({ 
    format: "dd/mm/yyyy - hh:ii", 
    pickTime: true, 
    onRender: function (date) { 
     return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
    } 
}).on('changeDate', function (e) { 
    if (e.date.valueOf() > endDate.date.valueOf()) { 
     var newDate = new Date(e.date); 
     newDate.setDate(newDate.getDate() + 1); 
     endDate.update(newDate); 
    } 
}).data('datepicker'); 

var endDate = $('.has-datepicker2').fdatepicker({ 
    format: "dd/mm/yyyy - hh:ii", 
    pickTime: true, 
    onRender: function (date) { 
     return date.valueOf() <= startDate.date.valueOf() ? 'disabled' : ''; 
    } 
}).on('changeDate', function(e) { 

}).data('datepicker'); 

Antwort

0
// implementation of disabled form fields 
var nowTemp = new Date(); 
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0); 
var checkin = $('#dpd1').fdatepicker({ 
    onRender: function (date) { 
     return date.valueOf() < now.valueOf() ? 'disabled' : ''; 
    } 
}).on('changeDate', function (ev) { 
    if (ev.date.valueOf() > checkout.date.valueOf()) { 
     var newDate = new Date(ev.date) 
     newDate.setDate(newDate.getDate() + 1); 
     checkout.update(newDate); 
    } 
    checkin.hide(); 
    $('#dpd2')[0].focus(); 
}).data('datepicker'); 
var checkout = $('#dpd2').fdatepicker({ 
    onRender: function (date) { 
     return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : ''; 
    } 
}).on('changeDate', function (ev) { 
    checkout.hide(); 
}).data('datepicker'); 

wie diese versuchen .. besser gehen über die Website und Dokumente vollständig

+0

Vielen Dank für Ihre Antwort. Ich habe das Beispiel gesehen, das Sie gepostet haben (http://foundation-datepicker.peterbeno.com/example.html#deps-example). Das gilt jedoch nur für Daten und ich möchte, dass es auf Datum und Uhrzeit angewendet wird. – Brendan

Verwandte Themen