Here is a snippet of code that should do the trick:-
$("#datepicker2").datepicker({
showButtonPanel: true,
beforeShow: function( input ) {
setTimeout(function() {
var buttonPane = $( input )
.datepicker( "widget" )
.find( ".ui-datepicker-buttonpane" );
var btn = $('');
btn
.unbind("click")
.bind("click", function () {
$.datepicker._clearDate( input );
});
btn.appendTo( buttonPane );
}, 1 );
}
});
with the html as
Date:
should display the datepicker with clear option as:-
“From a programmer’s point of view, the user is a peripheral that types when you issue a read request.”
– P. Williams
Very cool!
ReplyDeleteThx
hi, the button desapear when the next, previous or year select is clicked, do you know how to correct that?... i'll hope you can help me, thank for your post
ReplyDeletecode that works
ReplyDeletefunction AddClearButton(input)
{
setTimeout(function()
..
.bind("click", function () {
if($(input).val() != "") {
$.datepicker._clearDate( input );
}
});
btn.appendTo( buttonPane );
}, 1 );
}
$("#datepicker2").datepicker({
showButtonPanel: true,
beforeShow: function( input ) {
AddClearButton(input);
},
onChangeMonthYear:function( year, month, inst ) {
AddClearButton(inst.input);
}
});
});
Saif, your code is good. Still have some issues. If you press the monthchange button rapidly, you would have two or three AddClearButton calls resulting in two three buttons. Below is my improvised code.
ReplyDeletefunction AddClearButton(input)
{
setTimeout(function(){
var buttonPane = $( input )
.datepicker( "widget" )
.find( ".ui-datepicker-buttonpane" );
var btn = $('<button id="customClearButton" class="ui-datepicker-current ui-state-default ui-priority-secondary ui-corner-all" type="button">Any Date</button>');
btn
.unbind("click")
.bind("click", function () {
$('#calender').val('Any Date');
});
// Check if buttonPane has that button
if(buttonPane.has('#customClearButton').length==0)
btn.appendTo( buttonPane );
}, 1 );
}
Thank u so much..
DeleteThanks for sharing
ReplyDeleteGreat Article
ReplyDeleteASP.NET MVC Training
Online MVC Training
Online MVC Training India
Dot Net Training in Chennai
.Net Online Training
.net training online
Dot Net Online Training
C# Training
This is an awesome post.Really very informative and creative contents. These concept is a good way to enhance the knowledge.I like it and help me to article very well.Thank you for this brief explanation and very nice information.Well, got a good knowledge.
ReplyDeleteDedicatedHosting4u.com