Develop Reference

Datepicker & Jinplace

I have Datepicker and it's working fine please check jsfiddle here.
Also I have Jinplace JQuery plugin and it's also working fine please check jsfiddle here.
But I can not get them to work together, I mean put datepicker inside editable jinplace div please check jsfiddle here.
Code:
$('.editable').jinplace({
});
$.fn.jinplace.editors.birthday = {
makeField: function(element, data) {
// Create a label with a checkbox inside it.
var input = $('<input id="datepicker">');
return input;
}
};
$(function() {
$( "#datepicker" ).datepicker({
yearRange: "1900:2016",
dateFormat: "yy-mm-dd",
changeYear: true
});
});
In this case Jinplace generate HTML code like:
<div class="editable" data-type="birthday">
<form action="javascript:void(0);" style="display: inline;">
<input id="datepicker2">
</form>
</div>
But input#datepicker appears in HTML only after clicking on div.editable and have not been listed in the html code before this click. Like this:
<div class="editable" data-type="birthday">
</div>
Please check jsfiddle links above for more info.
How can I get them to work together?

This is because your input does not exist when the datepicker is initialised. You will need to make the datepicker call, which is this code:
$( "#datepicker" ).datepicker({
yearRange: "1900:2016",
dateFormat: "yy-mm-dd",
changeYear: true
});
once the input is rendered on the dom using jinplace.
As far as jinplace's documentation goes I cant find an onload event, So I am not sure how to go about this, unfortunately. But looking at the source code and your example, this might work:
$.fn.jinplace.editors.birthday = {
makeField: function(element, data) {
// Create a label with a checkbox inside it.
var input = $('<input id="datepicker">');
return input;
},
activate: function (form, field) {
field.datepicker({
yearRange: "1900:2016",
dateFormat: "yy-mm-dd",
changeYear: true
});
field.focus();
},
};
I haven't tested this. Good luck!

jquery datepicker events not working properly

when i click in jquery calendar it display value first time and then when i click another time another value it doesn't work .
<script>
$(function(){
$( "#datepicker" ).datepicker();
$( ".ui-state-default" ).on('click',function(event){
alert(event.toElement.outerText);
})
});
</script>
check demo here http://jsfiddle.net/epHNZ/592

Just try this,
$(function() {
$("#datepicker").datepicker();
$("#datepicker").on('click', '.ui-state-default', function(e){
alert(e.toElement.outerText);
});
});
DEMO
or
May be above example unsupported in some browsers, in that case use this
$(function(){
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
var date =$(this).datepicker('getDate');
alert(date.getDate());
}
})
});
DEMO

javascript enable scheduler

I all,
I have this code
<select id = 'jack'>
<option id = 'test1' >test1</option>
<option id = 'test2' >test2</option>
</select>
<input id="calendar" type="text" disabled="disabled"/>
and this is the javascript
function enableEnd() {
end.attr('disabled', !this.value.length).datepicker('option', 'minDate', this.value);
}
var end = $('#calendar').datepicker();
$('#jack').datepicker({
onSelect: enableEnd
}).bind('input', enableEnd);
I would make sure that the schedule is active when I choose from the menu test1 while I would like to remain disabled if I choose test2

If i understood your question, you are looking for this.
var calendar = $("#calendar").datepicker("option", "disabled", true);
$("#jack").on('change', function () {
if($(this).val() == 'test1') {
calendar.datepicker( "option", "disabled", false);
} else {
calendar.datepicker( "option", "disabled", true);
}
});

You can simply do it this way:
$('#jack').on('change', function(e){
var val = $(this).val();
$('#calendar').attr('disabled', val == 'test2');
});

If you want to activate the calendar when test1 is selected, try something like this:
$(document).ready(function(){
$('#jack').on('change', function (e) {
if($('#jack').val()=="test1"){
// enable the calendar
$('#calendar').datepicker({
format:"mm-dd-yyyy",
autoclose: true
});
}else{
$('#calendar').datepicker('remove');
}
});
});

jQuery's "change" is the way to go, I think. Then you've got a one-liner :
$('#jack').change(function() {
$('#calendar').attr('disabled', $(this).val() == 'test2');
});
Fiddle here showing the desired behaviour : http://jsfiddle.net/y6pu4dwu/1/
Note : I'd suggest removing the "disabled" by default, since test1 will be selected at first.
Edit : this disables the HTML element itself, but the plugin exposes an API to disable (see other answers), so this is not the only way.

jQuery dynamically created datepicker not working

I already did what most of the solutions I see but it doesn't work on mine.
Here's my code:
function regenerateDatePickers()
{
var length = $( ".forduplication" ).length;
alert( length );
for ( var i = 1 ; i <= length ; i++ ) {
$( "#endDate" + i ).removeClass( "hasDatepicker" );
$( "#endDate" + i ).datepicker();
}
}
Only the original datepicker field is working. The cloned ones are not.
The Weird thing though is that my dynamically created "chosen"* fields are working.
*chosen http://harvesthq.github.com/chosen/
EDIT
- Added HTML code
<tr class="forduplication">
<td>
...
...<!--lots of other HTML codes-->
...
</td>
<td><input id="endDate1" name="endDatefield1" size="10"></td>
...
</tr>

Update 06/01/15
.live() is not longer supported. Using .on() this can be solved.
$('body')
.on('click', '.datePick', function() {
$(this).datepicker();
})
.on('focus', '.datePick', function() {
$(this).datepicker();
});
You could use live and focusin
Have a class for all the input fields, in this case I used datePick as the class
$('input.datePick').live('focusin', function() {
$(this).datepicker();
});​
Hope this helps

One way to do it is to destroy and reassign datepicker on every click but it has performence issue
$('input[id^="endDate"]').live('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
it works but remove and add datepicker every time you click on a input. So it's bettter if you can do this just after cloning the input like
....clone().datepicker('destroy').datepicker({showOn:'focus'});
and then add that element to where you want it to be.

JQuery Mobile UI DatePicker Change Date Format

I am trying to change the date format in the JQM UI Datepicker.
It's got an input which display's the dates as you change them.
I need it to display in dd/mm/yyyy format.
Can anyone help please?
UPDATE:
I'm trying this, but nothing's changing:
<script>
//reset type=date inputs to text
$( document ).bind( "mobileinit", function(){
$.mobile.page.prototype.options.degradeInputs.date = true;
});
</script>
<script language="javascript">
$(document).ready(function() {
$.datepicker.formatDate('dd/mm/yyyy'); //ADDED HERE
$("input[type='submit']").click(function(e) {
e.preventDefault();
});
});
</script>

Try this $.datepicker.formatDate('dd/mm/yyyy');
More reference here

Change the "jquery.ui.datepicker.mobile.js" file
add date format: dateFormat: "dd/mm/yy" Code shown below
//bind to pagecreate to automatically enhance date inputs
$( ".ui-page" ).live( "pagecreate", function(){
$( "input[type='date'], input[data-type='date']" ).each(function(){
$(this).after($("<div />").datepicker({ altField: "#" + $(this).attr("id"), showOtherMonths: true, dateFormat: "dd/mm/yy" }));
});
});