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 >Calendar</button>
<input type="text" style="display: none;" id="popupDatepicker">
<input type="hidden" id="alternateDateField" size="30">

CodePudding user response：

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);
    }
});

CodePudding user response：

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 >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.