How to Use jQuery Datepicker in Frontaccounting
X

Congrats, You are Subscribed to Receive Updates.

How to Use jQuery Datepicker in Frontaccounting


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.

juqery-date-picker-fa

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='http://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.

commenter

About Varadharaj V

The founder of Kvcodes, Varadharaj V is an ERP Analyst and a Web developer specializing in WordPress(WP), WP Theme development, WP Plugin development, Frontaccounting(FA), Sales, Purchases, Inventory, Ledgers, Payroll & HRM, CRM, FA Core Customization, OpenCart Theme Development, PHP, HTML, CSS, jQuery, Bootstrap development and content SEO.

3 comments

  1. commenter

    Please be aware that this may not work for some of the fancy date formats given in config.php file.

    • commenter

      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.

  2. commenter

    how to hide the date before the selected date in default datepicker

Comment Below

Your email address will not be published. Required fields are marked *

*

Current ye@r *

Menu

Sidebar

Subscribe E-mail Updates

Congrats, You are Subscribed to Receive Updates.

Advertisement

Category Posts