This tutorial will show you how to use datepicker in codeigniter forms using jquery. A date picker is an interactive control which makes it easy for the user to choose the date from a calendar rather typing it manually. Honestly who wants to type into web forms let alone date these days? Besides it's a great way to avoid typos and enhance user experience too.
There are so many ways by which you can add datepicker in codeigniter, but jquery ui datepicker so far is simple and rich in features. This datepicker calendar will be tied to form input and opened in a small overlay beneath the text box. Below we'll see how to use datepicker in codeigniter with jquery ui plug-in.
How to Add Datepicker in CodeIgniter using jQuery UI?
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.
Read Also: How to Populate Dropdown from Database in CodeIgniter
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