CodeIgniter datepicker with JQuery

Hello all,

 

First of all I want to thank all my viewers from the previous post and I hope that post helped them as much as possible.

 

I am currently developing a web application using CodeIgniter. It is a great framework and everything is very well documented and well thought. But nothing is perfect on this world so I found that creating a date picker using JQuery and CodeIgniter could be very painful especially if you are quite new with both these technologies. So let me first explain how you should proceed and make everything work great.

 

1. Download CodeIgniter from their website. You will receive a folder called CodeIgniter_1.7.3 with everything you need in it. Create a folder called assets underneath CodeIgniter_1.7.3 and under assets create 3 folders: css, images, js.

2. Download JQuery and JQuery UI from their website and place jquery-1.4.4.min.js and jquery-ui-1.8.8.custom.min.js under the js folder created above. When you download JQuery UI you will see that under their css folder they have a folder called ui-lightness. Place this one under you css folder created above.

3.  In CodeIgniter_1.7.3/system/application/config you must edit config.php file like this:

$config[‘base_url’] = “http://”.$_SERVER[‘HTTP_HOST’].”/CodeIgniter_1.7.3″;

This will set your base url to you root folder.

4. Finally lets create the view. Under the  CodeIgniter_1.7.3/system/application/views create a new view. Let’s call it test.php. Edit it as it follows:

 

<html>

<head>

<title>test</title>

<script src=”<?=base_url()?>/assets/js/jquery-1.4.4.min.js” type=”text/javascript”></script>

<script src=”<?=base_url()?>/assets/js/jquery-ui-1.8.8.custom.min.js” type=”text/javascript”></script>

</head>

<body>

<script>

$(document).ready(function() { $(“test”).datepicker(); });

</script>

<form>

<input type=”text” id=”test” name=”test” />

</form>

</body>

</html>

 

So these are the 4 steps you need to follow in order to set up you JQuery running on you CodeIgniter platform. For the controller that will launch the view above you can watch lots of tutorials on CodeIgniter web site and also on YouTube.

Hope this helps.

Andrei.

Advertisements

About javaxtendsolutions
Java programmer

10 Responses to CodeIgniter datepicker with JQuery

  1. pink, says:

    hi andrei…i tried wt u hv said bt i cdnt get a datepicker……i need ur help…….

    • javaxtendsolutions says:

      hi pink,

      can you give me a sample of your code, ore something so I can see what is wrong?

      Andrei.

      • pink says:

        hi…
        i hv sum basics doubts in codeigniter ll u xplain me…..

      • javaxtendsolutions says:

        Hey Pink,

        Tonight I will post an archive with all the source code from the small project I developed with CodeIgniter and JQuery and I will explain it to you.

        Andrei.

  2. pink says:

    dat too basically in usin jquery in codeigniter…….

  3. pink says:

    hi andrei…
    im a newbie to codeigniter..at present im doin an application in codeigniter in dat i wanna create a datepicker……so dat i tried jquery nd im newbie to dat too……i tried a lot bt i cdnt do it….ur blog is very simple n useful fr newbies lik me…..i hope i cn complete my appllication wid ur help……im eager to ask my doubts to u…so im waitin fr ur reply…….

  4. pink says:

    hey andrei……
    thanks a lot in advance….im sure ur xplanation ll help me a lot……

  5. pink says:

    hi….
    to create a datepicker in codeigniter where i wanna use jquery…datz by mvc concept where i wanna use it,in model r controller…..

  6. Saira Jawaid says:

    @pink you should do it in view. Controller will call that view. Model is used for Database access so, dont go there.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: