JQuery UI DatePicker 使用 2 个日期字段尝试获取日期差异 [英] JQuery UI DatePicker using 2 date fields trying to get date difference

查看：22
本文介绍了JQuery UI DatePicker 使用 2 个日期字段尝试获取日期差异的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 2 个 JQuery 日期字段

  1. 到达
  2. 出发

到达日期不能是今天的日期 - 我在 javascript 中使用 minDate: 1 进行了排序

出发日期必须始终比到达日期早 2 天.我认为 minDate: 3 会起作用，但那是查询今天的日期.如果用户在到达字段中选择明天的日期，则它工作正常，但如果用户选择未来的到达日期，则它会中断.我需要出发日期来参考到达日期并将其提前 2 天作为用户可以选择的最短日期，基本上在预订这家酒店时，用户不能住一晚，需要 2 晚分钟.

最后，我还需要将抵达日期和离开日期之间的夜数计算到第三个文本字段中.因此，当输入出发日期时，它会自动在第三个文本字段中输入入住天数.我还需要它反向工作，如果用户决定加入晚数，我需要相应地更改出发日期.

解决方案

我确信这个例子并不完美，但这里有一个可以满足您大部分需求的工作演示，仅使用 jQuery 和 jQuery UI日期选择器:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><头><meta http-equiv="Content-type" content="text/html; charset=UTF-8"/><title>日期选择器&amp;区别<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" media="screen"/><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script><script type="text/javascript">var DatePicked = function() {var 离开 = $("#departure");var 到达 = $("#arrival");var nights = $("#nights");var triggeringElement = $(this);var 离开日期 = 离开.datepicker("getDate");var minArrivalDate = new Date();如果(出发日期！= null){minArrivalDate.setDate(departureDate.getDate() + 2);} 别的 {minArrivalDate.setDate(minArrivalDate.getDate() + 1);}到达日期选择器('选项'，'minDate'，minArrivalDate)；var 到达日期 = 到达.datepicker("getDate");if (departureDate != null &&arrivalDate != null && triggeringElement.attr("id") != "nights") {var oneDay = 1000*60*60*24;var 差异 = Math.ceil((arrivalDate.getTime() -DepartmentDate.getTime())/oneDay);nights.val(差异)；} else if (departureDate != null && triggeringElement.attr("id") == "nights") {var nightsEntered = parseInt(nights.val());if (nightsEntered >= 2) {var newArrivalDate = new Date();newArrivalDate.setDate(departureDate.getDate() + nightsEntered);到达日期选择器(设置日期"，新到达日期)；} 别的 {alert("天数必须大于 2.");}}}$(函数(){$("#departure, #arrival").datepicker({onSelect: 选择日期});$("#nights").change(DatePicked);选择日期()；});<身体><div><label for="departure">Departure</label><input type="text" id="departure" name="departure"/>

<div><label for="arrival">Arrival</label><input type="text" id="arrival" name="arrival"/>

<div><label for="nights">Nights</label><input type="text" id="nights" name="nights"/>

尝试一下，看看您是否可以将类似的东西集成到您的应用/网站中.

I have 2 JQuery Date fields

  1. Arrival
  2. Departure

Arrival date must not be todays date - i got this sorted using minDate: 1 in the javascript

The Departure date must always be a minimum of 2 days ahead of arrival date. i thought minDate: 3 would work but thats querying off of todays date. it works fine if the user picks tomorrows date in the arrival field but if the user picks an arrival date in the future it breaks. I need the departure date to reference the arrival date and move it 2 days ahead as the minimum date the user can pick, essentially when booking this hotel the user can not stay for one night, 2 night min is required.

finally i also need to calculate the number of nights between the arrival date and departure date into a 3rd text field. so when the departure date is entered it automatically inputs number of nights in 3rd text field. I also need it to work in reverse, if a user decides to put in number of nights i need the departure date to change accordingly.

解决方案

I'm sure this example isn't perfect, but here's a working demo with most of what you require, using just jQuery and the jQuery UI Datepicker:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
    <title>Datepicker &amp; Difference</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" media="screen" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>
    <script type="text/javascript">
        var DatePicked = function() {
            var departure = $("#departure");
            var arrival = $("#arrival");
            var nights = $("#nights");

            var triggeringElement = $(this);

            var departureDate = departure.datepicker("getDate");

            var minArrivalDate = new Date();
            if (departureDate != null) {
                minArrivalDate.setDate(departureDate.getDate() + 2);
            } else {
                minArrivalDate.setDate(minArrivalDate.getDate() + 1);
            }
            arrival.datepicker('option', 'minDate', minArrivalDate);

            var arrivalDate = arrival.datepicker("getDate");

            if (departureDate != null && arrivalDate != null && triggeringElement.attr("id") != "nights") {
                var oneDay = 1000*60*60*24;
                var difference = Math.ceil((arrivalDate.getTime() - departureDate.getTime()) / oneDay);
                nights.val(difference);
            } else if (departureDate != null && triggeringElement.attr("id") == "nights") {
                var nightsEntered = parseInt(nights.val());
                if (nightsEntered >= 2) {
                    var newArrivalDate = new Date();
                    newArrivalDate.setDate(departureDate.getDate() + nightsEntered);
                    arrival.datepicker("setDate", newArrivalDate);
                } else {
                    alert("Nights must be greater than 2.");
                }
            }
        }
        $(function() {
            $("#departure, #arrival").datepicker({
                onSelect: DatePicked
            });
            $("#nights").change(DatePicked);
            DatePicked();
        });
    </script>
</head>
<body>
<div>
    <label for="departure">Departure</label>
    <input type="text" id="departure" name="departure" />
</div>
<div>
    <label for="arrival">Arrival</label>
    <input type="text" id="arrival" name="arrival" />
</div>
<div>
    <label for="nights">Nights</label>
    <input type="text" id="nights" name="nights" />
</div>
</body>
</html>

Play around with that and see if you can integrate something similar into your app/site.

这篇关于JQuery UI DatePicker 使用 2 个日期字段尝试获取日期差异的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