將jQuery datepicker函數添加到ajax活動表

Question

我正在使用它來添加一個表，我的用戶可以實時編輯它。 很棒！ 我有一個字段，它是一個需要編輯的日期。 我想用其中一個字段添加jquery“ datepicker ”函數。

這是我的javascript

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $(".edit_tr").click(function()
    {
    var ID=$(this).attr('id');
    $("#date_"+ID).hide();
    $("#starttime_"+ID).hide();
    $("#endtime_"+ID).hide();
    $("#date_input_"+ID).show();
    $("#starttime_input_"+ID).show();
    $("#endtime_input_"+ID).show();
    }).change(function()
    {
    var ID=$(this).attr('id');
    var date=$("#date_input_"+ID).val();
    var start=$("#starttime_input_"+ID).val();
    var end=$("#endtime_input_"+ID).val();
    var dataString = 'id='+ ID +'&date='+ date +'&starttime='+start+'&endtime='+end;
    $("#date_"+ID).html('<img src="load.gif" />');


    if(date.length && starttime.length && endtime.length>0)
    {
    $.ajax({
    type: "POST",
    url: "table_edit_ajax.php",
    data: dataString,
    cache: false,
    success: function(html)
    {

    $("#date_"+ID).html(date);
    $("#starttime_"+ID).html(starttime);
    $("#endtime_"+ID).html(endtime);
    }
    });
    }
    else
    {
    alert('Enter something.');
    }
    });
    $(".editbox").mouseup(function() 
    {
    return false
    });

    $(document).mouseup(function()
    {
    $(".editbox").hide();
    $(".text").show();
    });

    });
    ///////CALLING DATEPICKER FUNCTION///////
    $(function() {
        $( "#datepicker" ).datepicker();
    });
    </script>

和日期字段

<td width="10%" class="edit_td">
<span id="date_<?php echo $id; ?>" class="text"><?php echo date("m/d/y",strtotime($date)); ?></span>
<input type="text" value="<?php echo $date; ?>" class="editbox" id="date_input_<?php echo $id;?>" />
</td>

我嘗試將datepicker添加到ID中，例如“ date_input_ datepicker”，但它只是壞掉了，什么也不做。 有什么幫助嗎？

Answer 1

我在其中看不到datepicker ID，因此您的函數調用找不到添加選擇器的位置。

您需要將datepicker添加到輸入字段，所有輸入字段都具有class editbox，因此您可以像這樣將datepicker添加到它們中：

$(function() {
    $( ".editbox" ).datepicker();
});

那應該工作。 如果只有一些輸入是日期，則使用額外的類定義那些輸入，然后使用該類：

<input type="text" value="<?php echo $date; ?>" class="editbox datebox" id="date_input_<?php echo $id;?>" />

接着

$(function() {
    $( ".datebox" ).datepicker();
});

我已經檢查過，並且當關聯的元素被隱藏/顯示時，datepicker的行為明智。 但是，在某些情況下可能沒有。

另一種可能更靈活的解決方案是在click子例程中初始化datepicker，並在輸入字段消失時使用destroy()方法。

為此，您將在顯示輸入字段時啟動日期選擇器，因此在click函數中，您可以添加以下行：

$("#date_input_"+ID).datepicker(); 

（可能在.show（）調用#date_input_之前或之后）。 理想情況下，您應該存儲活動元素的ID，以便可以很好地銷毀datepicker，但是您可以過度殺掉更改第二個mouseup函數以銷毀editbox元素上的任何datepicker：

$(document).mouseup(function()
{
    $(".editbox").hide();
    $(".editbox").datepicker('destroy'); 
    $(".text").show();
});

我已經對這兩種方法進行了一些簡短的測試，它們似乎可以滿足您的要求。