Develop Reference

jQuery Datepicker on change event is not getting fired when using button instead of text input

I am trying to make a button only datepicker with jQuery dtaepicker.
When I am attaching the datepicker to an input, the onchange function works and I got the new selected value.
However when I am attaching the datepicker with just a button or something else, the onchange event is not getting fired:
<input type="text" class="test"> // works
<i class="fa fa-calendar test"></i> // opens the datepicker as should be, but not fire the change event
$(function() {
$(".test").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(v) {
// also not getting fired
},
}).on("change", function() {
// not getting fired when using button instead of text input
let val = $(this).val();
});
});

I think you need to add this line showOn: 'button'
<input type="text" class="test"> // works
<i class="fa fa-calendar test"></i> // opens the datepicker as should be, but not fire the change event
$(function() {
$(".test").datepicker({
showOn: 'button', // use showOn: 'both' if you want to open the datepicker on icon and the input as well
format: 'yyyy-mm-dd',
onSelect: function(v) {
// This would get fired on changing date on the calendar icon
},
}).on("change", function() {
// not getting fired when using button instead of text input
let val = $(this).val();
});
});
Also, you can remove the <i class="fa fa-calendar test"></i> tag and place the following two LOC after the showOn attribute to show the calendar icon
buttonImageOnly: true,
buttonImage: 'http://jqueryui.com/resources/demos/datepicker/images/calendar.gif',

Use the hide event - it gets fire after you finish inserting or picking a date:
$(function() {
$(".test").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(v) {
// also not getting fired
},
}).on("hide", function(e) {
// not getting fired when using button instead of text input
let val = $(this).val();
});
});

You can try the answer here.
You should be able to call the datepicker change from the button click event

I have found it:
$(".test").datepicker(params).on('hide', v => console.log(v.date));
// will return a date object with the selected date

Listening to onChange on a jQuery datepicker?

I currently am creating a date picker like so
HTML
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<input id="datepicker" type="datepicker" name="date" placeholder="Date" />
JS
$('#datepicker').datepicker()
.on("change", function (e) {
console.log("Date changed: ", e.target.value);
});
My goal is to be able to listen for when the user clears out the date box. However, the change event only seems to fire once you unfocus the date box. I'm wondering if there's a way to listen for all changes in a jQuery date box, or if there are any better alternatives.
JsFiddle link:
https://jsfiddle.net/szkfm0y7/

Use jquery on input alongside with the on change event
$('#datepicker').datepicker()
.on("input change", function (e) {
console.log("Date changed: ", e.target.value);
});
Fiddle

Here is a possible solution:https://jsfiddle.net/7atsua85/
Instead of e.target.value, use $(this).val() as shown below,
$('#datepicker').datepicker()
.on("change", function (e) {
//console.log("Date changed: ", e.target.value);
alert($(this).val())
});

How to send a variable via jquery

I just created an autocomplete textbox via jquery now i am stuck with two problems.
1) I need to get the value of the selected item from the Autocomplete list.
So far i did these..
My jquery
$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
});
});
I am getting the autocomplete list from the database its working fine, but the problem is that
2) When i type 'r' all the names with values gets populated and if i select say Robin from the list and try to display it with alert, i only gets 'r', (i only typed r,and selected 'robin' from list) why is this so?
here is the code i wrote for this
for the autocomplete textbox
<input name="tags" type="text" id="tag" value="" onchange= "newfn()" />
and in newfn()
<script>
function newfn()
{
authname = document.getElementById("tag").value;
document.autoquote.qid.value=authname;
alert(authname);
}
</script>
and if i put an alert at first saying
alert("Hi");
then, i get first alert saying hi, and I get robin not r
So what is the correct way to get what value i selected from the autocomplete list?
Now my second Question is that the selected value from this autocomplete textbox, I need to pass it with another jquery to another php page so that I can get this value there and give it in a query as a criteria.

Because it is not the way to catch a select event http://api.jqueryui.com/autocomplete/#event-select :
$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true,
select: function( event, ui ) {
//Then use "ui" object, for example ui.item.label or ui.item.value
}
});
});

$(".autosearch-smart").autocomplete('autocomplete.php', {
select: function( event, ui ) {
// here you can get id and values from the autocomplete list
// try to debug
console.log(ui.item.id);
console.log(ui.item.label);
console.log(ui.item.value);
}
});

you can use the autocomplete's select property like this
$("#tag").autocomplete('autocomplete.php', {
selectFirst: true,
select: function (event, ui) {
var label = ui.item.label;
var value = ui.item.value;
alert(label);
alert(value)
// you can write additional javascript code here to make use of these values
}
});
Please check the jQuery UI documentation for more examples and info.
Here is a JSFiddle.(Please note that an additional source attribute has been added in the fiddle to simulate the loading of data set as real cross domain AJAX calls are not allowed)

