Datepicker using CodeIgniter JavaScript

Question

How to use date picker in Codeigniter?
My view part looks like this

<html>
<head>

<link  href="css/CalendarControl.css" rel="stylesheet" type="text/css">

<script language="javascript" src="js/CalendarControl.js"></script>
</head>
<body>
<table>
<tr>

<td><input name="txtdatefrom" type="text" id="txtdatefrom" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="From" onKeyPress="return disableEnterKey(event)"/></td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<td><input name="txtdateto" type="text" id="txtdateto" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="To" onKeyPress="return disableEnterKey(event)"/></td>
<td><input type="submit" value="submit" name="submit" id="submit" /></td>

</tr>
</table>
</body>
</html>

And my controller

public function calender(){

    $this->load->view('news/calender1');
}

Dimple · Accepted Answer · 2015-04-22 11:41:50Z

1

install datecker's js then call function datepicker() using jQuery on id on which you want date.

answered Apr 22, 2015 at 11:41

Dimple

451 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gopesh Sharma Over a year ago

Please explain more by an example

Dimple Over a year ago

include this js to your code. <script rel="stylesheet" href="/calender/js/jquery.ui.datepicker.js" ></script> by downloading it. also include <link rel="stylesheet" href="/js/calender/js/jquery-ui/css/smoothness/jquery-ui-1.8.1.custom.css" /> for disign. Then write <script type="text/javascript"> $(function() { $( "#datepicker" ).datepicker(); }); </script>... that #datepicker is id of input type text. when you click on that textfield u will get calender.

Digital Alchemist · Accepted Answer · 2013-08-21 09:11:52Z

0

This might help you out: Using Datetime picker

Or for Codeigniter:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker Example 1</title>
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
    $(function(){
        $("#date").datepicker();
    });
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
</body>
</html>

edited Aug 21, 2013 at 9:11

answered Aug 21, 2013 at 6:01

Digital Alchemist

2,3321 gold badge16 silver badges17 bronze badges

2 Comments

Digital Alchemist Over a year ago

@namratha Updated the code , kindly resolve jquery dependencies, its working with me!

Digital Alchemist Over a year ago

@namratha the action you want to perfom requires any type of javascript, i have used jquery which is Javascript as well.

user5907059 · Accepted Answer · 2016-03-03 07:30:40Z

Download the jquery.ui for datepicker from the internet and put the file in your folder.the file is stored in assessts/js/jquery_ui.the stored location is on your wish

1. jquery-ui.css
2. jquery-ui.js
3. jquery-ui.min.js

provide the css link in head section

<link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">

provide the javascript in body section

<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
    <script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>

your code be look like this

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">

    <script type="text/javascript">
        $(function(){
            $("#date").datepicker();
        });
    </script>
    </head>
    <body>
    <label>Enter a date: </label><input id="date">

<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
        <script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>  

 </body>
    </html>

and finally in control load the view and javascript library

Draken · Accepted Answer · 2016-12-30 12:34:44Z

0

include datepicker js and see the result.

<div class="text">
<?php
$data = array(
    'name' => "registration_date",
    'id' => "registrationDate",
    'class' => "datepicker",
    'readonly' => "true",
    'value' => $this->input->post('registration_date')
);
echo form_input($data);
?>
<span class="text-error"><?php
echo form_error('registration_date');
?></span></div>

edited Dec 30, 2016 at 12:34

Draken

3,19614 gold badges38 silver badges56 bronze badges

answered Dec 30, 2016 at 12:11

savaj patel

1

Collectives™ on Stack Overflow

Datepicker using CodeIgniter JavaScript

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related