將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> 

最新問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 相關問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.