0

我正在使用它来添加我的用户可以实时编辑的表格。效果很好！我有一个需要能够编辑的日期字段。我想用其中一个字段添加 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>

我尝试像这样“date_input_ datepicker”将日期选择器添加到 id 中，但它只是中断并且什么都不做。有什么帮助吗？

4

1 回答 1

0

我在那里没有看到datepickerid，所以你的函数调用找不到添加选择器的地方。

您需要将 datepicker 添加到输入字段，所有输入字段都有类编辑框，因此您可以像这样向它们添加 datepicker：

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

那应该行得通。如果只有一些输入是日期，则使用额外的类定义这些输入，然后使用它：

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

接着

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

我已经检查过，当它的关联元素被隐藏/显示时，日期选择器的行为是明智的。但是，在某些情况下可能不会。

另一种可能更灵活的解决方案是在click子例程中初始化日期选择器，并destroy()在输入字段消失时使用该方法。

为此，您将在显示输入字段时启动日期选择器，因此在click函数中您可以添加如下行：

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

（可能在 .show() 调用之前或之后#date_input_）。理想情况下，您应该存储活动元素的 ID，以便可以很好地销毁日期选择器，但您可以过度更改第二个mouseup函数以销毁editbox元素上的任何日期选择器：

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

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

于 2013-09-07T05:19:00.107 回答