$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
select: function( event, ui ) {
//check the values in console
alert(ui.item.value+" - "+ui.item.value);
}
});
});

Opening new datepicker when old one is closed

I'm using a custom JS library called datepicker, that you can find here.
I have it set up and working, but I need some extra functionality from it, and I have absolutely no idea how to get it done.
Here's what I have so far:
<h:panelGroup>
<h:panelGrid>
<input id="depatureDate" value="Departure date" class="datepicker dp1"></input>
<script>
$(".datepicker, dp1").pickadate({
format: "dd/mm/yyyy",
formatSubmit: "dd/mm/yyyy"
})
</script>
</h:panelGrid>
<h:panelGrid id="returnDate">
<input value="Return date" class="datepicker dp2"></input>
<script>
$(".datepicker, dp2").pickadate({
format: "dd/mm/yyyy",
formatSubmit: "dd/mm/yyyy"
})
</script>
</h:panelGrid>
</h:panelGroup>
What I need to do is the following:
If the first datepicker's input is clicked and a date is selected, that datepicker needs to close(it's already doing this, so that's fine) and the second datepicker needs to open, with the date that was selected in the first one marked on it. The user must then select another date on the second datepicker
If anyone has any idea how to do this, advice and pointers would be more than welcome!

Okay, i've done a small example here, working with the close event.
<input type="text" class="datepicker1" />
<br />
<input type="text" class="datepicker2" />
<script type="text/javascript">
// init second picker
var $input = $('.datepicker2').pickadate();
// init first picker
$('.datepicker1').pickadate({
// handle close event
onClose: function() {
var picker = $input.pickadate('picker');
// set unix timestamp to the second picker
// maybe theres a better solution for this...currenlty it works
picker.set('select', this.component.item.select.pick );
picker.open();
}
});
</script>
dont forget to load all pickadate libraries and jquery.....
i've defined 2 divs with classed datepicker1 and datepicker2. then i'm creating
the datepicker objects. the datepicker1 object handles the onClose event.
When the first datepicker is closed, the scripts opens the second and sets the value of datepicker1...
hope this helps
cheers

the datepicker provides an close event, maybe you can use this? Take a look at the API here
http://amsul.ca/pickadate.js/api.htm#method-on
some lines further down, you find
$('.datepicker').pickadate({
onOpen: function() {
console.log('Opened up!')
},
onClose: function() {
console.log('Closed now')
},
onRender: function() {
console.log('Just rendered anew')
},
onStart: function() {
console.log('Hello there :)')
},
onStop: function() {
console.log('See ya')
},
onSet: function(event) {
console.log('Set stuff:', event)
}
})
when entering the close event, open a new datepicker and set default value of the currently closed.

Run JavaScript function on every input field

I have a huge form with several input fields. This is a Balance and a Profit & Loss sheet, so the input text fields has to be formatted as "money". I found some nice jQuery plugin to do the formatting: accounting JS, but right now I have to call it manually on all the fields and this is not the best method I think...
How can I call the accounting.formatMoney() function on ALL the input text fields on keydown?
So if there is a KeyDown or KeyUp event on the FORM or BODY, the script will find ALL the input fields and execute the script.
This is the formatting and the Javascript function I want to call on every INPUT text field:
var options = {
symbol : "",
thousand: " ",
precision : 0,
format: "%v%s"
};
var tmp = parseInt(document.getElementById('input_id').value, 10);
document.getElementById('input_id').value = accounting.formatMoney(tmp, options);
The form is sent back to BODY via AJAX, so I think the best method would be to call the function this way:
$(document).ready(function(){
$('body').on('keyup', 'input', function(e){
// collect all input fields and execute the function
});
});
Thank you very much for the help!

You might do
$(document).ready(function(){
$('body').on('keyup', 'input', function(){
$(this).val(accounting.formatMoney($(this).val(), options));
});
});
But this supposes your users would like the input to be modified while they're typing.
If you want to have the input modified when the users leave the field or type 'enter', do this :
$(document).ready(function(){
$('body').on('blur change', 'input', function(){
$(this).val(accounting.formatMoney($(this).val(), options));
});
});
Note that in a real world application I would have a class on my inputs to make the selector more selective ('input.money' instead of 'input').
EDIT :
If you want to apply this to the inputs in a table whose id is bstable, do
$(document).ready(function(){
$('#bstable').on('blur change', 'input', function(){
$(this).val(accounting.formatMoney($(this).val(), options));
});
});
If the bstable table is obtained via ajax and isn't immediately here, you may do
$(document).ready(function(){
$(document.body).on('blur change', '#bstable input', function(){
$(this).val(accounting.formatMoney($(this).val(), options));
});
});

$('body').on('keyup', 'input', function(){
$("body").find("input").each(function(index, element){
$(element).val(accounting.formatMoney($(element).val(), options));
});
});