javascript - how to display kendo month and year calender in grid and on selection saves the first day of the month -

i have kendo grid have calender column showing mm/dd/yyyy. want change display year , month calender . , on month selection, should save first day of month in database.

@{     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 "))))             .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                  (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 validation message form         container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]")         .replacewith(validationmessagetmpl({ field: name, message: errors[0] }))     }  </script> 

can 1 suggest. wanted client side , dont want perform action server side regarding this

this can acheieved through java script only.

$(document).ready(function() {   kendo.culture().calendar.firstday= 1   // create datepicker input html element   $("#datepicker").kendodatepicker();   .... });