在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中計算日期差異

回答

相關問題