Develop Reference

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.

How can we get previous and next months with full days continuously using moment js?

I have two buttons for getting next and previous months with fulldays. I have included moment js. At-present when I click on next button I am getting December and end date is 28th, then I click again getting the same month not January. When I click on previous button October is getting, then I click again getting the same month not September.
$('.datepicker__month-button--next').on('click', function () {
console.log('next');
console.log(moment().add(1, 'months'));
});
$('.datepicker__month-button--prev').on('click', function () {
console.log('prev');
console.log(moment().subtract(1, 'months'));
});

You can do it like below:
var seletedDate = moment(new Date());
$(document).ready(function() {
alert(seletedDate);
});
$('#next').click(function() {
var lastDayOfNextMonth = moment(seletedDate.add(1,"M")).endOf('month');
// Update selected date
seletedDate = lastDayOfNextMonth;
alert(seletedDate);
});
$('#pre').click(function() {
var lastDayOfPreviousMonth = moment(seletedDate.add(-1,"M")).endOf('month');
// Update selected date
seletedDate = lastDayOfPreviousMonth;
alert(seletedDate);
});
Online demo (fiddle)

Alert appearing multiple times in dynamically generated bootstrap datepicker

I have the following code for a bootstrap datepicker which is dynamically generated.
When the user selects a date it checks to see whether the date picked is allowed (in this case a date prior or equal to the due date) and if not throws an alert.
The problem I'm having is that if the user uses the datepicker say 5 times, the alert appear 5 times if they pick a date which is not allowed.
$(document).on('focus', '.start_date', function(){
$(this).datepicker({
format: "{{ 'datepicker_format_1'|trans }}",
startDate: new Date()
}).on('changeDate', function(ev) {
var getCompare = $(this).closest(".parent_payment").find("input.due_date");
getCompare = getCompare.val().split("/");
getCompare = new Date(getCompare[2], getCompare[1] - 1, getCompare[0]);
$(this).datepicker('hide');
if(ev.date > getCompare) {
$(this).val("");
alert("The start date can not be after the due date");
}
});
});

Bootstrap Datepicker re-initialize date format

I have Bootstrap datepicker with default format mm/dd/yyyy, and I have select where I can change
format from mm/dd/yyyy to dd/mm/yyyy and reverse.
On select change I want to my datepicker change format.
I tried
find('#options-date_format').on('change', function(){
$("#picker").datepicker({format: formatDate})
});
but It's not working, and I can't find way of doing this.
Also tried to remove / destroy datepicker but I got javascript error.

I think the below approach is working,
1, Whenever changing the format, de-attach and then re-attach back to the element.
$("#dp3").datepicker(); // initialization
$('select').on('change', function () {
var d = $('select option:selected').text();
if (d == 2) {
$("#dp3").datepicker('remove'); //detach
$("#dp3").datepicker({ //re attach
format: "dd/mm/yyyy"
})
} else {
$("#dp3").datepicker('remove'); //detach
$("#dp3").datepicker({ //re attach
format: "mm/dd/yyyy"
})
}
});
JSFiddle

Ok I resolve this extending bootstra-datepicker.js
setFormat: function(format) {
this.format = DPGlobal.parseFormat(format);
}
And call that function
find('#options-date_format').on('change', function(){
$("#picker").datepicker('setFormat', newFormat);
});

When you have many date pickers, the you can use a class selector and reset all of them, and initialize using the class. Code sample below.
In the example, all the input elements will have the class date-picker
function resetDatePickers(){
$('.date-picker').each(function(index){
$(this).datepicker('remove');
});
$('.date-picker').datepicker({
format: "dd/mm/yyyy",
startView: 2,
orientation: "top auto"
});
}
resetDatePickers();

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.