How to specified a date's range javascript/jquery

Question

<html lang="es">

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Solicitud De Vacaciones</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
  <style>
    .bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso 
      form{
        font-family: Arial, Helvetica, sans-serif; color: black
      }
    .bootstrap-iso form button, .bootstrap-iso form button:hover{
      color: white !important;
    } 
    .asteriskField{
      color: red;
    }
  </style>
</head>

<body>              
  <div class="bootstrap-iso">
   <div class="container-fluid">
    <div class="row">
     <div class="col-md-6 col-sm-2 col-xs-12">
      <form action="MovimientoBancario" class="form-horizontal" method="post">

         <div class="form-group ">
          <label class="control-label col-sm-2 requiredField" for="date">
           Desde
           <span class="asteriskField">
            *
           </span>
          </label>
          <div class="col-sm-10">
           <div class="input-group">
            <div class="input-group-addon">
             <i class="fa fa-calendar">
             </i>
            </div>
            <input class="form-control" id="date" name="from" placeholder="YYYY/MM/DD" type="text" required/>
           </div>
          </div>
         </div>
         <div class="form-group ">
          <label class="control-label col-sm-2 requiredField" for="date">
           Hasta
           <span class="asteriskField">
            *
           </span>
          </label>
          <div class="col-sm-10">
           <div class="input-group">
            <div class="input-group-addon">
             <i class="fa fa-calendar">
             </i>
            </div>
            <input class="form-control" id="date" name="to" placeholder="YYYY/MM/DD" type="text" required/>
           </div>
          </div>
         </div>  

         <div class="form-group">
          <div class="col-sm-10 col-sm-offset-2">
           <input name="_honey" style="display:none" type="text"/>
           <button class="btn btn-primary " name="submit" type="submit">
            Buscar
           </button>
          </div>
         </div>
      </form>
     </div>
    </div>
   </div>
  </div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

  <!-- Include Date Range Picker -->
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>

  <script>
    $(document).ready(function(){
            var date_input=$('input[id="date"]');
            var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
            date_input.datepicker({
                format: 'yyyy-mm-dd',
                container: container,
                todayHighlight: true,
                autoclose: true,
            })

    })
  </script>
</body>

Here's my code, I've searched all over stackoverflow but none of the solutions I find works for me, I need to do two things.

date two has to be bigger than date one
date one has to give you the option to start from the current date.

I've tried these Jquery datepicker restrict dates in second date field based on selected date in first date field https://jqueryui.com/datepicker/#min-max

Note that there are different datepicker plugins. You are using bootstrap datepicker. The links to other questions use jQueryUI datepicker. They each have different API's so solutions for one aren't applicable to the other — charlietfl
– charlietfl, Commented Apr 24, 2018 at 13:15

Selvarani · Accepted Answer · 2018-04-24 14:04:07Z

You can use startDate for restrict to start from current date.

Try below code I hope it will resolve your problem.

<html lang="es">

  <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Solicitud De Vacaciones</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
    <style>
      .bootstrap-iso .formden_header h2,
      .bootstrap-iso .formden_header p,
      .bootstrap-iso form {
        font-family: Arial, Helvetica, sans-serif;
        color: black
      }

      .bootstrap-iso form button,
      .bootstrap-iso form button:hover {
        color: white !important;
      }

      .asteriskField {
        color: red;
      }

    </style>
  </head>

  <body>
    <div class="bootstrap-iso">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6 col-sm-2 col-xs-12">
            <form action="MovimientoBancario" class="form-horizontal" method="post">

              <div class="form-group ">
                <label class="control-label col-sm-2 requiredField" for="date">
           Desde
           <span class="asteriskField">
            *
           </span>
          </label>
                <div class="col-sm-10">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i class="fa fa-calendar">
             </i>
                    </div>
                    <input class="form-control" class="from_date" id="dpd1" name="from" placeholder="YYYY/MM/DD" type="text" required/>
                  </div>
                </div>
              </div>
              <div class="form-group ">
                <label class="control-label col-sm-2 requiredField" for="date">
           Hasta
           <span class="asteriskField">
            *
           </span>
          </label>
                <div class="col-sm-10">
                  <div class="input-group">
                    <div class="input-group-addon">
                      <i class="fa fa-calendar">
             </i>
                    </div>
                    <input class="form-control" id="dpd2" name="to" placeholder="YYYY/MM/DD" type="text" required/>
                  </div>
                </div>
              </div>

              <div class="form-group">
                <div class="col-sm-10 col-sm-offset-2">
                  <input name="_honey" style="display:none" type="text" />
                  <button class="btn btn-primary " name="submit" type="submit">
            Buscar
           </button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <!-- Include Date Range Picker -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />

    <script>
      $(document).ready(function() {
        var date_input = $('input[id="date"]');
        var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
        var currDate = new Date();
        var date = new Date();
        date.setDate(date.getDate());
        $('#dpd1').datepicker({
          format: 'yyyy-mm-dd',
          startDate: date,
          container: container,
          todayHighlight: true,
          autoclose: true,
        })

        $('#dpd1').datepicker().on('changeDate', function() {
          $('#dpd2').val('')
        })


        $('#dpd2')
          .datepicker()
          .on('show', function(ev) {
            var toDate = $('#dpd1').datepicker("getDate");
            toDate.setDate(toDate.getDate() + 1);
            $('#dpd2').datepicker("setStartDate", toDate);
          })
          .on('changeDate', function(ev) {
            var date1 = $('#dpd1').datepicker("getDate").valueOf();
            var date11 = $('#dpd1').datepicker("getDate");
            date11.setDate(date11.getDate() + 1);
            var date2 = ev.date.valueOf();
            if (date2 <= date1) {
              alert("Second date bigger than first!");
              $('#dpd2').datepicker("setDate", date11);
            }

          });

      })

    </script>
  </body>

DEMO

Soham · Accepted Answer · 2018-04-24 14:19:41Z

I noticed you have used same id on both textboxes with different name attributes. It is good practice to use different ids for all controls.

Regardless of that, here's the change you need to make in your jquery

$(document).ready(function() {
  var date_input = $('input[name="from"]');
  var date1_input = $('input[name="to"]');
  var container =
    $(".bootstrap-iso form").length > 0
      ? $(".bootstrap-iso form").parent()
      : "body";
  date_input
    .datepicker({
      format: "yyyy-mm-dd",
      container: container,
      todayHighlight: true,
      autoclose: true,
      startDate: new Date()
    })
    .on("changeDate", function(e) {
      var desdeDate = e.date;
      desdeDate.setDate(desdeDate.getDate() + 1);
      date1_input.datepicker({
        format: "yyyy-mm-dd",
        autoclose: true
      });
      date1_input.datepicker("setStartDate", desdeDate);
      date1_input.focus();
    });
});

Note that I used name attributes to select the textboxes and changeDate event is to calculate the new start date value for the second textbox which is then initialized with setStartDate method of the datepicker plugin.

You can find many other options to tweak at their website.

Collectives™ on Stack Overflow

How to specified a date's range javascript/jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related