How to validate start date is less than end date Datepicker Boostrap

Question

How to validate start date is less than end date Datepicker Boostrap

Navigation

#1 by (2 votes)
#2 by (1 votes)

3

Good I'm doing a reservation system (I'm new to this). The only problem I have so far is that it does not validate that the "end" date is greater than the start date. Can anybody help me? I know it's simple but I'm learning
HTML

<input type="text"  input" name="entrada" id="entrada" value=""> 
<input type="text"  input" name="salida" id="salida"value="">

DATEPICKER

 $(function () {    


$('#entrada').datepicker({

    format: "dd/mm/yyyy",
    language: 'es',
    startDate: '+5d',

     endDate: '+35d',

});
$('#salida').datepicker({

    format: "dd/mm/yyyy",
    language: "es",
    startDate: '+6d',
    endDate: '+36d',
});
});

jquery jquery-validate bootstrap datepicker

asked by MSL 14.03.2018 в 01:13

source

2 answers

1

can use the following code for the date ranges

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Datepicker - Select a Date Range</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    var dateFormat = "mm/dd/yy",
      from = $( "#from" )
        .datepicker({
          defaultDate: "+1w",
          changeMonth: true,
          numberOfMonths: 3
        })
        .on( "change", function() {
          to.datepicker( "option", "minDate", getDate( this ) );
        }),
      to = $( "#to" ).datepicker({
        defaultDate: "+1w",
        changeMonth: true,
        numberOfMonths: 3
      })
      .on( "change", function() {
        from.datepicker( "option", "maxDate", getDate( this ) );
      });

    function getDate( element ) {
      var date;
      try {
        date = $.datepicker.parseDate( dateFormat, element.value );
      } catch( error ) {
        date = null;
      }

      return date;
    }
  } );
  </script>
</head>
<body>

<label for="from">From</label>
<input type="text" id="from" name="from">
<label for="to">to</label>
<input type="text" id="to" name="to">


</body>
</html>

for more information see the following link link

You can also use this library link

answered by 14.03.2018 в 02:14

WiFi scans are not received when running startScan () on Android 8 with targetSdkVersion 26+ SqlBulkCopy: Error inserting a DateTime

score 2 · Accepted Answer

bootstrap datepicker allows you to configure the inputs in such a way that you can avoid validations of this type, which is often much better for user experience

As an option, you could set this configuration

var getDate = function (input) {
    return new Date(input.date.valueOf());
}

$('#entrada, #salida').datepicker({
    format: "dd/mm/yyyy",
    language: 'es'
});

$('#entrada').datepicker({
    startDate: '+5d',
    endDate: '+35d',
}).on('changeDate',
    function (selected) {
        $('#salida').datepicker('setStartDate', getDate(selected));
    });

$('#salida').datepicker({
    startDate: '+6d',
    endDate: '+36d',
}).on('changeDate',
    function (selected) {
        $('#entrada').datepicker('setEndDate', getDate(selected));
    });

As you can see, you use the event changeDate for each input, so that the user can not exceed the dates of entry and exit when making the selection

in this link you can see how it works for your example

Edit

To be able to select a start date after the end date, update the code to the following. here is the documentation so you can use the methods of the complement

var getDate = function (input) {
    return new Date(input.date.valueOf());
}

$('#entrada, #salida').datepicker({
    format: "dd/mm/yyyy",
    language: 'es'
});

$('#salida').datepicker({
    startDate: '+6d',
    endDate: '+36d',
});

$('#entrada').datepicker({
    startDate: '+5d',
    endDate: '+35d',
}).on('changeDate',
    function (selected) {
        $('#salida').datepicker('clearDates');
        $('#salida').datepicker('setStartDate', getDate(selected));
    });

in this link you can see how it works updated for your example