Develop Reference

Binding event on indicator of the HTML date field to close the built-in date picker pop-up programatically

I am working on a legacy project that uses jQuery. I am having a UI issue with the HTML date field. See the screenshot below.
As you can see there are two picker pop-ups there, one for the built-in picker and another one from the plugin. What I am trying to do now is that, when I click on the indicator of the date field, I want to programmatically close the picker. First I am trying to bind event to the indicator. I tried this.
$('body').on('click', '#date-field::-webkit-calendar-picker-indicator', function () {
alert('binding successful')
})
But I did not work out. Is it possible to bind an event on it? How?
I will also need a way to programmatically close the HTML date picker pop-up without changing it to text field. Is it possible?

Filling in dates/username automatically in JavaScript dialog box?

I am trying to make a Javascript dialog box for use with a PDF stamp. For two of the fields, I want them to be automatically filled in with the current date and the username. These fields can then be edited by the user if necessary.
I'm not sure where to place that in the code, or if the syntax is correct.
Pastebin to current version.
This contains a variable called dialog that holds all of the fields and options for the dialog box.

Javascript doesn't seem to work inside the content loaded in lightbox2

I have created a comment form in a view and made it display as hidden so that I can make is appear in a lightbox using lightbox2.
The form mark up looks like this:
<div id="comment-form" class="hidden">
<div id="comment-form-inner">
........form code goes here.....
</div>
</div>
And then the link that open the lighbox looks like this:
Add a review
The the elements inside the div #comment-form-inner is displayed in the lighbox but some field doesn't seems to work such as the date picker field and the five star field. The date picker does not show up when the date text box field is active and the animated stars in the five star field just shows a select box.
Is there a way for the form fields to be able to render the javascript attached to those form elements?

First try updating lightbox to the latest jQuery version and see if that works.
Here's someone who posted a similar question already:
Jquery datepicker does not work inside lightbox

It is not loading because you have given the JavaScript functions in document.ready instead of that use on or live according to your jQuery version ,
$('.classname').on("click",function(){
// your JavaScript to run
});
Or
You can load the lightbox as iframe.

Popover a date string and show it on a calendar

i have a little info box on my site where i use several popover to show detailed information about the selection. For example i have a string with a name and a popover with the picture of this person.
Now i have a string with a date and i want to show this date on a calendar on a popover.
I have a little Mockup what shows what i want:
I searched a lot on google to find a plugin for this but i does not found anything.
Does anyone know such a jQuery/ Javascript Plugin what i looking for?
Thanks!

If you are using Bootstrap Datepicker, you can assign to the span elements the events to open the Datepicker control.
Like this:
HTML
<span class="aDate">1/1/2014</span>
JavaScript
$('.aDate').datepicker();
With that, you can bind it with the events you need (click, hover, etc)

Issue with spry validation from a dynamically updated input field vai javascript

I have a form on my website that uses spry validation widgets. I have recently added a date feature that uses 3 drop down boxes (day, month, year). I've used the onchange feature of the selection boxes to update a text field with the date and used spry validation on that input box to make sure its a valid date.
The JavaScript update function works but the spry does not consider the input text field changed. If I manually input the same date in the same format into the field the validation works, it's just when the field is changed dynamically via JavaScript that it does not work.
Any ideas why this is happening and how to fix it?

Here's what worked for me:
Say you have sprytextfield1 as the variable for your validation text field. Then use
sprytextfield1.removeHint()
sprytextfield1.setValue('your value goes here')
sprytextfield1.validate()

I figured it out. When I finish updating the input field via javascript I needed to add this line of text to trigger the spry validation.
spryNameofSpry.validate();
Hope this helps someone someday.