Using JQuery Date-Picker in OXID Admin

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

Leave a Reply