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.
Related
I have a button which when clicked, displays a calendar for the user to change the date of an item. After the date is chosen, there will be a confirmation dialogue to ensure that the user would like to proceed. The problem that my code is currently facing is that when the calendar is displayed and the user let's say click the background, the calendar disappear. When the user clicks the button again and proceed to choose the date, the confirmation dialogue comes out multiple times, probably because of the previous attempts. Does anyone know how to fix this?
function reschedule(){
event.preventDefault();
$("#change").datetimepicker({
"format" : "yyyy-mm-dd hh:ii:ss",
"autoclose" : true,
"startDate" : new Date(),
pickerPosition: 'bottom left'
}).on('changeDate', function (input) {
if ( confirm("Move to " + new Date(input.date).toISOString() + "?") ) {
// code to change date
}
});
$("#change").datetimepicker("show");
}
Probably, you are calling the reschedule() function each time the user clicks your button, which causes the same "changeDate" event to be attached multiples times on the element.
To prevent that, you can try moving the code that initializes the date-time-picker outside the reschedule() function.
See the code below.
$("#change").datetimepicker({
"format" : "yyyy-mm-dd hh:ii:ss",
"autoclose" : true,
"startDate" : new Date(),
pickerPosition: 'bottom left'
}).on('changeDate', function (input) {
if ( confirm("Move to " + new Date(input.date).toISOString() + "?") ) {
// code to change date
}
});
function reschedule(){
event.preventDefault();
$("#change").datetimepicker("show");
}
I managed to figure out the solution, just have to unbind it when the calendar is hidden.
function reschedule(){
event.preventDefault();
$("#change").datetimepicker({
"format" : "yyyy-mm-dd hh:ii:ss",
"autoclose" : true,
"startDate" : new Date(),
pickerPosition: 'bottom left'
}).on('changeDate', function (input) {
if ( confirm("Move to " + new Date(input.date).toISOString() + "?") ) {
// code to change date
}
}).on('hide', function () {
$("#change").unbind();
});
$("#change").datetimepicker("show");
}
I want to call a function whenever user changes date in a datepicker but it is not working. I have already checked link for Question JQuery Datepicker onchange event help! but it didnt help.
Below is my code and what i have tried:
<h:inputText id="animalBornDateId"
value="#{myController.animalBornDate}"
styleClass="dtp dateClass" style="width: 80px !important;" >
</h:inputText>
What i tried:
$("#animalBornDateId").datepicker({
onSelect: function(dateText, inst) {
var date = $(this).val();
var time = $('#time').val();
alert('on select triggered');
}
});
Another:
$('#animalBornDateId').on('input',function(e){
alert('Changed!')
});
The below works when i manually enter date inside textbox and click tab which i dont want.
$('#animalBornDateId').change(function() {
alert("test");
});
I want to call alert function when i select date from the calendar
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");
}
});
});
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();
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.