在jQuery中计算日期差异

问题是;我的应用程序中有两个字段，一个是日期（Field1），另一个是标签（Field2）。所以，我希望当用户在字段1中选择一个日期时，字段2应该被自动填充（当前日期 - 来自字段1的日期）。任何人都可以帮助如何实现它。在jQuery中计算日期差异

我使用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'事件）后需要触发此代码。如果错误，请纠正。

来源

2013-03-06 user85

这是如何相关的模型 - 视图 - 控制器模式？这看起来像一个** jQuery **唯一的问题。 – Jimbo 2013-03-06 13:53:38

@Jimbo指出，在没有任何其他框架的情况下使用jQuery并不一定排除使用MVC风格的方法的可能性，因为有不同程度的人们可以将不同的关注点分开...... – Barney 2013-03-06 13:57:46

@Barney请注意，此问题与框架无关，你称之为“MVC风格的方法”，也没有任何设计模式。它*完全是一个jQuery问题*，并且已被正确重新标记。任何不相关的东西都可能会被删除（所以它应该是 - 我们在这里保持一切相关）。我还想指出OP标记为[tag：c＃]和[tag：asp.net]以及[tag：mvc]。 – Jimbo 2013-03-06 14:05:17

我不知道，但这：

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

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

来源

2013-03-06 14:01:59 user1934627

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

来源

2013-03-06 14:08:39 ammu

你只需要在这里做一些小的改动。 – ammu 2013-03-06 14:11:54

我假设你正在尝试使用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 erenti从现在开始吃了。如日期，时刻，现在假设，如果我们没有传递参数：

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

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

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

...最后，我们希望这表达了天：

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

来源

2013-03-06 14:43:28 Barney

不错的代码解释！ +1 – Jimbo 2013-03-07 16:09:30

在jQuery中计算日期差异

回答

相关问题