Varun Sharma Varun Sharma - 3 years ago 167
CSS Question

JQuery UI Datpicker excluding icons

I'm working on an application and am using jQuery UI Datepicker widget. But I do not want to use the default icons from the datepicker and want the Next and Prev text in place of the icons that is visible when I remove the icon classes.

I'm currently on a code like this:

$("#datePicker").on("click", function(){
$('.ui-icon.ui-icon-circle-triangle-w').removeClass('ui-icon ui-icon-circle-triangle-w');
})


where datePicker is the id for the date field.

This works fine when I initially open the datepicker. But, when I click the Prev button, the icons appear again. How can I persist with the Next/Prev even when I switch the month view.

Answer Source

Here you go with the 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" />

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download