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

Question

我有一个剑道网格，其中我有一个日历列，当前显示 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>

有人可以建议。我想做的只是从客户端，我不想从服务器端对此执行任何操作

Answer 1

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

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