Adding jquery timepicker to website

Question

I am trying to add the functionality of adding jquery into an application. I have tried to follow this jquery website. I attached the script into my website and also placed the div of example2 mentioned in the jquery site in my website. But my website still does not show the jquery Timepicker example2. I would be very thankful for the help. Thanks

EDIT: I have added the code but it still does not work. Here is the script.js:

$(document).ready(function(){
    /* The following code is executed once the DOM is loaded */

    $(".todoList").sortable({
        axis        : 'y',              // Only vertical movements allowed
        containment : 'window',         // Constrained by the window
        update      : function(){       // The function is called after the todos are rearranged

            // The toArray method returns an array with the ids of the todos
            var arr = $(".todoList").sortable('toArray');


            // Striping the todo- prefix of the ids:

            arr = $.map(arr,function(val,key){
                return val.replace('todo-','');
            });

            // Saving with AJAX
            $.get('ajax.php',{action:'rearrange',positions:arr});
        },

        /* Opera fix: */

        stop: function(e,ui) {
            ui.item.css({'top':'0','left':'0'});
        }
    });

    // A global variable, holding a jQuery object 
    // containing the current todo item:

    var currentTODO;

    // Configuring the delete confirmation dialog
    $("#dialog-confirm").dialog({
        resizable: false,
        height:130,
        modal: true,
        autoOpen:false,
        buttons: {
            'Delete item': function() {

                $.get("ajax.php",{"action":"delete","id":currentTODO.data('id')},function(msg){
                    currentTODO.fadeOut('fast');
                })

                $(this).dialog('close');
            },
            Cancel: function() {
                $(this).dialog('close');
            }
        }
    });

    // When a double click occurs, just simulate a click on the edit button:
    $('.todo').live('dblclick',function(){
        $(this).find('a.edit').click();
    });

    // If any link in the todo is clicked, assign
    // the todo item to the currentTODO variable for later use.

    $('.todo a').live('click',function(e){

        currentTODO = $(this).closest('.todo');
        currentTODO.data('id',currentTODO.attr('id').replace('todo-',''));

        e.preventDefault();
    });

    // Listening for a click on a delete button:

    $('.todo a.delete').live('click',function(){
        $("#dialog-confirm").dialog('open');
    });

    // Listening for a click on a edit button

    $('.todo a.edit').live('click',function(){

        var container = currentTODO.find('.text');

        if(!currentTODO.data('origText'))
        {
            // Saving the current value of the ToDo so we can
            // restore it later if the user discards the changes:

            currentTODO.data('origText',container.text());
        }
        else
        {
            // This will block the edit button if the edit box is already open:
            return false;
        }

        $('<input type="text">').val(container.text()).appendTo(container.empty());

        // Appending the save and cancel links:
        container.append(
            '<div class="editTodo">'+
                '<a class="saveChanges" href="#">Save</a> or <a class="discardChanges" href="#">Cancel</a>'+
            '</div>'
        );

    });

    // The cancel edit link:

    $('.todo a.discardChanges').live('click',function(){
        currentTODO.find('.text')
                    .text(currentTODO.data('origText'))
                    .end()
                    .removeData('origText');
    });

    // The save changes link:

    $('.todo a.saveChanges').live('click',function(){
        var text = currentTODO.find("input[type=text]").val();

        $.get("ajax.php",{'action':'edit','id':currentTODO.data('id'),'text':text});

        currentTODO.removeData('origText')
                    .find(".text")
                    .text(text);
    });


    // The Add New ToDo button:

    var timestamp=0;
    $('#addButton').click(function(e){

        // Only one todo per 5 seconds is allowed:
        if((new Date()).getTime() - timestamp<5000) return false;

        $.get("ajax.php",{'action':'new','text':'New Todo Item. Doubleclick to Edit.','rand':Math.random()},function(msg){

            // Appending the new todo and fading it into view:
            $(msg).hide().appendTo('.todoList').fadeIn();
        });

        // Updating the timestamp:
        timestamp = (new Date()).getTime();

        e.preventDefault();
    });

    //for box that asks for date and time
    $('#example2').datetimepicker({
    ampm: true
});
}); // Closing $(document).ready()

Did you do this: $('#example1').datetimepicker(); Can you post more code? — Alytrem, Mar 19 '12 at 16:59
Yes, please post all the javascript and html code that you're trying to use to make this work. — Milimetric, Mar 19 '12 at 17:02

score 2 · Answer 1 · answered Mar 19 '12 at 17:05

2

Put this in your HTML file:

<script language="javascript"> 
$(function() {
    $('#example2').timepicker();
});
</script>

answered Mar 19 '12 at 17:05

Alytrem

2,620
1
12
13

I have added it in the head but no change. Do I have to add it in the body? – Mar 19 '12 at 17:10
You can, but put it after your jQuery import – Alytrem Mar 19 '12 at 17:13
Ah, okay. I actually putted the import script before closing the body tag. I will add it after that. Thanks. – Mar 19 '12 at 17:15

score 1 · Answer 2 · answered Mar 19 '12 at 17:03

1

I dont see anywhere you added the datepicker or timepicker to your input field.

You need to say

$('#example2').timepicker({});

or

$('#example2').datetimepicker({
    ampm: true
});

depending on your need in the document ready of your script to bind the functionality to the input field.

answered Mar 19 '12 at 17:03

Prasanna

10,956
2
28
40

I have added it in the head but no change. Do I have to add it in the body? – Mar 19 '12 at 17:11
I saw script.js in your site. Add this line there inside document.ready – Prasanna Mar 19 '12 at 17:14
I followed as you said but still it does not work. I have updated the question accordingly. – Mar 19 '12 at 17:24
seems to be fine. While importing JS did you do it in the foll order: 1. jquery 2.jquery UI 3. jqeury timepicker add on 4. scriptjs? – Prasanna Mar 19 '12 at 17:27
Here is what I wrote: – Mar 19 '12 at 17:29
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/9059/discussion-between-prasann-and-akito) – Prasanna Mar 19 '12 at 17:30
Please see this question. An answer says that it has been working fine. The answer has got 150 votes. http://stackoverflow.com/questions/1245245/jquery-date-time-picker – Mar 22 '12 at 15:18

score 1 · Accepted Answer · answered Mar 26 '12 at 23:29

You have the class 'hasDatepicker' hardcoded onto the input textfield. Remove this from your code, as jQueryUI thinks the function has already been executed. jQuery UI adds this class AFTER applying the datetimepicker function to the element.

This keeps jQUi from doing the same job twice as well as skipping straight to option modification.

You have:

<input id="example2" class="hasDatepicker" type="text" value="" name="example2">

Do this:

<input id="example2" type="text" value="" name="example2">

jQuery UI does this:

<input id="example2" class="hasDatepicker" type="text" value="" name="example2">

Thankyou.It worked fine after removing the class attribute. Thanks to your answer and lthibodeaux's answer. — , Mar 28 '12 at 02:14

score 1 · Answer 4 · answered Mar 27 '12 at 20:13

Looking at the link to your actual test page, the source HTML markup reveals that your input has the attribute class="hasDatepicker" on it. Please remove this. It is short-circuiting the datepicker initialization code and preventing the widget from being attached correctly.

Adding jquery timepicker to website

4 Answers4