locked
datepicker onchange event is not working RRS feed

  • Question

  • User-1355965324 posted

    I  am using js datepicker   to select the date while changing the date I am calling the function from javascript function. From the controller I am setting the current date to the datepicker text.   for example when  the page is opening the current date would be shown 28/01/2021.  When I  delete the digit from 21 from the  year 2021  using backspace and then type 20 , then the  onchange method  will work.  After that When I re-type 20 into 21 again , then on change will not be called. But If I delete all the digits from the year part 2020 into 2021, on change will be called. Also If I select the date from the calendar, then also the on change method will also be called.  it is very strange . if any one  can  give me a  help , it would be very appreciated here  is my code. If I change the date from calendar or if I remove all the year digits  and retype from 2020 into 2021 it will work. but if I change from 2020  after deleting the 0 digit and type 1 , the on change will not be called.

    model

    MeterReading
    
      public string Location { get; set; }
    
            public DateTime ReadingDate { get; set; }
            [NotMapped]
            public string ReadingtxtDate { get; set; }

    html

     <label for="lblDate" class="control-label col-sm-1 ">Reading Date</label>
                            <div class="col-sm-3">
                                <div class='input-group date' id='FromDatePicker'>
                                    <input type='text' id="ReadingDate1" asp-for="ReadingtxtDate" class="form-control " onchange="GetMeterReading()" />
                                    <span class="input-group-addon">
                                        <span class="glyphicon glyphicon-calendar"></span>
                                    </span>
                                </div>
                            </div>

    javscript

    <script>
    $(document).ready(function () {
            $("#FromDatePicker").datepicker({ format: 'dd/mm/yyyy', todayHighlight: true, autoclose: true, todayBtn: 'linked' });
    })
    function GetMeterReading() {
    console.log("Testing");
    }
    

    Thursday, January 28, 2021 11:22 PM

All replies

  • User475983607 posted

    I cannot reproduce your findings.  Maybe the issue is console.log("Testing"); does not create a new line?  Maybe the date picker you are using?  Maybe a problem elsewhere in your code?

    @model MvcDemo.Controllers.MeterReading
    @{
        ViewData["Title"] = "Index";
    }
    
    <h1>Index</h1>
    
    <label for="lblDate" class="control-label col-sm-1 ">Reading Date</label>
    <div class="col-sm-3">
        <div class='input-group date' id='FromDatePicker'>
            <input type='text' 
                   id="ReadingDate1" 
                   asp-for="ReadingtxtDate" 
                   class="form-control datepicker" 
                   onchange="GetMeterReading()" />
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
    
    
    @section scripts {
        <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
        <script>
    
            $("#FromDatePicker").datepicker({
                format: 'dd/mm/yyyy',
                todayHighlight: true,
                autoclose: true,
                todayBtn: 'linked'
            });
    
            function GetMeterReading() {
                console.log("Testing");
            }
        </script>
    }

    Friday, January 29, 2021 12:29 AM
  • User1312693872 posted

    Hi,polachan

    Actually the 'Testing' is printed, but it is duplicate, so it is overwrited.

    You can see if you change the way to update it, for example, way 1:click the date straightly. way 2: type to change the date.

    If you use these two ways , way1, way 2, way1, way 2....then you will not have the problem, so they duplicated because they use the same way.

    The reason is the browser, not the code,if you use Chorme, press F12-->Console--Console settings, and untag the 'Group Similar', then the

    duplicate print will all be printed as a new line.

    Like:

    Best Regards,

    Jerry Cai

    Friday, January 29, 2021 6:48 AM
  • User-474980206 posted

    You should be using the datepicker’s change event not the inputs. The datepicker is handling the input.

    Friday, January 29, 2021 4:07 PM
  • User503812343 posted

    you can use DatePicker's OnSelect event

    $(document).ready(function () {
            $("#FromDatePicker").datepicker
    		({ format: 'dd/mm/yyyy', 
    		   todayHighlight: true, 
    		   autoclose: true, 
    		   todayBtn: 'linked',
                         onSelect: function (date) {
    				console.log('datepicker testing');
    				console.log('todays date' + date);
    			}
    		});
    })
    function GetMeterReading() {
    console.log("Testing");

    for more detailed information on jQuery UI DatePicker - https://geeksarray.com/blog/jquery-ui-datepicker-examples-in-mvc

    Saturday, January 30, 2021 1:23 AM