We Keep Coding

How to have the datepicker work for the dynamically created textboxes

I have an 'add' button that creates some dynamic textfields. The default start date and end date textfields displays the datepicker. However, the dynamically created textboxes are not displaying the datepicker. Any help would be appreciated.
$(document).ready(function() {
$('input[name="settings[start_date][]"]').datepicker({
maxDate: constants.MAX_YEAR + '-12-31',
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
});
$('input[name="settings[end_date][]"]').datepicker({
maxDate: constants.MAX_YEAR + '-12-31',
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
});
$('#container').on('click', '.remove', function() {
$(this).parent().remove();
});
$('#add').on('click', function() {
var row = $('div.addNew:first').clone();
$('#container').append(row);
});
});
<div id="container">
<div class="addNew" ?>
Start Date :
<?=form_input('settings[start_date][]', date('Y-m-d'), 'class="year-date-month-calendar input-small removetradingdates-block"')?>
End Date :
<?=form_input('settings[end_date][]', date('Y-m-d'), 'class="year-date-month-calendar input-small removetradingdates-block"')?>
<input type="button" class="remove" value="Remove" />
</div>
<input type="button" id="add" value="Add Periods" />
</div>

You can quite easily add a datepicker to the newly-created elements
N.B. In this example I have taken the liberty of adding a "datepicker" class to your text boxes, to make the code simpler, so make sure you alter your HTML as well. I have also reduced the amount of repetition in your code by making the datepicker options into a re-usable object:
HTML/PHP:
<div id="container">
<div class="addNew" ?>
Start Date :
<?=form_input('settings[start_date][]', date('Y-m-d'), 'class="datepicker year-date-month-calendar input-small removetradingdates-block"')?>
End Date :
<?=form_input('settings[end_date][]', date('Y-m-d'), 'class="datepicker year-date-month-calendar input-small removetradingdates-block"')?>
<input type="button" class="remove" value="Remove" />
</div>
<input type="button" id="add" value="Add Periods" />
</div>
jQuery:
//I have assumed this, just for the sake of an example:
var constants = {
MAX_YEAR: "2020"
};
//re-usable set of options
var datePickerOptions = {
maxDate: constants.MAX_YEAR + '-12-31',
changeYear: true,
changeMonth: true,
dateFormat: 'yy-mm-dd'
};
$(document).ready(function() {
//set datepicker on all existing elements with "datepicker" class
$('.datepicker').datepicker(datePickerOptions);
$('#container').on('click', '.remove', function() {
$(this).parent().remove();
});
$('#add').on('click', function() {
var row = $('div.addNew:first').clone();
$('#container').append(row);
var pickers = row.find(".datepicker"); //find elements within the new row which have the "datepicker" class
//since we cloned them, remove the "id" attributes and "hasDatepicker" class, both of which were added by jQueryUI, otherwise the datepicker will not initialise properly on these new elements
pickers.removeAttr("id");
pickers.removeClass("hasDatepicker");
pickers.datepicker(datePickerOptions); //add a datepicker to each new element
});
});
You can also visit http://jsfiddle.net/yqr69eca/17/ to see a working demonstration of this code.

write your function like this
$(document).on('click','#targetid',function(){
/*Do something logically here*/
// On a side note it will always work on dynamic,static elements
});

Use the same javascript function for multiple controls

