0

I'm using Materializecss. Now I'm creating a hotel reservation system. What I want is, when I select a date on my DateIn Datepicker, the DateOut Datepicker min date should be 1 day ahead of the date selected. At first selection it is working. But when I try to select a date of check in higher than the selected date out, the min date for dateout picker wont change.

  $('#dp_ci').pickadate(
      {
          selectMonths: true, // Creates a dropdown to control month
          min : new Date(),
          clear: 'Clear',
          close: 'Ok',
          closeOnSelect: false // Close upon selecting a date,       
        });

      $('#dp_ci').change(function(){
        selected_ci_date ="";
        selected_ci_date = $('#dp_ci').val();
        if (selected_ci_date != null)
        {
          var cidate = new Date(selected_ci_date);
          alert(cidate);
          $("#dp_co").val("");
          $("#dp_co").removeAttr("disabled");
          min_codate = "";
          min_codate = new Date();
          min_codate.setDate(cidate.getDate()+1);

          $('#dp_co').pickadate(
          {
            min : min_codate,
          selectMonths: true, // Creates a dropdown to control month
          clear: 'Clear',
          close: 'Ok',
          closeOnSelect: false // Close upon selecting a date,
        });

          $('#dp_co').change(function(){
            if ($('#dp_co').val() != null)
            {
              var ci = new Date($('#dp_ci').val());
              var co = new Date($('#dp_co').val());
              var noOfdays = co.getDate() - ci.getDate() ;
              alert(noOfdays);
            }
          });

        }
      })

EDIT: Example: 1st Select: dp_ci: September 27, 2017 (selected) dp_co(min): September 28, 2017 (the dates behind are disabled) dp_co: September 28, 2017 (selected)

2nd Select:(I will select on dp_ci again) dp_ci: September 29, 2017 (selected) dp_co(min): September 28, 2017 (still which was supposed to be September 29)

UPDATE: I found an answer that was able to solve my problem. One only thing is the min date of the dp_co shouldn't allow same date with dp_ci: any solutions?

$('#dp_ci').pickadate(
  {
    selectMonths: true, // Creates a dropdown to control month
    today: 'Today',
    clear: 'Clear',
    close: 'Ok',
    min: new Date()
  });


var from_$input = $('#dp_ci').pickadate(),
    from_picker = from_$input.pickadate('picker')

var to_$input = $('#dp_co').pickadate(),
    to_picker = to_$input.pickadate('picker')


// Check if there’s a “from” or “to” date to start with.
if ( from_picker.get('value') ) 
{
  to_picker.set('min', from_picker.get('select'))

}
if ( to_picker.get('value') ) 
{
  from_picker.set('max', to_picker.get('select'))


}
// When something is selected, update the “from” and “to” limits.
from_picker.on('set', function(event) 
{

  if ( event.select ) 
  {
    to_picker.set('min', from_picker.get('select'))    
  }

  else if ( 'clear' in event ) 
  {
    to_picker.set('min', false)
  }

})

to_picker.on('set', function(event) 
{
  if ( event.select ) 
  {
    from_picker.set('max', to_picker.get('select'))
  }
  else if ( 'clear' in event ) 
  {
    from_picker.set('max', false)
  }
})

Got the code here:CodePen

Paul John Pulumbarit
  • 399
  • 1
  • 8
  • 25

2 Answers2

1

You need to save the picker object on both the start-picker and end-picker, and when the startpicker change - you only need to set the min value of the end picker:

var startdate = $('#dp_ci').pickadate('picker');
var enddate = $('#dp_co').pickadate('picker');

$('#dp_ci').change(function() {
  if (selected_ci_date != null)   {
    enddate.set('min', min_codate);
  }
})

Here is the complete example: 

