Question

我想要2个文本框，我可以插入checkin＆amp;离开日期。签到日期应为当前或未来日期，结帐日期应大于选中的签入日期

Answer 1

使用JQuery的默认datepicker插件很简单。 jsfiddle中的代码包含2个用于签入的文本框，另一个用于签出。

$( "#checkin" ).datepicker({minDate : 0, dateFormat: 'dd-mm-yy'});

Hit Me !! For code..

Answer 2

试试这个

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
   <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script>
        $(document).ready(function () {
            $("#txtCheckin").datepicker({
                dateFormat: "dd-M-yy",
                onSelect: function (date) {
                    var date2 = $('#txtCheckin').datepicker('getDate');
                    date2.setDate(date2.getDate());
                    $('#txtCheckout').datepicker('setDate', date2);
                    //sets minDate to dateofbirth date + 1
                    $('#txtCheckout').datepicker('option', 'minDate', date2);
                }
            });
            $('#txtCheckout').datepicker({
                dateFormat: "dd-M-yy",
                onClose: function () {
                    var dt1 = $('#txtCheckin').datepicker('getDate');
                    console.log(dt1);
                    var dt2 = $('#txtCheckout').datepicker('getDate');
                    if (dt2 <= dt1) {
                        var minDate = $('#txtCheckout').datepicker('option', 'minDate');
                        $('#txtCheckout').datepicker('setDate', minDate);
                    }
                }
            });
        });

    </script>
</head>
<body>
  <input type="text" id="txtCheckin" />
  <input type="text" id="txtCheckout" />
</body>
</html>

Src：http://jsbin.com/seduseqici/edit?html,output

Answer 3

包括jquery＆amp; jquery ui并尝试这个。

HTML

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

在内部脚本标记中，试试这个。

<script>
        $(function () {

            var dateFormat = "mm/dd/yy",
      from = $("#from")
        .datepicker({
            defaultDate: "+1w",
            changeMonth: true,

        })
        .on("change", function () {
            to.datepicker("option", "minDate", getDate(this));
        }),
      to = $("#to").datepicker({
          defaultDate: "+1w",
          changeMonth: true,

      })
      .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>

我想使用jQuery签入和签出功能？

3 个答案: