How to Use jQuery Datepicker in Frontaccounting
- Article
- Comment (3)
How to Use jQuery Datepicker in Frontaccounting. The old datepicker is working fine for the default theme. But when you customize the theme it wont work properly. Also its not looking good. While making responsive theme for frontaccounting, it wont help you. So, you can use jQuery Date picker instead of the existing one. Lets start with some initial files.
First you need to hide the existing datepicker. The following code help you to hide the date picker.
//default.css #CCIframe { display: none; }
and Js to hide the calender icon on every pages datebox.
$(function(){ $('img').each(function( index ) { if( $(this).attr('alt') == 'Click Here to Pick up the date') { $(this).hide() } }); });
Than, now lets start binding jquery files to frontaccounting. Lets include the CSS files into it.
Just open, Root of the Frontaccounting directory followed by.
includes->page->header.inc
Here just find the following line
echo "<link href='$path_to_root/themes/$theme/default.css' rel='stylesheet' type='text/css'> \n";
and below that add the following line of codes.
echo "<link href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10/themes/base/jquery.ui.all.css' rel='stylesheet' type='text/css'> \n";
And now, we need to include the js files of jQuery Core and jQuery UI. So, open your themes directory and followed by your theme folder, than open, “renderer.php“. and find the function ” menu_footer” . and add the following line of codes into it.
echo "\n\n<script type='text/javascript' src='https://code.jquery.com/jquery-1.11.1.min.js'></script>\n"; echo "<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js'></script>\n";
Now, your frontaccounting will get all the support js and css files from CDN source. Now, we need to set the date function to work.
echo "\n <script type='text/javascript'> $('.date').datepicker(); </script> " ;
Here, class date is the common class for all the date pickers, So it will get jquery Datepicker. If you have any problem in it comment below.
Please be aware that this may not work for some of the fancy date formats given in config.php file.
Yes I understand it. When you think to use custom date formats. You can have optiojs in jQuery date picker. So change it accordingly.
I hope those who try this jQuery they may aware of the formats.
how to hide the date before the selected date in default datepicker