Как указать диапазон дат javascript / jquery - PullRequest
Новая
       3

Как указать диапазон дат javascript / jquery

0 голосов
/ 24 апреля 2018 
<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>

Вот мой код, я искал по всему стеку, но ни одно из найденных мной решений не работает, мне нужно сделать две вещи.

  1. дата два должна быть больше даты
  2. дата, которую нужно дать вам, чтобы начать с текущей даты.

Я пробовал это Jquery datepicker ограничивает даты во втором поле даты на основе выбранной даты в первом поле даты https://jqueryui.com/datepicker/#min-max

Ответы [ 2 ]

0 голосов
/ 24 апреля 2018

Я заметил, что вы использовали одинаковые id в обоих текстовых полях с разными атрибутами name. Рекомендуется использовать разные идентификаторы для всех элементов управления.

Независимо от этого, вот изменения, которые нужно внести в свой 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();
    });
});

Обратите внимание, что я использовал атрибуты имени для выбора текстовых полей, а событие changeDate рассчитывает новое значение даты начала для второго текстового поля, которое затем инициализируется с помощью метода setStartDate плагина datepicker.

Вы можете найти множество других вариантов настройки на их веб-сайте .

0 голосов
/ 24 апреля 2018

Вы можете использовать startDate для ограничения, чтобы начать с текущей даты.

Попробуйте приведенный ниже код, надеюсь, он решит вашу проблему. 

<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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...