To use jquery datepicker in codeigniter form, first you'll need to download jQuery UI plugin and move the files to your codeigniter application. Make sure to place them along with your other assets like css, js for easier access.
Next you have to include the plug-in's css and js files to codeigniter view. Since the plugin is built over jquery you'll also need to include the library for the datepicker to work.
So include jquery ui style sheet inside
<head></head> of your code igniter view.<head>
...
<!--link jquery ui css-->
<link type="text/css" rel="stylesheet" href="<?php echo base_url('assets/jquery-ui-1.12.0/jquery-ui.css'); ?>" />
</head>
Next load jquery and jquery ui's js files just above the closing body tag (</body>).
<!--load jquery-->
<script src="<?php echo base_url('assets/js/jquery-1.10.2.js'); ?>"></script>
<!--load jquery ui js file-->
<script src="<?php echo base_url('assets/jquery-ui-1.12.0/jquery-ui.js'); ?>"></script>
Now create a text input to codeigniter form to which you can add datepicker control.
<label for="dob">Date of Birth</label>
<?php $attributes = 'id="dob" placeholder="Date of Birth"';
echo form_input('dob', set_value('dob'), $attributes); ?>
Here is the final step to add datepicker in codeigniter. Add this script just above the
</body>tag.<script type="text/javascript">
$(function() {
$("#dob").datepicker();
});
</script>
The function
datepicker() is used to invoke the month calendar - and the above script makes the datepicker calendar to popup as soon as the dob field got focus.
You can also customize the way the datepicker control behaves using its options. For example its default date format is 'mm/dd/yy'. If you want to change it to the common date format used in databases then set
dateFormat option inside datepicker() like this,$("#dob").datepicker(
{
dateFormat: 'yy-mm-dd'
}
);
This setting will be helpful in case you wish to insert the date input to database. It will save you the additional computing time required to change the date format and store it into db.
Likewise you can easily use datepicker in codeigniter forms using jQuery ui plugin. I hope you find this little codeigniter tutorial useful. Meet you in another interesting post.
No comments:
Post a Comment