We Keep Coding

How to make event listener with calendar icon

I need to make a datepicker
<input type="text" name="Birth" id="calendarInput" required class="inputField" placeholder="31.12.2001">
<input type="date" name="Birth" id="calendarHiddenInput" pattern="\d{4}-\d{2}-\d{2}" style="display: none">
<img id="calendarImg" src="images/calendarIcon.png">
When you write usual input[type=date], there is a clickable calendar icon, where you can pick a date. I want to make an event listener like this:
$('#calendarImg').click(function () {
$('#calendarHiddenInput').click();
});
But this function doesn't work. I want a usual input[type=text] but with small calendar icon, that shows a calendar like input[type=date] when you click on it.
P.S. When I do it, I'll pick value from calendarHiddenInput and paste it in calendarInput

Something like this. Replace "icon" with your image or text.
document.forms.form01.hiddendate.addEventListener('change', e => {
e.target.form.date.value = e.target.value;
});
input[type="date"] {
display: none;
}
<form name="form01">
<input type="text" name="date" />
<label>icon<input type="date" name="hiddendate"/></label>
</form>
The <label> element can be used for focusing on an input element even if it is hidden. The date picker (if there is one) will still show up.

Set field required if radio button is checked

I try to make required a field when button will radio button will be checked.
My jQuery (or JavaScript) are:
$('input#availability_to_work-1').change(function () {
if(this.checked) {
$('input#availability_date_to_work').prop('required', true);
} else {
$('input#availability_date_to_work').prop('required', false);
}
and
$("input[name='availability_to_work']").click(function () {
if ($("input#availability_to_work-1").is(":checked")) {
$(".wpjb-element-input-text.wpjb-element-name-availability_date_to_work").show();
} else {
$(".wpjb-element-input-text.wpjb-element-name-availability_date_to_work").hide();
}
});
My CSS:
.wpjb-element-input-text.wpjb-element-name-availability_date_to_work{display:none}
And HTML:
<input type="radio" value="'od zaraz'" name="availability_to_work" id="availability_to_work-0">
<div class="wpjb-element-input-text wpjb-element-name-availability_date_to_work" style="display: block;">
<label class="wpjb-label">
Data rozpoczęcia pracy </label>
<div class="wpjb-field">
<input id="availability_date_to_work" name="availability_date_to_work" type="text" required=""> </div>
</div>
All works good till moment if someone will check button with 'value="'od daty'"' and then check "od zaraz".
Then someone gets error in panel developer when tries to sumbit a form:
An invalid form control with name='availability_date_to_work' is not focusable.
Could someone help me to fix it?
With checkbox it's work good. Only with radio buttons it doesn't work fine.
Thank you.

How to force Bootstrap calendar to focus and open under the <i> tag when click on input?

I have a Bootstrap calendar. It opens when I click on the calendar icon but it does not open when I click on the input. I want to make the calendar open under the calendar icon not under the input element when click on input.
<div class="input-append date" id="dp3" data-date="11/03/2017" data-date-format="dd/mm/yyyy">
<input class="span2" id="dp2" size="16" type="text" value="11/03/2017">
<span class="add-on"><i class="icon-calendar"></i></span>
</div>
<script>
$(document).ready(function() {
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
$('#dp2').click(function(event){
event.preventDefault();
$('#dp3').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(){
$('#dp3').datepicker('hide');
});
});
</script>

I think simple questions are not answered here. Instead of clicking to the vote down button it would be useful to provide a working example link. Anyway took more then half an hour but made it to work it was very simple. didn't think to use $('#dp3').datepicker('show');
$(document).ready(function() {
$("#dp3").datepicker();
$('#dp2').click(function () {
$('#dp3').datepicker('show');
});
});

Display a pop-up on radio button click

Please let me know how to open a pop-up on click of a radio button using JQuery.
Currently Im using a the following code for a radio button using Spring MVC and JSTL
<label class = "">
<form:radiobutton path = "" value = "" onchange= ""/>
<label class = "" style = ""> <spring:message code ="" /></label>
</label>
Many Thanks

I am assuming you mean a new window by pop-up?
The following code will open a new window with the URL when the status of the radio button changes. You can use click if you like...
$("#pop").change(function() {
window.open("http://www.google.com");
});
<input type="radio" id="pop" value="yes">
JSFiddle Example

I hope this will solve your problem.
onchange= "window.open("http://www.stackoverflow.com",width=200,height=100); "/>
EDIT1: Removing the hide class does the trick.
jQuery:
$(document).ready(function () {
$('input[type="radio"]').click(function () {
$('#r').removeClass("hide");
});
});
HTML:
<input type='radio'>SO
<div id="r" selectOption="#" class="modal hide" tabindex="-1" role="dialog" style=" background-color:#ccc; height: 100px;width: 350px"></div>
EDIT2:
If you check my html code, you will see an id for div named as "r" (unique selector) and class name "hide" prevent the div to be displayed. Therefore the div is hidden.
When the radio button is click, using removeClass we're removing the class "hide" this make the div visible.
Check this JSFiddle
Hope you understand.

you mean like this? CLICK HERE
HTML
<input type='radio' id='myRadio'>Radio button
JQuery
$(document).ready(function()
{
$('#myRadio').click(function()
{
alert("Clicked");
});
});

Jquery: Best way to pop-up a selection div

Greetings,
Assume that I have such hidden div:
<div id="option-dialog" style="display:none;">
First
Second
</div>
And I have a text input field:
<input type="text" id="myinput" />
When myinput field is clicked by mouse, I want the hidden div to appear close to the selected input field and once user selects a link from this div, div dissapears and the value selected is becomes the value of the text input field. How to achieve this?
I use jquery and jquery ui
Regards

You can use Cluetip to do this.

have you considered using JQueryUI: Autocomplete ?
This does exactly what you are looking for

$("#myinput").live("focus", function() {
$("#option-dialog").toggle();
});
$(".option").live("click", function() {
var opt_val = $(this).attr("value");
$("#myinput").val(opt_val);
$("#option-dialog").toggle();
});
add class="option" to your list items

Hi may be this what to you need?
$(function() {
$("#myinput").click(function(){
$(this).hide('slow');
$('#option-dialog').show('slow');
});
$('#option-dialog a').click(function(){
var a = $(this).text();
$(this).parent().hide('slow');
$("#myinput").val(a).show('slow');
});
});
<div id="option-dialog" style="display:none;">
First
Second
</div>
<input type="text" id="myinput" />