CODEWITHSUNDEEP
javascriptjquerycssdatezurb-foundation
sathish kumar
sathish kumar

Reputation: 936

fix Selected startDate should be the next end Date

I am using foundation datepicker for two dates startDate and endDate.

1) On clicking of datepicker calendar, defaultly it is showing the today's date.

2) If I on change any date from startDate, for example If I select "10-10-2016". without changing any date from endDate, if I open enddate calendar, it should start as "10-10-2016" only. But it is starting as an today's date.

3) My recuriment is, the selected startDate is the next end date in a calendar not in textfield. Please look at the images.

Please look at this fiddle,

jsfiddle

Please see the first image.

enter image description here

I am selecting "14.07.2016" from startDate.

enter image description here

On Clicking of endDate, it has starting with today's Date. But it is disabled. It is correct. I want to start with "14.07.2016" only. Blue color active date should show on selected startDate.

enter image description here

See the last image. Upto "14.07.2016" all dates are disbled. But it is not starting with that date. Please help me how can I do this.

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

var checkin = jQuery('#startDate').fdatepicker({
  format: "dd.mm.yyyy",
  onRender: function(date) {
    return date.valueOf() < now.valueOf() ? 'disabled' : '';
  }
}).data('datepicker');

var checkout = jQuery('#endDate').fdatepicker({
  format: "dd.mm.yyyy",
  onRender: function(date) {
    return date.valueOf() < checkin.date.valueOf() ? 'disabled' : '';
  }
}).on('changeDate', function(ev) {
  checkout.hide();
}).data('datepicker');

<input type="text" id="startDate" name="start_datum" class="input_text date" value="">

<input type="text" id="endDate" name="end_datum" class="input_text" value="">

Upvotes: 2

Views: 794

Answers (1)

BenG
BenG

Reputation: 15154

You need to add a change event to start date, to update the end date.

try this:-

var checkin = jQuery('#startDate').fdatepicker({
  format: "dd.mm.yyyy",
  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());
    checkout.update(newDate);
    $('#endDate')[0].focus();
  }
}).data('datepicker');

FIDDLE

Upvotes: 1

Related Questions