$('#dp_ci').pickadate({
  selectMonths: true, // Creates a dropdown to control month
  min : new Date(),
  clear: 'Clear',
  close: 'Ok',
  closeOnSelect: false // Close upon selecting a date,       
})
var startdate = $('#dp_ci').pickadate('picker');
$('#dp_co').pickadate({
  min : new Date(),
  selectMonths: true, // Creates a dropdown to control month
  clear: 'Clear',
  close: 'Ok',
  closeOnSelect: false // Close upon selecting a date,
})
var enddate = $('#dp_co').pickadate('picker');

$('#dp_ci').change(function() {
  selected_ci_date ="";
  selected_ci_date = $('#dp_ci').val();
  if (selected_ci_date != null)   {
    var cidate = new Date(selected_ci_date);
    alert(cidate);
    $("#dp_co").val("");
    $("#dp_co").removeAttr("disabled");
    min_codate = "";
    min_codate = new Date();
    min_codate.setDate(cidate.getDate()+1);
    enddate.set('min', min_codate);
  }
})
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js"></script>

<div class = "row">
  <div class ="col s6">
    <label>Date of Check-in </label>
    <input type="text" class="datepicker" id="dp_ci">
  </div>

  <div class ="col s6">
    <label>Date of Check-out </label>
    <input disabled="true" type="text" class=" datepicker" id="dp_co">
  </div>
</div>
Dekel
  • 60,707
  • 10
  • 101
  • 129
  • Im sorry check this screenshot: https://photos.app.goo.gl/J20kScz0dgvUuEd62 – Paul John Pulumbarit Sep 13 '17 at 01:32
  • this was a better answer than mine – Malcolm Salvador Sep 13 '17 at 01:33
  • @Dekel , I updated my question. Please check it out. I know you could help me. – Paul John Pulumbarit Sep 13 '17 at 07:59
  • @PaulJohnPulumbarit can you explain the problem? It seems to do exactly what you want. If you select the start date (on the left picker) - the end date will be minimum of start-date + 1. – Dekel Sep 13 '17 at 08:56
  • @Dekel yeah it works on first selection, but when the user changes his mind then the user will select a new check in date, he can select a date higher than the check out date. (based on the video). i found a solution that disables the date on dp_ci that is higher than the check out date but the only problem with that code is the user can click same dates. like : dp_ci: september14 :: dp_co : september14 that's the only problem. – Paul John Pulumbarit Sep 14 '17 at 00:07
  • If the user set a new check-in date - it will **clear** the check-out date. And this is exactly what you need... – Dekel Sep 14 '17 at 00:09
0
$('#txt_performanceDayFlex1').daterangepicker({
     "locale": {
         "format": "MM/DD/YY"
     },
     singleDatePicker: true,
     minDate: new Date()
 }, function (start, end, label) {
     $scope.PerformanceStartDate = start.format('MM/DD/YY');        
     $scope.minimumDate = minimumFormatRequestDate( $scope.PerformanceStartDate);
     LodaDate();  //You need to reload the End Date then it Behave Properly and you can add one day head in $scope.minimumDate this in same format
     ResetDateAndtime(1);
     $scope.$apply();
 });

 function LodaDate() {
     $('#txt_performanceDayFlex2').daterangepicker({
         "locale": {
             "format": "MM/DD/YY"
         },
         singleDatePicker: true,
         minDate: $scope.minimumDate,
         endDate: new Date()
     }, function (start, end, label) {

         $scope.PerformanceEndDate = start.format('MM/DD/YY');           
         $scope.$apply();
     });
     function minimumFormatRequestDate(date) {
         if (date != undefined && date != null) {
             var newDate = date.split('.').reverse().join('/')
             var d = new Date(newDate),
                 month = '' + (d.getMonth() + 1),
                 day = '' + d.getDate(),
                 year = d.getFullYear();

             if (month.length < 2) month = '0' + month;
             if (day.length < 2) day = '0' + day;
             return [day, month, year].join('-');
         } else {
             return 'NA';
         }
     }
SHUBHAM KESARWANI
  • 131
  • 1
  • 4