I would like to use the same JavaScript function for two or more controls.
Is this possible and how?
this is my example:
<script>
$(function () {
$("#datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
<input type="text" id="datepicker">
<input type="text" id="datepicker2">

Change your selector to the Class Selector so all the equal classes get affected by the function
<script>
$(function () {
$(".datepicker").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
<input type="text" class="datepicker">
<input type="text" class="datepicker">

Yes you can use a multiple id selector:
$("#datepicker, #datepicker2").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
Or add a classe and use a selector by class.

You need to add id of all the elements you need to add datepicker to, just like below:
$("#datepicker,#datepicker2").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});

Use a class selector instead of id selector and things should be good.
<script>
$(function () {
$(".selectorname").datepicker({
showOtherMonths: true,
selectOtherMonths: true
});
});
<input type="text" class="selectorname">
<input type="text" class="selectorname">

cancel jQuery datepicker default click on input

I would like to ask if there is any way to cancel the default behaviour of the jquery datepicker, that so when I click the input field where the datepicker is attached, my custom logic to flow and the datepicker calendar to not be shown.
I read the documentation and used the suggested "hide" option but it seems to not work flawless.
Here is a js fiddle that I used:
jquery datepicker jsfiddle
function hideIt(){
$( "#datepicker" ).datepicker( "hide" );
//custom logic
}
function showIt(){
$( "#datepicker" ).datepicker("show");
}

No need to add button. Just give it to handle datepicker.
$(function() {
$("#datepicker").datepicker({
constrainInput: true,
showOn: 'button',
buttonText: 'Show It !'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.css"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js
"></script>
<p>Date:
<input type="text" id="datepicker" /> </p>
Note : To prevent to write on text box make it disable if you want.

I have found a solution to the problem by using "fictional" button with imageOnly property.
Here is the jsfiddle: jsfiddle
Javascript:
$(function() {
$("#datepicker").datepicker({
showOn: 'button',
buttonImage: 'randomlocation/nonexisting-calendar-img.gif',
buttonImageOnly: true,
buttonText: ''
})
});
function hideIt(){
//custom logic
}
function showIt(){
$( "#datepicker" ).datepicker("show");
}
Html:
<p>Date: <input type="text" id="datepicker" onclick="javascript:hideIt();" /></p>
<input type="button" onclick="javascript:showIt();" value="Show It !" />

Try like this
function hideIt(){
}
function showIt(){
$( "#datepicker" ).datepicker();
$('#datepicker').focus();
$('#datepicker').prop('disabled', true);
}

Add Today Button in datetimepicker with the below code

I would like to add Today button in datetimepicker calender. I have an idea to add with the syntax "todayBtn:true". But i dont know how to implement it while showing with the below code
<html>
<body>
<input class="form-control date" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1" placeholder="select to validity" name="from_validity" type="text" id="shankar" value="">
</body>
</html>
<script>
$("#shankar").click(function () {
$("#shankar").datetimepicker('show').on('changeDate',function(ev) {
$('.datetimepicker').hide();
});
});
</script>

Set following properties for your datepicker (todayBtn:"linked").
$('#dateFieldId').datepicker({
todayBtn: "linked",
todayHighlight : true,
orientation: "left",
autoclose: true
});

Include jquery-ui javascript and css and add the code
refer : http://jqueryui.com/datepicker/#buttonbar
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
And to put Todays date in the panel:
$('button.ui-datepicker-current').live('click', function() {
$.datepicker._curInst.input.datepicker('setDate', new Date()).datepicker('hide');
});
Refer here: https://forum.jquery.com/topic/jquery-ui-datepicker-today-button

Try showButtonPanel: true
$(function() {
$( "#shankar" ).datepicker({
showButtonPanel: true
});
});
JSfiddle

If you mean this datetimepicker it would be as simple as that:
<html>
<body>
<input type="text" id="shankar" class="form-control" name="from_validity" placeholder="select to validity">
</body>
</html>
<script>
$(function() {
$("#shankar").datetimepicker({
showTodayButton: true,
format: 'YYYY-MM-DD hh:mm'
});
});
</script>

Jquery UI Datepicker on an image

Greetings,
I want to pop up the Jquery Datepick as the image is clicked and displaying next to it. Once a date is clicked, I want to post my form.
Here how I try this:
The HTML:
<form id="myform">
<span class="quickgo">
Quick Go:
<select>
<option value="1">Discovery Channel</option>
<option value="2">History Channel</option>
</select>
<img class="calenderpick" src="/img/calender.png" />
</form>
And the javascript part:
<script type="text/javascript">
$(function() {
$(".calenderpick").click(function() {
$(this).datepicker();
alert("it is clicked!");
});
});
</script>
Once this image is clicked, I can get the "it is clicked warning" however not the date picker. I also have no clue about how to trigger the form posting event once a date is picked. In the end I want to post the selected channel and the picked date so that I can switch the page.
Thanks

Hellnar,
here's what i use regularly in my mvc apps:
<input class="date" id="StartDate" name="StartDate" value="" type="hidden" />
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png'
});
});
</script>
hope this helps (notice i use an id and not a class selector). also, check the spelling on calender - should be calendar :)
edit - if you wanted to submit the form on selecting the date, change the javascript code to:
<script type="text/javascript">
$(document).ready(function() {
$("#StartDate").datepicker({
dateFormat: 'dd-mm-yy',
changeMonth: true,
changeYear: true,
showOn: 'button',
buttonImage: '/img/calender.png',
onSelect: function(dateText, inst) { $("#myform").submit(); }
});
});
</script>

Why its not opening on clicking the image
Look into the source over here JQuery Datepicker Icon Trigger
How to post the form on selecting a date
Look into the source over here JQuery Datepicker Events - onSelect
in the onSelect event you can do something like $("#form").submit()
Hope this helps