Question 35883 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to get the date from the alternate datepicker field? – Jquery

Datepicker has this function which allows you to ship the date into an alternative input with an alternate date format. In my program, I’m hiding the datepicker input and trigger open the calendar with a button. How do I get the date from this alternate input?

My code

/*

open calendar

*/
$(document).on('click','.openDatePicker',function(){

    $('#popupDatepicker').datepicker({
        changeMonth: true,
        changeYear: true,
        altField: "#alternateDateField",
        altFormat: "DD, d MM, yy"
});
    $('#popupDatepicker').show().focus().hide();
})

/*

get date from alternate field

*/
$(document).on('change','#alternateDateField',function(){

    var fulldate = $('#alternateDateField').val();
    console.log(fulldate)


})
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
  <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
  
<button class="openDatePicker">Calendar</button>
<input type="text" style="display: none;" id="popupDatepicker">
<input type="hidden" id="alternateDateField" size="30">
Tags:

2

Answers


  1. 0

    altField Datepicker set value for input field but not trigger change event. So, you cannot catch the input’s change event.
    Try catching the datepicker’s onSelect event instead:

    $("#popupDatepicker").datepicker({
    onSelect: function(dateText) {
        console.log("Selected date: " + dateText + "; input's current value: " + this.value);
    }
});
    Login or Signup to reply.
  2. 0

    The change event does not fire unless the input was changed by the user interacting with the browser UI. It does not fire if the value is changed by software. This is by design and is not a jQuery behavior, but a browser behavior.

    So you need to manually trigger the event by yourself. There are two ways to do this:

    • Using DatePicker’s onSelect option to trigger a change event manually. (best approach)
    • Using the setInterval method to periodically check whether the hidden input’s value is changed. (alternate approach)

    See the following example using first approach:

    /*

open calendar

*/
$(document).on('click', '.openDatePicker', function() {

  $('#popupDatepicker').datepicker({
    changeMonth: true,
    changeYear: true,
    altField: "#alternateDateField",
    altFormat: "DD, d MM, yy",
    onSelect: function(datestring, dp) {
      $('#alternateDateField').trigger('change');
    }
  });
  $('#popupDatepicker').show().focus().hide();
})

/*

get date from alternate field

*/
$(document).on('change', '#alternateDateField', function() {

  var fulldate = $('#alternateDateField').val();
  console.log(fulldate)


})
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

<button class="openDatePicker">Calendar</button>
<input type="text" style="display: none;" id="popupDatepicker">
<input type="hidden" id="alternateDateField" size="30">

    References:

    onSelect:

    A function is called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

    setInterval():

    The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search