将 jquery timepicker 添加到网站

Posted 2023-05-07

【中文标题】将 jquery timepicker 添加到网站

【英文标题】：Adding jquery timepicker to website

【发布时间】：2012-04-04 04:31:24

【问题描述】：

我正在尝试添加将 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()

【问题讨论】：

你这样做了吗：$('#example1').datetimepicker();你能发布更多代码吗？

是的，请发布您尝试使用的所有 javascript 和 html 代码。

@Alytrem：不。jquery文件不应该有这个代码吗？

是的，你应该这样做。请参阅下面的回复！

【参考方案1】：

把它放在你的 HTML 文件中：

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

【讨论】：

我已将其添加到头部，但没有更改。我必须将它添加到正文中吗？

你可以，但把它放在你的 jQuery 导入之后

啊，好的。我实际上在关闭 body 标签之前放置了导入脚本。之后我会添加它。谢谢。

【参考方案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">

【讨论】：

谢谢你。删除类属性后它工作正常。感谢您的回答和 lthibodeaux 的回答。

【参考方案3】：

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

你需要说

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

或

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

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

【讨论】：

我已将它添加到头部但没有任何变化。我必须将它添加到正文中吗？

我在您的网站中看到了 script.js。在 document.ready 中添加这一行

我按照你说的做了，但还是不行。我已经相应地更新了问题。

似乎没问题。在导入 JS 时，您是否按以下顺序进行操作：1. jquery 2.jquery UI 3. jqeury timepicker add on 4. scriptjs？

这是我写的：

【参考方案4】：

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

【讨论】：

非常感谢您的回答。