将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();
});

我已经对这两种方法进行了一些简短的测试，它们似乎可以满足您的要求。