datepicker在webgrid mvc4中不能用于行 [英] datepicker not working in webgrid mvc4 for rows

问题描述

Datepicker选择不是第一行以外的工作。请找到以下代码。

Hi,

Datepicker selection is not working other than first row. please find the below code.

<script type="text/javascript" language="javascript">
        $(function () {
           var date = new Date();
           var currentMonth = date.getMonth();
           var currentDate = date.getDate();
           var currentYear = date.getFullYear();

           $(".datepicker").datepicker({
               showOn: "button",
               buttonImage: "/calendar.jpg",
               buttonImageOnly: true,
               buttonText: "Select date",
               minDate: new Date(currentYear, currentMonth, currentDate)
           });
       });

       $(function () {
           $('.edit-mode').hide();
           $('.edit-user, .cancel-user').on('click', function () {

               var tr = $(this).parents('tr:first');
               tr.find('.edit-mode, .display-mode').toggle();
           });

           $('.save-user').on('click', function () {
               var tr = $(this).parents('tr:first');
               var cmpId = tr.find("#EditCompId").val();
               var endDate = tr.find("#EditEndDate").val();

               tr.find("#lblEndDate").text(endDate);
               tr.find('.edit-mode, .display-mode').toggle();
               var url = '@Url.Action("UpdateComplementaryDetails", "Complimentary")';
            url = url + "?complementaryId=" + cmpId + "&endDate=" + endDate;

            window.location.href = url;

        });
    })

</script>

<tr style="width: 100%;">
               <td style="width: 100%;">
                   @{ WebGrid grid = new WebGrid(Model, canPage: true, rowsPerPage: 20); }
                   @if (Model != null)
                   {   @grid.GetHtml(tableStyle: "booking_table",
                    headerStyle: "",
                    alternatingRowStyle: "booking_row",
                    selectedRowStyle: "booking_row",
                    htmlAttributes: new { id = "Benefit Details", style = "Width:100%" },
                    rowStyle: "booking_row", columns: grid.Columns(
                    grid.Column("Action", format: @<text>
                       <img class="edit-user display-mode" alt='Edit' src='@Url.Content("~/Content/Images/Main/edit.jpg")' />
                       <button class="save-user edit-mode">Save</button>
                       <button class="cancel-user edit-mode">Cancel</button>
                       <button class="save-user edit-mode" type="button">
                           Save</button>
                       <button class="cancel-user edit-mode" type="button">
                           Cancel</button>
                       <input id="hdnComplementaryId" type="hidden" value="@item.iComplementaryId" />
                       </text>, style: "col3Width", canSort: false),
                               grid.Column("Name", "Name", format: (item) => item.Name, style: null, canSort: false),
                               grid.Column("Email", "Email", format: (item) => item.Email, style: null, canSort: false),
                               grid.Column("CardName", "Card Name", format: (item) => item.CardName, style: null, canSort: false),
                               grid.Column("StartDate", "Start Date", format: (item) => string.Format("{0:dd-MMM-yyyy}", item.StartDate), style: null, canSort: false),
                               grid.Column("EndDate", "End Date", format: @<text>
                       <span class="display-mode">
                           <label id="lblEndDate">@string.Format("{0:dd-MMM-yyyy}", item.EndDate)</label>
                       </span>
                       <span class="edit-mode">
                           <input  id="EditEndDate" type='text' class='datepicker'  value="@string.Format("{0:dd-MMM-yyyy}", item.EndDate)" />
                           <input id="EditCompId" type="hidden"  value="@item.iComplementaryId"  />
                       </span>
                       </text>, style: "col2Width"),
    grid.Column("Status", "Status", format: (item) => item.Status, style: null, canSort: false)))
                   }
               </td>
           </tr>

谢谢，

Sriram

Thanks,
Sriram

推荐答案

（ function （）{
var date = new 日期（）;
var currentMonth = date.getMonth（）;
var currentDate = date.getDate（） ;
var currentYear = date.getFullYear（）;

(function () { var date = new Date(); var currentMonth = date.getMonth(); var currentDate = date.getDate(); var currentYear = date.getFullYear();

（ 。datep icker）。datepicker（{
showOn： button，
buttonImage： / calendar.jpg，
buttonImageOnly： true ，
buttonText： 选择日期 ，
minDate： new 日期（currentYear，currentMonth，currentDate）
}） ;
}）;

(".datepicker").datepicker({ showOn: "button", buttonImage: "/calendar.jpg", buttonImageOnly: true, buttonText: "Select date", minDate: new Date(currentYear, currentMonth, currentDate) }); });

（ function （）{

这篇关于datepicker在webgrid mvc4中不能用于行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！