0

質問は; 私のアプリケーションには 2 つのフィールドがあり、1 つは日付 (Field1)、もう 1 つはラベル (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に移動する必要がないかどうか教えてください。これは、日付を選択した後に起動する必要があるため（「onSelect」イベント）、計算日（日付間の差）コードがjQueryに含まれることを理解しています。間違っていたら訂正してください。

4

3 に答える 3

1

Karl Seguin の jquery.simpleDatePickerを使用しようとしていると思います(Google で「simpledatepicker」を検索するとトップに表示されます)。

Jimbo がコメントで述べているように、ここで MVC アプローチについてアドバイスするのは難しいです — あなたはこれを純粋に HTML で行いたいと言っていますが、HTML だけでは動作を指示することはできません (それは非常にun -MVC だと思います)。HTML5 フォームでは、いくつかの制限された動作制御 (検証など) が許可されており、<input type="date"/>.

したがって、この回答では、コードの間違いを修正します。

  1. プラグインはsimpleDatePickerjQuery メソッドで初期化されます — 「P」を大文字にするのを忘れました。
  2. プラグイン自体がクリック イベントに対応します。ユーザー入力を待たずに直接初期化する必要があります。
  3. onSelectソース コードには初期化オプションがありませんでしchangeた。これをキャプチャするために、入力でイベント リスナーを使用することにしました。
  4. jQuery メソッドを使用します— これはネイティブ DOM Javascript です —代わりvalueに使用する必要があります。val
  5. toStringDOM 要素や 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 は now を想定します。

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

2番目のフィールドに同じ日付を設定するための解決策は次のとおりです。リンク：jquery：booking.comのように2つのフィールド（フィールド1、フィールド2 + 1日）を持つ2つのdatepickerを使用 する必要に応じて形式を変更します。

于 2013-03-06T14:08:39.223 に答える
0

よくわかりませんが、これ：

$('#Field2').value(calculateDays($('#Field1').toString))次のようになります。

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

于 2013-03-06T14:01:59.820 に答える