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

i have a kendo grid where i have a calender column currently showing mm/dd/yyyy. but i want to change to display only year and month calender . and up on month selection, should save the first day of the month in database.

我有一个剑道网格,我有一个目前显示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>

can some one suggest. all i wanted to do is from the client side and i dont want to perform any action from the server side regarding this

有人建议。我想做的就是从客户端,我不想从服务器端执行任何关于此的操作

1 个解决方案

#1

this can be acheieved through java script only.

这可以通过java脚本来实现。

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