Develop Reference

Clone jQuery input date picker element

I am using the jQuery date picker and I want to clone the input element. The jQuery code seems to be working fine when cloning and static element but not with the date picker. Below is the code:
$(function(){
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
});
$(function(){
$('#thedate').datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Shown Field :
<input id="thedate" type="text" class="datepicker-input--checkin" /><br />
Hidden Field :
<input id="thealtdate" type="text" class="datepicker-input--checkin" /><br />
<input id="thesubmit" type="button" value="Submit" />
<div class="package">
</div>
Fiddle:

After cloning the input, you would need to initialize the datepicker again on the input.
You could do that by adding a class datepicker on the input intended to have the datepicker, and then initializing the datepicker (after cloning) using:
$(".package .datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
Here's the updated fiddle: https://jsfiddle.net/txqepe36/3/
You could simplify the code even further by removing the datepicker initialization through element ID, since you have a class datepicker on both inputs expected to have a date picker control.
Your JS code could be simplified to:
$(function() {
var $button = $('.datepicker-input--checkin').clone();
$('.package').html($button);
$(".datepicker").datepicker({
dateFormat: 'dd-mm-yy',
altField: '#thealtdate',
altFormat: 'yy-mm-dd'
});
});
Note that you would need to add a datepicker class to the input. So it should look like:
<input id="thedate" type="text" class="datepicker-input--checkin datepicker" />
Here's the fiddle: https://jsfiddle.net/txqepe36/4/

Month and year only in dropdown with jQuery not working on select

I am using datepicker to have month and year only as dropdown to select.
When i am using below CSS to disable the days of the datepicker, it is disabling the other datepickers in my JSP.
1.How can i make this css inline to one desired datepicker alone.
.ui-datepicker-calendar {
display: none;
}
2.once after disabling i am using onselect to select the month and year which is not working but it works if i select day in calendar with full calendar.
$(document).ready(function() {
$('#txtDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'M yy',
yearRange: "-2:+0",
defaultDate: '-1m',
onSelect: function() {
var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").text();
var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
callmymethod();
}
});
});
pls help me with these 2 queries. Thank you

i have got the solution for this which exactly served my purpose
jsfiddler
<input type="text" data-calendar="false" />
<input type="text" data-calendar="false" />
<input type="text" data-calendar="true" />
jQuery
$('input').datepicker({
beforeShow: function(el, dp) {
$('#ui-datepicker-div').toggleClass('hide-calendar', $(el).is('[data-calendar="false"]'));
}
});
CSS
.hide-calendar .ui-datepicker-calendar {
display: none;
}

Jquery datepicker to Input normal text and Date

How can I use the jquery datepicker to input date from an icon and also to take random text from keyboard.
For example
I need a text box to take Exact date (26-10-2015) and also text like since 3 years.
Thanks in advance.

You could just use a hidden input as datepicker with this kind of logic e.g:
$(function() {
$(".date").datepicker({
dateFormat: 'dd/mm/yy',
showOn: "button",
buttonImage: "https://htmlcssphptutorial.files.wordpress.com/2015/09/b_calendar.png",
buttonImageOnly: true,
buttonText: "Select date",
onSelect: function(dateText) {
$(this).prev().val(dateText);
}
});
$('input + .date').prev().on('change', function() {
var dateStr = this.value.split(/[\/-]/);
$(this).next().datepicker("setDate", new Date(dateStr[2], dateStr[1] - 1, dateStr[0]) );
})
});
.date {
display: none;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input placeholder="Any text there" />
<input type="text" name="date" class="date" readonly />

jQuery datepicker on dynamically generated rows

I am dynamically generating table rows using the following javascript codes:
$('#addNew').on('click', function() {
var clone = $('table.table-responsive tr.cloneme:first').clone();
console.log(clone);
clone.append("<td><button class='deleteAdded btn btn-danger'>Remove</button></td>")
$('table.table-responsive').append(clone);
calculateSum();
});
And this is my script for appending jQuery calendar to date inputs
$(function() {
$('input').filter('.datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
});
});
Now the problem I am facing is that the jQuery calendar pops up only in the first row. It doesn't work on the rows that are generated.
This in my html
<td>
<input type="text" class="form-control datepicker" name="invoiceDate[]" readonly="readonly" />
</td>
Please tell me how to make jQuery calendar work on all the rows that are dynamically generated. Looked around Google but nothing helped.
Thanks in advance.

You have to initiate the datepicker after the new rows are created
jQuery(function($) {
//create a original copy of the row to clone later
var $tr = $('table.table-responsive tr.cloneme:first').clone();
//add dp to existing rows
addDP($('input.datepicker'));
$('#addNew').on('click', function() {
var clone = $tr.clone();
console.log(clone);
clone.append("<td><button class='deleteAdded btn btn-danger'>Remove</button></td>");
//add dp to the new row
addDP(clone.find('input.datepicker'));
$('table.table-responsive').append(clone);
calculateSum();
});
function addDP($els) {
$els.datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<table class="table-responsive">
<tr class="cloneme">
<td>
<input type="text" class="form-control datepicker" name="invoiceDate[]" readonly="readonly" />
</td>
</tr>
</table>
<button id="addNew">Add</button>

$('#addNew').on('click',function(){
.....
.....
addDP();
});
addDP();
function addDP(){
$('input').filter('.datepicker').datepicker({
dateFormat: 'yy-mm-dd',
changeMonth: true,
changeYear: true,
});
}

Show full date in input for jQuery UI Datepicker

Using jQuery UI datepicker, I have the following:
<input type="text" id="check_in">
$( "#check_in" ).datepicker({
numberOfMonths: 2,
dateFormat: 'dd/mm/yy',
minDate: -1
});
When a date is chosen, the date is shown in the input field as 31/12/2013. How can I make it show "31 December 2013" in the input field, but upon submission it is still 31/12/2013?

You'll need two inputs:
<input type="text" id="check_in" />
<input type="hidden" id="altfield" name="date" />
and to change the JS to
$("#check_in").datepicker({
numberOfMonths: 2,
altField: '#altfield',
altFormat: 'dd/mm/yy',
dateFormat: 'dd MM yy',
minDate: -1
});
FIDDLE
The hidden input will be submitted with the dd/mm/yy value, while the visible input will show the format you're trying to show.