Search code examples
javascriptangularjskendo-uitelerikkendo-grid

How to get today's date as default in kendodatetimepicker in a kendo grid column


I'm working with a kendo grid in which a column consists of kendodatetimepicker. User will be able to edit date and time for only yesterday and today.

So, when he clicks the edit button on the grid the datetimepicker should first show current date and time as default

My grid looks like this--

columns: [
          { field: "EntryType", title: "Entry Type", width: "50px", editor: $scope.typeDropDownEditor, template: "#=EntryType#" },
          { field: "Chemical", title: "Chemical Name", width: "50px", editor: $scope.chemicalDropDownEditor,template: "#=Chemical.ChemicalName#" },
          { field: "Facility", title: "Facility Name", width: "50px", editor: $scope.facilityDropDownEditor, template: "#=(Facility.FacilityName==null)? '' : Facility.FacilityName #" },
          { field: "RecordedDate", title: "Date - Time", format: 'yyyy-mm-dd HH:mm:ss', editor: dateTimeEditor, width: "50px" },
          { field: "Remarks",title:"Remarks",width:"60px"},
        { field: "Volume", title: "Volume", width: "50px" },
        {
            command: [
               {
                   name: "edit", title: "Edit", "template": "<a class='k-button k-grid-edit' href='' style='min-width:40px;' title=\"Edit\"><span class='k-icon k-i-edit'></span></a>"
               },
            ], field: "Actions",title:"Actions", width: "50px"
        }],
 editable: "inline",

datetimepicker editor--

 function dateTimeEditor(container, options) {
    $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoDateTimePicker({
                value: $scope.tdate,
                dateInput: true,
                max: new Date(),
                min: $scope.ydate,
                //template: "#= kendo.toString(kendo.parseDate(value), 'yyyy-mm-dd HH:mm:ss') #"

            });
}

tdate and ydate are defined as--

var today = new Date();
    var yday = today.getDate() - 1;
    var tday = today.getDate();
    var month = today.getMonth();
    var year = today.getFullYear();
    var hour = today.getHours();
    var minute = today.getMinutes();
    var seconds = today.getSeconds();
    $scope.ydate = (new Date(year, month, yday, hour, minute, seconds));
    $scope.tdate = (new Date(year, month, tday, hour, minute, seconds));

Putting current date in value field is not giving the required output


Solution

  • You can try for this.: StartDate is the id of kendoDatePicker, where you want to show the default date:

    Html:

    <input id="datepickerjQuery">
    
    <script>
        var todayDate = kendo.toString(kendo.parseDate(new Date()), 'MM/dd/yyyy');
        $("#datepickerjQuery").data("kendoDatePicker").value(todayDate);
    </script>