如何使用日期选择器从第三个文本框中的文本字段中求出天数

how to sum how many days from text fields in the 3rd textbox using datepicker

本文关键字：文本 字段 三个 选择器 日期 何使用      更新时间：2023-09-26

我有以下代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Sum Of Total Days</title>
<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery-1.9.1.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function sum() {
datepickerln1 = $( "#datepickerln1" ).datepicker().value;
datepickerln2 = $( "#datepickerln2" ).datepicker().value;
document.getElementById('#total').value = parseFloat(datepickerln2) - parseFloat(datepickerln1) +1;
});
</script>
</head>
<body>
<p>Date 1: <input name="datepickerln1" id="datepickerln1" type="text" onblur="sum()"/></p>
<p>Date 2: <input name="datepickerln2" id="datepickerln2" type="text" onblur="sum()"/></p>
<input name="total" id ="total" type="text" readonly />
</body>
</html>

当我在Date1&日期2。

请帮助

感谢

首先让我指出代码中的错误，然后是JSFiddle。

（A） 以下是您在代码中犯的几个错误：

1） 首先将日期选择器初始化到元素。

$( "#datepickerln1" ).datepicker();
$( "#datepickerln2" ).datepicker();

2） 你不能得到像这样的值$( "#datepickerln1" ).datepicker().value;

初始化后，它应该像一样

$( "#datepickerln1" ).val();
$( "#datepickerln2" ).val();

3） document.getElementById('#total').value，这里不需要#。

就像

document.getElementById('total').value = 'your value';

或

$('#total').val('your value');

4） 您无法像这个一样轻松获得日期差异

parseFloat(datepickerln2) - parseFloat(datepickerln1) + 1 //WRONG

正确的方式是

Math.floor((datepickerln2.getTime() - datepickerln1.getTime()) / 86400000) //RIGHT WAY

（B） 您需要检查关于日期选择器中dateDifference的此线程

在这个线程的帮助下，我更新了你的代码

$(document).ready(function () {
    var selector = function (dateStr) {
        var d1 = $('#datepickerln1').datepicker('getDate');
        var d2 = $('#datepickerln2').datepicker('getDate');
        var diff = 0;
        if (d1 && d2) {
            diff = Math.floor((d2.getTime() - d1.getTime()) / 86400000); // ms per day
        }
        $('#total').val(diff);
    }
    $("#datepickerln1").datepicker();
    $('#datepickerln2').datepicker();
    $('#datepickerln1,#datepickerln2').change(selector)
});

检查此JSFiddle

是否提醒值并检查是否获得值？日期选择器尚未分配给jquery datepicker。先这样做：

$(function() {
  $( "#datepickerln1" ).datepicker();
  $( "#datepickerln2" ).datepicker();
});

并使用document.getElementById('total').value而不是document.getElementById('#total').value

相关文章：