jQuery UI datepicker not firing in Codeigniter

Question

What I'm trying to do:

I'm building a form that will insert to a mysql db in Codeigniter(3.0) and one of the fields is supposed to be a publish date. I'm new to CI but have used datepicker before and assumed it would just work.

The relevant code:

From my template header file

<html>
<head>
<meta charset="utf-8">
<title>Add a new comic</title>
<link rel="stylesheet" href="http://foo.com/ci/css/newstyle.css" type="text/css" media="screen">
<link rel="stylesheet" href="http://foo.com/ci/css/style.css" type="text/css" media="screen">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
  $(document).ready(function() {
    $(function() {
        $('#datepicker').datepicker('option', 'dateFormat', 'yy-mm-dd');
    });
  });
  </script>
</head>

From my form.php

<div id="upload">
    <?php 
        echo form_open_multipart('comic/createComic');
        echo form_upload('userfile');
        echo form_input('comic_title', 'Comic Title');
        echo form_input('title_text', 'Hover Test');
    ?>
    <input type="text" id="datepicker" title="publish_date" name="publish_date" value="">
    <?php
        echo form_submit('upload', 'Upload');
        echo form_close();
    ?> 
</div>

From the controller

function createComic() 
{
    $this->load->model('Image_model');

    if($this->input->post('upload'))
    {
        $this->Image_model->do_upload();
    }

    $data = array(
        'comic_filename' => $this->upload->data('file_name'),
        'comic_title' => $this->input->post('comic_title'),
        'title_text' => $this->input->post('title_text'),
        'publish_date' => $this->input->post('publish_date'),
        );
        $this->db->set('uploaded', 'NOW()', FALSE);

    $this->site_model->add_comic($data);
    $this->index();
}

I have an image model and a site model that simply run inserts that are working properly. I am getting a text field that I can manually enter a date into which formats in ISO and inserts without any problems.

The problem is that I get no UI datepicker to load at all. You have to enter the date manually.

The Question:

What am I missing here? I'm sure there is some idiosyncrasy I don't know yet or I am making a simple mistake in syntax and any help is greatly appreciated.

TL;DR:

Can't get a jQuery UI datepicker to load the graphical calendar to allow users to select a date in a form built on the Codeigniter platform. Please see code above and let me know where I am going wrong.

Have you checked the console via some sort of web developer tool (firebug, etc)? Does it show any javascript errors? Also, $(function() { is shorthand for $(document).ready(function() {, so you don't need both. — Jeemusu
– Jeemusu, Commented Jun 24, 2015 at 1:13
I get a warning about my test server running SHA-1, but no errors. I added that after finding an answer on stackoverflow where it solved a similar problem. I didn't have that in originally. — mtrueblood
– mtrueblood, Commented Jun 24, 2015 at 1:14
Well first off, this isn't a php/mysql/codeigniter problem. The datepicker works independently of them, which means it's likely a problem with your HTML/Javascript. I would recommend removing one of the document ready tags. Theres probably no harm in having both of them, but the official example shows just one. — Jeemusu
– Jeemusu, Commented Jun 24, 2015 at 1:18
I pulled that out and no change, but you were right that my error on the format was the problem. Changed to the following appropriate code: $("#datepicker").datepicker({ dateFormat: 'dd-mm-yy' }).val(); You are a huge help — mtrueblood
– mtrueblood, Commented Jun 24, 2015 at 1:23
I just pulled all your code into a clean html file, and it doesn't work...unless I remove the options from your datepicker(). Seems the problem lies there. — Jeemusu
– Jeemusu, Commented Jun 24, 2015 at 1:26

Jeemusu · Accepted Answer · 2015-06-24 01:28:05Z

1

The problem is with the options you are feeding into your initialisation of datepicker()

Try changing it to the below:

    $(function() {
       $('#datepicker').datepicker({
           dateFormat: "yy-mm-dd"
       });
    });

The original format you were using if for setting options after the datepicker has been initialised.

$('#datepicker').datepicker( "option", "dateFormat", "yy-mm-dd" );

answered Jun 24, 2015 at 1:28

Jeemusu

10.5k3 gold badges46 silver badges68 bronze badges

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

1 Comment

mtrueblood Over a year ago

I removed the php/codeigniter/mysql tags as you suggested.

Collectives™ on Stack Overflow

jQuery UI datepicker not firing in Codeigniter

What I'm trying to do:

The relevant code:

The Question:

TL;DR:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I'm trying to do:

The relevant code:

The Question:

TL;DR:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related