将 jquery timepicker 添加到网站

Question

我正在尝试添加将 jquery 添加到应用程序中的功能。我试图关注这个jquery website。 我将脚本附加到我的网站中，并将 jquery 网站中提到的 example2 的 div 放在my website 中。但是我的网站仍然没有显示 jquery Timepicker example2。我将非常感谢您的帮助。谢谢

编辑： 我已经添加了代码，但它仍然不起作用。这里是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()

Answer 1

把它放在你的 HTML 文件中：

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

Answer 2

您将“hasDatepicker”类硬编码到输入文本字段中。从您的代码中删除它，因为 jQueryUI 认为该函数已被执行。 jQuery UI 在将 datetimepicker 函数应用到元素之后添加了这个类。

这使 jQUi 不会重复执行相同的工作，也不会直接跳到选项修改。

你有：

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

这样做：

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

jQuery UI 这样做：

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

Answer 3

我没有看到您将日期选择器或时间选择器添加到输入字段的任何位置。

你需要说

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

或

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

根据您需要在文档中准备好脚本以将功能绑定到输入字段。

Answer 4

查看指向您实际测试页面的链接，源 HTML 标记显示您的输入具有 class="hasDatepicker" 属性。请删除这个。它使日期选择器初始化代码短路并阻止小部件正确附加。