Using JQuery Date-Picker in OXID Admin 2
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
Deutsch 
