Using JQuery Date-Picker in OXID Admin
Posted on
September 30, 2011 by
Ashant_Chalasani
To get datepicker feature to text box it is not required to write entire script for date picker since it is already available in jquery library need to include that library into our tpl file directly.Here the follow the process to get datepicker to any text box.
Adding Javascript to headitem.tpl
Add the following JS in ~/out/admin/tpl/headitem.tpl within the <head> tag.
<!--DatePicker code//-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({
showWeek: true,
firstDay: 1,
dateFormat: 'yy-mm-dd'
});
});
</script>
<!--end of date picker code.//-->
- showWeek displays the calendar week-number, and can be set to true/false.
- dateFormat can be set to the format your back-end processing scripts expect. Â We simply use the ISO 8601
- For other configuration settings, please refer to the UI/API/1.8/Datepicker (or the newest version) documentation
Calling the Date-picker Functions from the OXID e-Shop
Once loaded into headitem.tpl, the the date-picker function can be called from anywhere in the OXID e-Shop /admin Area by simply adding id=”datepicker”. Â Example
<input id="datepicker" type="text" />
Final Steps
- Clear your ~/tmp folder to reflect the changes
- Empty your browser-cache
euroblaze is a German e-Commerce company that specializes in delivering end-to-end
Web-Solutions for online merchants. We are experts and a Certified Solution Partner for the
cutting-edge, robust, modular and beautiful OXID e-Sales platform.
English
It has to be mentioned using external script-sources in an admin-area should be avoided. Its a security-risk (because everything can be made within that script including hijacking that account) and you are depending on the service of the used webserver (i know, google is our “friend”, but hosting that code on the own server wouldn’t be harmful).
Danny
This is very true and thanks for pointing it out. It is an important security measure.
Of couse, the files can also be stored locally on the merchant’s own server. This probably also could offer the advantage of using compression using mod_deflate.
Thanks!
Ashant