0

问题是; 我的应用程序中有 2 个字段，一个是日期 (Field1)，第二个是标签 (Field2)。因此，我希望当用户在字段 1 中选择日期时，应自动填充字段 2（当前日期 - 字段 1 中的日期）。任何人都可以帮助如何实施它。

我正在使用 jQuery 来显示日期：

// This displays the date dialog when user clicks on Field1
$('#Field1').click(function () {
    $('#Field1').simpleDatepicker();
});

// Tried following code but it didn't worked
$('#Field1').click(function () {
    $('#Field1').simpleDatepicker({
        onSelect: function () {
       $('#Field2').value(calculateDays($('#Field1').toString))
        }
    });
});

function calculateDays(dateString) {
    var today = new Date();
    var inputDate = new Date(dateString);
    var days = today - inputDate;
    return days;
};

对于某些人来说，这可能看起来像可悲的代码，但我只是一个初学者，所以欢迎任何建议/评论。

另外请告诉我这是否可以仅使用 html 而无需使用 jQuery 来完成。据我了解，计算天数（日期之间的差异）代码将进入 jQuery，因为这需要在选择日期（'onSelect' 事件）后触发。如有错误请指正。

4

3 回答 3

1

我假设您正在尝试使用Karl Seguin 的 jquery.simpleDatePicker（在 Google 上搜索“simpledatepicker”时它名列前茅）。

正如 Jimbo 在评论中所说，在这里很难就 MVC 方法提出建议——你说你想纯粹用 HTML 来做这件事，但 HTML 本身不能决定行为（我会说那是非常不符合 MVC 的）。HTML5 表单确实允许一些有限的行为控制（验证等），并且它们也提供<input type="date"/>，但这些都不能帮助您解决问题。

因此，对于这个答案，我将修复代码中的错误：

  1. 插件是用 jQuery 方法初始化的simpleDatePicker——你忘了大写“P”；
  2. 插件本身迎合点击事件。您应该直接初始化它而不等待用户输入；
  3. 源代码中没有onSelect初始化选项：我选择change在输入上使用事件侦听器来捕获它；
  4. 你使用 jQuery 方法value——这是原生 DOM Javascript——你应该使用它val；
  5. toString不适用于 DOM 元素或 jQuery 对象——再次使用该val方法；
  6. 本机 Date 对象无法解析任意格式的日期——如果这样做，您的代码也不会产生天数（它只会产生以毫秒为单位的差异）。对于这种功能，您应该使用一个好的日期库：我选择了Moment。

结果代码（如此处所示）：

$('#Field1')
    .simpleDatePicker()
    .on('change', function passValue(){
        $('#Field2').val(calculateDaysFromNow($('#Field1').val()))
    });

function calculateDaysFromNow(dateString){
    return moment.duration(moment(dateString,'MMM DD YYYY').diff()).days();
}

关于我如何使用时刻的一些详细说明：

首先，我们要解析#Field1一个实际可量化的日期对象的格式化日期：

moment(dateString,'MMM DD YYYY')

接下来，我们diff要从现在开始确定这一点。像 Date 一样，如果我们不传递任何参数，那么 moment 现在假设：

moment(dateString,'MMM DD YYYY').diff()

我们不希望这是一个日期，而是一个持续时间，所以我们将它传递给 moment 的duration方法：

moment.duration(moment(dateString,'MMM DD YYYY').diff())

……最后，我们希望以天为单位表示：

moment.duration(moment(dateString,'MMM DD YYYY').diff()).days()
于 2013-03-06T14:43:28.553 回答
0

我不确定，但这个：

$('#Field2').value(calculateDays($('#Field1').toString))应该是这样的：

$('#Field2').value(calculateDays($('#Field1').val()))或者 $('#Field2').value(calculateDays($('#Field1').text()))

于 2013-03-06T14:01:59.820 回答
0

这是在第二个字段中设置相同日期的解决方案。链接：jquery：使用两个带有两个字段（字段 1 ，字段 2 + 1 天）的日期选择器，如 booking.com 根据您的需要更改格式。

于 2013-03-06T14:08:39.223 回答