将jquery timepicker添加到网站

Question

我想添加jquery添加到应用程序的功能。我试图按照这jquery website。 我将脚本附加到我的网站上，并且还在my website中放置了jquery站点中提到的example2的div。但我的网站仍然没有显示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

你必须硬编码到输入文本框类 '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用户界面做到这一点：

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

Answer 2

我没有看到任何你添加的日期选择器或timepicker您输入字段。

你需要说

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

或

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

取决于你的文件准备好你的脚本绑定功能，输入字段的需要。

Answer 3

在HTML文件中加上：

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

Answer 4

望着链接到你的实际测试页面，源HTML标记显示你的输入有它的属性class="hasDatepicker"。请删除这个。它将datepicker初始化代码短路并阻止正确连接小部件。