Using jQueryUI features in your ExpressionEngine Control Panel

Sometimes you might find it useful to add some additional UI features to your EE control panel pages – luckily EE comes bundled with jQuery and jQueryUI so you can use any of the jQuery UI widgets without needing to bundle the scripts themselves. In this example, I’m going to add a nice Date Picker control to a form to make it easier for users to enter dates.

To begin with, we need to tell EE to include the necessary jquery UI features. jQueryUI is modular and has dependencies, so even though I only want to use the ‘datepicker’ feature, that in turn relies on the ‘core’ library so I need to include them both in the list of required modules. This code will need to be in your control panel function prior to loading your view

$this->EE->cp->add_js_script(
array('ui' => array(
'core', 'datepicker'
)
));

And then in your view, it’s the usual jQuery code to wire it up. In this case I’m going to declare that any input field with a class of “datepicker” should be converted into a jQueryUI datepicker field.

<script type="text/javascript">
    $(function() {

        $("input.datepicker").datepicker();

    });
</script>

<form method="post">

<input id="expiry_date" class="medium datepicker" type="text" name="expiry_date" value="<?=htmlspecialchars($expiry_date)?>" />

<input class="submit" type="submit" value="<?=lang('submit')?>" />

</form>

You can of course do the same for any other jQuery UI feature which means it’s easy to add great interactive features to your control panel forms

08
Dec 2011
POSTED BY
DISCUSSION 2 Comments
TAGS

  • Thanks James, exactly what I was looking for 🙂

  • vibeesh

    Thanks Alot