CODEWITHSUNDEEP
javascriptjquerydatepicker
L.T
L.T

Reputation: 45

Copying one datepicker value to another on select not working

I have following jquery script code on one of my views:

@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script>

$(document).ready(function() {
    getTotal();
    setDates();
});

$("#form1").on("input", function () {
    getTotal();
    CalculateDays();
    setDates();
});


function getTotal(){
var totalcart = 0;
    $('#form1 > table').each(function() {
        $(this).find("tr").each(function(){
            if(( $( this ).has( ".inputdays" ).length > 0) && ($(this).has("#shoppingcart").length > 0)){
               var total = $(this).find(".inputquantity").find("input").val() * $(this).find(".hotelprice").html() * $(this).find(".inputdays").find("input").val();
               $(this).find("#hoteltotal").text(total);
               console.log(total);
               totalcart += parseInt(total);
        }
            else if(($(this).has("#shoppingcart").length > 0)){
               var total = $(this).find(".inputquantity").find("input").val() * $(this).find(".price").html();
               $(this).find("#carttotal").text(total);
               totalcart += parseInt(total);
               console.log(total);
            }
            console.log("total: " + totalcart);
        });
    });
    $("#total").html(totalcart);
}

function CalculateDays() {
    $('#form1 > table').each(function () {
        $(this).find("tr").each(function () {
            var oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
            var firstDate = new Date($(this).find("#datetimepicker1").find("input").val());
            var secondDate = new Date($(this).find("#datetimepicker2").find("input").val());

            var diffDays = Math.round(Math.abs((firstDate.getTime() - secondDate.getTime()) / (oneDay)));

            if ((!isNaN(diffDays)) && (firstDate.getTime() < secondDate.getTime())) {

                $(this).find(".inputdays").find("input").val(diffDays)
                getTotal();
            }
            else {
                $(this).find(".inputdays").find("input").val("0");
            }
        });
    });
}
function setDates() {
    $("#datetimepicker1").datepicker({
        dateFormat: 'yy-mm-dd', beforeShowDay: NotBeforeToday,
        onSelect: function (dateStr) {
            $("#datetimepicker2").val(dateStr);
            $("#datetimepicker2").datepicker("option", { minDate: new Date(dateStr) })
        }
    });
    $('#datetimepicker2').datepicker({

    });
}

in my html these datepickers are declared like this:

 <td id="shoppingcart">
     <div id='datetimepicker1'>
     <input type='date' class="form-control" />
     </div>
 </td>
 <td id="shoppingcart">
    <div id='datetimepicker2'>
        <input type='date' class="form-control" />
    </div>
 </td>

I just want to copy the currently selected value in datetimepicker1 to datetimepicker 2, later I want to disable dates that come before the selected date. This code doesn't seem to work however. What is the problem here?

As seen on this picture, when selecting a date in datetimepicker1, the value in datetimepicker2 (checkout field) isn't set to the selected value:

Datepicker

I'm am trying to copy the value of datetimepicker1 to datetimepicker2 in the function setDates(). I have tried multiple methods who all did not work. Could this be because I need to declare it in my other functional functions?

Upvotes: 1

Views: 2311

Answers (2)

jeffery_the_wind
jeffery_the_wind

Reputation: 18218

The issue is that you are setting the value of the element with ID of datetimepicker2, but that is just a div element. On further review it seems your datetimepicker1 would also suffer from the same problem. The IDs you use with the datepicker function from jQuery should be input elements, as far as I know.

There were a few possible places for errors in your code, that is why presenting an example with the code that you can't get to work is a good way to debug. I have created a working example here: https://jsfiddle.net/ve0b6fkt/

Also notice to set the value of the jQuery datepicker you need to use the setDate method: http://api.jqueryui.com/datepicker/#method-setDate

HTML:

<table>
  <tr>
    <td>
      <div>
        <input id='datetimepicker1' class="form-control" />
      </div>
    </td>
    <td>
      <div>
        <input id='datetimepicker2' class="form-control" />
      </div>
    </td>
  </tr>
</table>

JS:

jQuery(function($) {
  $("#datetimepicker1").datepicker({
    dateFormat: 'yy-mm-dd',
    onSelect: function(dateStr) {
      $("#datetimepicker2").datepicker('setDate', dateStr);
      $("#datetimepicker2").datepicker("option", {
        minDate: new Date(dateStr)
      })
    }
  });
  $('#datetimepicker2').datepicker({dateFormat: 'yy-mm-dd'});
});

jQuery's rock-solid documentation: https://jqueryui.com/datepicker/

Upvotes: 1

Bojidar Lyutskanov
Bojidar Lyutskanov

Reputation: 153

You should use

onSelect: function () {
        $('#datepicker2').val(this.value);
    }

as an onSelect function for your first datepicker. Here is a working demo: http://jsfiddle.net/j08691/xyp7khfe/

Having in mind my comment, here is the html code that you should use:

<td>
     <div>
     <input id='datetimepicker1' type='date' class="form-control" />
     </div>
 </td>
 <td>
    <div>
        <input id='datetimepicker2' type='date' class="form-control" />
    </div>
 </td>

Upvotes: 1

Related Questions