Add .datetimepicker to inputbox on load

Question

I'm using a model to load in another page. On the page should be a date picker but it's not showing up. If I just load the page without using the model the date picker works fine.

I realise that because the element I'm trying to bind to doesn't exist yet I need some extra Jquery to bind the .datetimepicker to the element once it's loaded.

         $("#EditContentLog1bt").live("click", function () {
                alert("test1");
            $("#datepick").ready(function () {
                alert("test2");
                $("#datepick").datetimepicker({
                    pickTime: false,
                       format: "dd/MM/yyyy",
                });
            });
        });

I've tried using .load rather than .ready but with .load I don't get to the second alert. With .ready I get to the second alert but the datepicker still doesn't work.

Html:

  <div class="control-group">
    <label for="followup" class="control-label">Date</label>
    <div class="controls">
        <div id="datepick" class="input-append date">
            <input type="text" name="date" value="<?php echo date('d-m-Y', strtotime($contactLog->follow_up_date)); ?>">
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
        </div>
    </div>
</div>
<div class="control-group">
    <label for="followup" class="control-label">Time</label>
    <div class="controls">
        <div id="timepick" class="input-append date">
            <input type="text" name="time" value="<?php echo date('H:i', strtotime($contactLog->follow_up_date)); ?>">
            <span class="add-on">
                <i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
            </span>
        </div>
    </div>
</div>

This doesn't seem to be a z-index issue as I've got the datepicker working in another model but only by using .click rather than .load/.ready.

This is now the model gets called:

<a data-toggle="modal" data-target="#myModal" id="EditContentLog1bt" href="<?php echo site_url('manager/editContactLog/' . base64_encode($this->encrypt->encode($log->id))); ?>" class="btn btn-primary contactLog">Edit</a>

And here's the html for the model:

<div id="myModalform" style="width:700px; margin-left:-380px;" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
 <div class="modal-body">
   <p>One fine body…</p>
 </div>
 <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
 </div>

Use `.on` like `$("#EditContentLog1bt").on("click", function () {` for more info check this [SO question](http://stackoverflow.com/questions/8042576/whats-the-difference-between-jquery-live-and-on) — Praveen, Jul 09 '13 at 11:34
I'm just using the built in Boot Strap function, I'll add the code shortly. — flyersun, Jul 09 '13 at 11:36
you are using default modal of bootstrap which is called from the HTml...i recommned you to use javascript to open the modal.. that should be there in the documentation of bootstrap and call `datetimepicker` after the modal opens — bipen, Jul 09 '13 at 11:42
First, am not sure but is it correct to use the id of div rather than using id of input element ? Also u can write the datetime script inside the html file which is getting loaded in modal. This way it should work — Jigar Jain, Jul 09 '13 at 11:44
Jigar I thought that was odd as well but I'm following the instructions for the plugin I'm using. I believe I'v resolved the issue now. — flyersun, Jul 09 '13 at 11:45

score 1 · Accepted Answer · answered Jul 09 '13 at 12:13

1

try this

$(function() {

$("#open_popup").click(function(){
$("#date").datepicker();
    $( "#dialog" ).dialog({
      height:300,
        width:400 ,
        modal: true});
})

 });

working example

answered Jul 09 '13 at 12:13

Rituraj ratan

9,599
7
32
51

score 0 · Answer 2 · answered Jul 09 '13 at 11:46

0

I've solved the issue:

$('#myModal').on('shown', function () {
    $("#datepick").datetimepicker({
        pickTime: false,
        format: 'dd/MM/yyyy',
    });
});

answered Jul 09 '13 at 11:46

flyersun

887
3
14
35

Add .datetimepicker to inputbox on load

2 Answers2