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

Javascript: compare two dates inside an if

The function card should return the card of a certain concert.
But only if the concert's date match the date selected with the datepicker's function. So if I choose the date 06/22/2018 I should see the concert card because the date is the same. But right now it doesn't work because the line:
if(document.getElementById("datepicker").value == this.date)
is picking the value of the input at the top, which is undefined, so it doesn't show anything. So I think I have first to call the function datepicker(),but I don't know how to do.
Here's the code I'm using:
<input type="text" id="datepicker"/></div>
<div id="corpo1"></div>
$(function()
{
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date",
buttonImage: "https://i.imgur.com/cvkNy5G.png"
});
});
function Concert(id, name, date, price)
{
this.id = id;
this.name = name;
this.date = date;
this.price = price;
this.card = function()
{
if(document.getElementById("datepicker").value == this.date)
return "<span class='concert'>"+this.name+" "+this.date+"</span>";
}
}
var concerti = [ new Concert(1,"The Fame Ball","06/22/2018",50) ];
function showcard(f)
{
var ris = "";
for(var i in concerti)
{
ris+=concerti[i].card();
}
document.getElementById('corpo1').innerHTML=ris;
}
Anyone who can help?

Try this solution: http://jsfiddle.net/6gub2smo/2/
The key change is the following:
$("#datepicker").datepicker({
showOn: "button",
buttonText: "Select date",
buttonImage: "https://i.imgur.com/cvkNy5G.png",
onSelect: showcard
});
jQuery UI recommends using the onSelect event. Documentation here.
Allows you to define your own event 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.

The problem I think you're having that your showcard code isn't being run, at least not at the right time. Adding the following to your Javascript should fix the issue.
$("#datepicker").change(showcard);
It will cause the showcard function to be run when the user selects a new date, when the text of the textbox is changed. The issue you might be having with "undefined" showing up if you don't select the date of the Concert is because the showcard function returns nothing (turned into "undefined") if the dates don't match. You can fix this by adding return ""; to the end of the function to force it to return an empty string and have nothing show up.

jQuery UI Datepicker, move from one Calendar to the next?

I'm looking for a way of moving from one Calendar to the next once the user has selected a date e.g:
User picks dateFrom
Automatically close dateFrom calendar and show dateTo version
I feel like I'm close to a solution but the dateTo calendar pops up and then disappears instantly, I'm hooking into the onSelect function of the calendar and when the inst is the dateFrom calendar, then i call .focus() on the dateTo text box e.g:
$('.datepicker > input').datepicker({
// snip.....
onSelect: function (dateText, inst) {
var type = $('#' + inst.id).data('calendar');
if (type === 'date-from') {
$('.js-hook--date-to').focus();
}
}
});
Markup:
<div class="large-2 columns">
<div class="datepicker">
<asp:TextBox ID="txtDateFrom" runat="server" placeholder="CHECK IN" data-calendar="date-from" />
</div>
</div>
<div class="large-2 columns">
<div class="datepicker">
<asp:TextBox ID="txtDateTo" runat="server" CssClass="js-hook--date-to" placeholder="CHECK OUT" data-calendar="date-to" />
</div>
</div>
This causes the next Calendar to pop up but it then disappears, is there an easy way to achieve this?
Edit*
I've also tried using .datepicker("show"); with no success.
2nd Edit*
jsFiddle to demonstrate

Use a short delay before triggering the focus.
onSelect: function(dateText, inst) {
var type = $('#' + inst.id).data('calendar');
if (type === 'date-from') {
setTimeout(function() {
$('.js-hook--date-to').focus();
}, 50)
}
}
As mentioned in comments the plugin only uses one container for all instances.
I think what is happening is since the first instance hasn't quite closed and cleaned up when you trigger the focus, the new instance is getting hidden from event in first
I arbitrarily set the delay and didn't play with it much to see what is best.
DEMO

I managed to do this using onClose and checking if a date was selected with getDate:
onClose: function (dateText, inst) {
var picker = $('#' + inst.id);
var type = picker.data('calendar');
var date = picker.datepicker('getDate');
if (type === 'date-from' && date !== null) {
$('.js-hook--date-to').focus();
}
}

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.

Jquery UI datepicker, onclick of a date , get the date and pass to URL

I have a jquery UI datepicker calendar in an event page(sharepoint page).
$('#datepicker').datepicker();
I need to get the date once user clicks on any date and get that date and pass it to the page url as mypage.aspx?dt=1/12/2012.I have this but not working.
$('.ui-datepicker td a').click(function(){
var url=$(location).attr('href');
var date = $(this.datepicker( "getDate" ));
if(date != 'null')
url += '&dt=' + date;
window.location.href=url;
});
Neither is this working..
$('.ui-datepicker td a').click(function() {
window.location.href = 'http://mysite/events/Pages/default.aspx?dt=' + $('#datepicker').datepicker().val();
});
can someone help?

try
$('#datepicker').datepicker({
onSelect: function(dateText, inst) {
window.location = 'http://mysite/events/Pages/default.aspx?dt=' + dateText;
}
});
uses the onSelect event (documented here)
Allows you to define your own event 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.