Question

问题是;我的应用程序中有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中，因为这需要在选择date（'onSelect'事件）后触发。如果错误请更正。

Answer 1

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

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

因此，对于这个答案，我只是要解决代码中的错误：

使用simpleDatePicker jQuery方法初始化插件 - 您忘记将'P'大写;
插件本身适合点击事件。您应该直接初始化它而无需等待用户输入;
源代码中没有onSelect初始化选项：我选择在输入上使用change事件侦听器来捕获它;
您使用jQuery方法value - 这是原生DOM Javascript - 您应该使用val代替;
toString不适用于DOM元素或jQuery对象 - 再次使用val方法;
本机Date对象无法以任意格式解析日期 - 如果它的代码也会生成若干天（它只会产生毫秒级的差异）。对于这种功能，您应该使用一个好的日期库：我选择了Moment。

结果代码（as demonstrated here）：

$('#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(dateString,'MMM DD YYYY').diff()

我们不希望将此作为日期，而是作为持续时间，因此我们会将其传递给时刻的duration方法：

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

......最后，我们希望在几天内表达出来：

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

Answer 2

我不确定但是这个：

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

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

Answer 3

以下是在第二个字段中设置相同日期的解决方案。链接：jquery: using two datepicker with two fields ( field 1 , field2 + 1 day ) like booking.com 根据需要更改格式。

计算jQuery中的日期差异

3 个答案: