javascript - JQuery UI Datpicker excluding icons -
i'm working on application , using jquery ui datepicker widget. not want use default icons datepicker , want next , prev text in place of icons visible when remove icon classes.
i'm on code this:
$("#datepicker").on("click", function(){ $('.ui-icon.ui-icon-circle-triangle-w').removeclass('ui-icon ui-icon-circle-triangle-w'); })
where datepicker id date field.
this works fine when open datepicker. but, when click prev button, icons appear again. how can persist next/prev when switch month view.
here go solution http://jsfiddle.net/8w8v9/3308/
$(function(){ $('#thedate').datepicker({ dateformat: 'dd-mm-yy', altfield: '#thealtdate', altformat: 'yy-mm-dd', prevtext: "prev", nexttext: "next" }); replaceicon = function(){ $('.ui-icon.ui-icon-circle-triangle-w').parent().removeattr('class').attr('class', 'updatedclassleft'); $('.ui-icon.ui-icon-circle-triangle-w').removeattr('class'); $('.ui-icon.ui-icon-circle-triangle-e').parent().removeattr('class').attr('class', 'updatedclassright'); $('.ui-icon.ui-icon-circle-triangle-e').removeattr('class'); } $("#thedate").on("click", function(){ replaceicon(); }); $(document).on('click','.updatedclassleft, .updatedclassright',function(){ replaceicon(); }); });
.updatedclassleft{ position: absolute; top: 8px; left: 0px; cursor: pointer; } .updatedclassright{ position: absolute; top: 8px; right: 2px; cursor: pointer; }
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> shown field : <input id="thedate" type="text" /><br /> hidden field : <input id="thealtdate" type="text" /><br /> <input id="thesubmit" type="button" value="submit" />
Comments
Post a Comment