Prevent the display of NaN in an input with jquery

Navigation
0

I have an onchange function that validates a difference in dates: 

        $('#fechaFinal').on('change',function(){
			    $('#ndias').val('');
			    var fechaInicio = new Date($('#fechaInicio').val());
	 		    var fechaFinal = new Date($('#fechaFinal').val());
	 		    var fechaResta = fechaFinal - fechaInicio;
	 		    $('#ndias').val(((((fechaResta / 1000) / 60) / 60) / 24).toFixed(0));

	});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
		<label for="">Fecha Inicio</label>
		<input type="text" class="form-control" id="fechaInicio" value="" placeholder="fechaInicio" name="fechaInicio" required="true">
	</div>
    <div class="col-md-6">
		<label for="">Fecha Final</label>
		<input type="text" class="form-control" id="fechaFinal" value="" placeholder="fechaFinal" name="fechaFinal" required="true">
	</div>
    //este es otro form-group
    <div class="col-md-6">
		<label for="">Dias Vacacionales</label>
	    <input type="text" class="form-control" id="ndias" value='' placeholder="Dias" name="dias" required="true" readonly="true">
	</div>

The detail is that despite being a function onchange input ndias appears as NaN when loading the page until the function is executed, there is no error in the process but it looks very ugly that NaN

    
asked by matteo 08.02.2017 в 19:35
source

3 answers

2

Try isNan () with a ternary so that it only shows you if it is not NaN 

$('#fechaFinal').on('change',function(){
    $('#ndias').val('');
    var fechaInicio = new Date($('#fechaInicio').val());
    var fechaFinal = new Date($('#fechaFinal').val());
    var fechaResta = fechaFinal - fechaInicio;
    var dias = ((((fechaResta / 1000) / 60) / 60) / 24;
    $('#ndias').val(!isNaN(dias) ? dias : '').toFixed(0));
});

On the other hand, try deleting the cache since you may be taking the $ (document) .ready () and not the updated js document, it usually happens to me.

    
answered by 09.02.2017 / 01:14
source
2

Try this: 

$('#fechaFinal').on('change',function(){
    $('#ndias').val('');
    var fechaInicio = $('#fechaInicio').val();
    var fechaFinal = $('#fechaFinal').val();
  
    date1 = new Date(fechaInicio.split('/')[2],fechaInicio.split('/')[1]-1,fechaInicio.split('/')[0]);
    date2 = new Date(fechaFinal.split('/')[2],fechaFinal.split('/')[1]-1,fechaFinal.split('/')[0]);
    var timeDiff = Math.abs(date2.getTime() - date1.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

  $('#ndias').val(diffDays)

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-6">
    <label for="">Fecha Inicio</label>
    <input type="text" class="form-control" id="fechaInicio" value="" placeholder="fechaInicio" name="fechaInicio" required="true">
</div>
<div class="col-md-6">
    <label for="">Fecha Final</label>
    <input type="text" class="form-control" id="fechaFinal" value="" placeholder="fechaFinal" name="fechaFinal" required="true">
</div>
//este es otro form-group
<div class="col-md-6">
    <label for="">Dias Vacacionales</label>
    <input type="text" class="form-control" id="ndias" value='' placeholder="Dias" name="dias" required="true" readonly="true">
</div>

You tell me,

    
answered by 08.02.2017 в 21:11
2

So you do not see the NaN value in the #ndias field, you should have a default value in that #ndias field. Set the value 0. You would not have that problem. 

<input type="text" class="form-control" id="ndias" value='0' placeholder="Dias" name="dias" required="true" readonly="true">

If that field should be empty (when loading your page) , you should validate that when loading the page if #ndias is NaN or empty, you should set a default value to the field.

    
answered by 08.02.2017 в 23:20
When do I have to use a while or a do while? [closed] Close a Java program at any time