如何在网格和选择中显示剑道月份和年份日历可以保存当月的第一天

时间:2016-06-11 14:02:58

标签: javascript asp.net-mvc kendo-asp.net-mvc

我有一个剑道网格,我有一个日历列显示mm / dd / yyyy。 但我想改变只显示年月日历。在月份选择上,应将该月的第一天保存在数据库中。

@{
    ViewBag.Title = "CDS Contract Utilization";
}

<h2>@ViewBag.Title</h2>
&nbsp;
<div class="grid-scrollable">
    @(Html.Kendo().Grid<ViewModels.Admin.CDSUtilizationViewModel>()
            .Name("cdsgrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.Id).Width(150).Hidden(true);
                columns.Bound(c => c.Transaction_Id).Width(150).Hidden(true);
                //columns.Bound(c => c.Contract_Id).Width(150);
                //columns.Bound(c => c.Contractor_Id).Width(150);
                //columns.Bound(c => c.ServiceDetail_Id).Width(150);
                //columns.ForeignKey(p => p.Fund, (System.Collections.IEnumerable)ViewData["FundType"], "Value", "Text");
                columns.ForeignKey(p => p.Contract_Id, (System.Collections.IEnumerable)ViewData["ContractNumber"], "Id", "ContractNumber");
                columns.ForeignKey(p => p.Contractor_Id, (System.Collections.IEnumerable)ViewData["ContractorName"], "Id", "ContractorName");
                columns.ForeignKey(p => p.ServiceDetail_Id, (System.Collections.IEnumerable)ViewData["Id"], "Id", "Id");


                columns.Bound(c => c.ServiceMonth).EditorTemplateName("Date");
                columns.Bound(p => p.UnitsDelivered).EditorTemplateName("Integer"); 

                columns.Command(command => { command.Edit().HtmlAttributes(new { @class = "btn-primary" }); 
                command.Destroy().HtmlAttributes(new { @class = "btn-primary" }); }).Width(300);
            })
            .ToolBar(tools => { tools.Create().Text("Add CDS Utilization Record").HtmlAttributes(new { @class = "btn-primary" }); tools.Excel().Text("Excel").HtmlAttributes(new { @class = "pull-right" }); })
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
            .Selectable()
            .Filterable(f => f.Operators(o => o.ForString(s => s.Clear()
                .Contains("Contains")
                .DoesNotContain("Does not contain")
                .IsEqualTo("Is equal to")
                .IsNotEqualTo("Is not equal to")
                .StartsWith("Starts with")
                .EndsWith("Ends with "))))
            .Resizable(resize => resize.Columns(true))
            .Events(e => e.Edit("oncdsutilizationGridEdit"))
            .Excel(excel => excel.FileName("CDSUtilization.xlsx").Filterable(true).AllPages(true))
            .DataSource(dataSource => dataSource.Ajax().PageSize(10).Model(model => { model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); })
                    .Read(read => read.Action("CDSUtilizationRead", "CDSContractUtilization"))
                    .Create(create => create.Action("CDSUtilizationCreate", "CDSContractUtilization"))
                    .Update(update => update.Action("CDSUtilizationUpdate", "CDSContractUtilization"))
                    .Destroy(destroy => destroy.Action("CDSUtilizationDestroy", "CDSContractUtilization"))
            .Events(events => events.Error("error"))))
</div>



<script type="text/kendo-template" id="message">
    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error validationErrorWidget" data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
        <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div>
    </div>
</script>

<script id="deletevalidation" type="text/x-kendo-template">
    <p class="delete-message">#=message# .</p>
    <button class="delete-confirm k-button">OK</button>
</script>

<script type="text/javascript">

    function oncdsutilizationGridEdit(e)
    {
        if (e.model.UnitsDelivered == 0)
        {
            e.model.set("UnitsDelivered", "");
        }
    }

    $(function () {
        $("form").kendoValidator();
    });

    var validationMessageTmpl = kendo.template($("#message").html());
    var validationMsg = kendo.template($("#deletevalidation").html());


    function error(args) {

        if (args.errors) {
            var grid = $("#cdsgrid").data("kendoGrid");
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // cancel grid rebind if error occurs

                for (var error in args.errors) {

                    if (!error) {
                        var kendoWindow = $("<div />").kendoWindow({
                            title: "Validation",
                            resizable: false,
                            modal: true,
                            height: "150px",
                            width: "500px"
                        });

                        kendoWindow.data("kendoWindow")
                            .content(validationMsg({ message: args.errors[error].errors[0] }))
                            .center().open();
                        kendoWindow
                           .find(".delete-confirm")
                               .click(function () {
                                   kendoWindow.data("kendoWindow").close();
                               })
                               .end()
                    } else {
                        showMessage(grid.editable.element, error, args.errors[error].errors);
                    }

                }
            });
        }

    }

    function showMessage(container, name, errors) {

        //add the validation message to the form
        container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]")
        .replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))
    }

</script>
有些人可以建议。 我想做的就是从客户端,我不想从服务器端执行任何有关此

的操作

1 个答案:

答案 0 :(得分:0)

这只能通过java脚本来实现。

$(document).ready(function() {
  kendo.culture().calendar.firstDay= 1
  // create DatePicker from input HTML element
  $("#datepicker").kendoDatePicker();
  ....
});