2017-02-22 13 views
1

選択した2つの日付から日数を計算しようとしていますが、私のコードは機能していません。2日間の日数を計算します

$(document).ready(function(){ 
 
      calulateDays() 
 
    }); 
 

 
    function calulateDays(){ 
 
     $('#levTo').blur(function(){ 
 
var levfrom=$('#levFrom').val(); 
 
    levto=$('#levTo').val(); 
 
    from, to,duration; 
 

 
from = moment(levfrom, 'YYYY-MM-DD'); 
 
to = moment(levto,'YYYY-MM-DD'); 
 
duration=to.diff(from,'days')  
 
$('#levDuration').val(duration + ' days'); 
 

 
}); 
 
}
\t \t \t \t  
 
    <label>Date From</label> 
 
    <input type="date" name="levFrom" id="levFrom" class="levFrom"> 
 
\t \t \t \t  
 
    <label >Date To</label> 
 
    <input type="date" name="levTo" id="levTo" class="levTo"> 
 
\t \t \t 
 
    <label >Duration</label> 
 
    <input type="text" name="levDuration" id="levDuration" class="levDuration" readonly="readonly"> 
 
\t \t \t \t

+0

あなたが使用していると思われるmoment.js-libraryへの参照がありません。それをページに追加してください。 – Esko

+0

はい私はそのプラグイン 'https:// cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js' – user7397787

答えて

2

$(document).ready(function(){ 
 
      calulateDays() 
 
     
 
    }); 
 

 
    function calulateDays(){ 
 
     //$('#levTo').on('keyup mouseup change',function(){ 
 
     $('#levTo').on('change',function(){ 
 
     var levfrom=$('#levFrom').val(); 
 
     var levto=$('#levTo').val(); 
 
     var from,to,duration; 
 
    
 
     from=moment(levfrom, 'YYYY-MM-DD'); 
 
     to=moment(levto,'YYYY-MM-DD'); 
 
     duration=to.diff(from,'days'); 
 
     $('#levDuration').val(duration + ' days') 
 
    
 
    });};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js"></script> 
 
<label>Date From</label> 
 
    <input type="date" name="levFrom" id="levFrom" class="levFrom"> 
 
\t \t \t \t  
 
    <label >Date To</label> 
 
    <input type="date" name="levTo" id="levTo" class="levTo"> 
 
\t \t \t 
 
    <label >Duration</label> 
 
    <input type="text" name="levDuration" id="levDuration" class="levDuration" readonly="readonly">

2

あなたcalulateDays機能は}が不足しています。また、jsは大文字と小文字を区別します。したがって、levfromlevtoを使用する必要があります。アクセスする際には、小文字のftを使用する必要があります。

$(document).ready(function(){ 
     calulateDays() 
}); 

function calulateDays(){ 
    $('#levTo').on('keyup mouseup change',function(){ 
    var levfrom=$('#levFrom').val(); 
     levto=$('#levTo').val(); 
     from,to,duration; 

    from=moment(levFrom, 'YYYY-MM-DD'); // HERE: levfrom 
    to=moment(levTo,'YYYY-MM-DD');  // HERE: levto 
    duration=to.diff(from,'days')  
    $('#levDuration').val(duration + ' days') 

    }); 
} // <==== HERE 

また、あなたのJSコードを向上させることを検討:

$(document).ready(calulateDays); 

    function calulateDays() { 
    $('#levTo').on('keyup mouseup change', function() { 
     var levfrom = $('#levFrom').val(), 
     levto = $('#levTo').val(), 
     from, to, duration; 

     from = moment(levfrom, 'YYYY-MM-DD'); 
     to = moment(levto, 'YYYY-MM-DD'); 
     duration = to.diff(from, 'days') 
     $('#levDuration').val(duration + ' days') 
    }); 
    } 
1

function calulateDays(){ 
 
     var levfromArr=$('#levFrom').val().split('-'),    levtoArr=$('#levTo').val().split('-'); 
 
     var leavefromDay=levfromArr.pop(); 
 
     var levfromMonth=levfromArr.pop(); 
 
     var levfromYear=levfromArr.pop(); 
 
     
 
     var levtoDay=levtoArr.pop(); 
 
     var levtoMonth=levtoArr.pop(); 
 
     var levtoYear=levtoArr.pop(); 
 
     
 
     var oneDay = 24*60*60*1000; 
 
     var firstDate = new Date(levfromYear,levfromMonth,leavefromDay); 
 
     var secondDate = new Date(levtoYear,levtoMonth,levtoDay); 
 

 
     var diffDays = Math.round(Math.abs((firstDate.getTime() -   secondDate.getTime())/(oneDay))); 
 
      
 
     $('#levDuration').val(diffDays + ' days') 
 
    
 
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
 
<label>Date From</label> 
 
    <input type="date" name="levFrom" id="levFrom" class="levFrom"> 
 
\t \t \t \t  
 
    <label >Date To</label> 
 
    <input type="date" name="levTo" id="levTo" class="levTo"> 
 
\t \t \t 
 
    <button onclick="calulateDays()" >Duration</button> 
 
    <input type="text" name="levDuration" id="levDuration" class="levDuration" readonly="readonly">
0123この仲間を試してみてください

これを試してください。その作業スニペット

+0

を追加しました。これは' .blur() ''私のコードではワットが間違っていますか? ' – user7397787

+0

はい、有効なイベントのいずれかでこの機能を使用できます。私の関数はあなたの関数から独立しています。私はpure jQueryとJSのコードをmoment.jsのinstadeで使用しました。あなたのコードに初期化の問題があるかもしれません。 – RRajani

+0

あなたのコードに関する問題がlibreryをインポートしています。あなたがurコードで使用するmoment.jsやjqueryスクリプトをインポートできないかもしれません。 – RRajani

関連する問題