标签: kendo-datepicker

我想在清除按钮单击时将今天日期设置为Kendo DatePicker.我试过跟随,但它不起作用.

$('#btnClear').click(function () {
  $("#StartDate").data("kendoDatePicker").value(new Date());
});

上面的代码不会给出任何错误,也不会设置今天的日期.它清除了kendo DatePicker的文本框值.注意:Kendo DatePicker格式为MM/dd/yyyy.

我正在尝试使用下面的代码设置我的DatePicker的值,并期望"更改"事件被提升但事实并非如此.

var datePicker = $("#datePicker").data("kendoDatePicker");
var previousDate = new Date(datePicker.value());
previousDate.setDate(previousDate.getDate() - 1);
$("#displayDate").text(kendo.toString(new Date(previousDate), 'D'));
datePicker.value(previousDate);

通过用户界面更改日期值确实按预期引发"更改"事件.

我正在开发一个 asp.net - angular 5 web 应用程序，我需要加载一个带有空字段的组件来填充，其中一些字段是 KendoDatePicker（用于 Angular），我需要选择是否选择（插入）日期，当我加载组件时日期未定义，并且出现此错误：

错误：“值”应该是有效的 JavaScript 日期实例。检查http://www.telerik.com/kendo-angular-ui/components/dateinputs/datepicker/#toc-using-with-json以获得可能的解决方案。

现在，我已经阅读了文档并尝试了这个 stackblitz 示例完美的工作：

import { Component } from '@angular/core';

@Component({
selector: 'my-app',
template: `
    <div class="example-config">
        Selected value is: {{exampleDate| kendoDate:'MM/dd/yyyy'}}
    </div>
    <div class="example-wrapper" style="min-height: 400px">
        <p>Select a date:</p>
        <kendo-datepicker
            [(ngModel)] = "exampleDate"
            placeholder="inserisci una data..."
        ></kendo-datepicker>
    </div>
    `
  })
export class AppComponent {
 public exampleDate: Date;

   constructor()
   {
    //undefined (as I want before the selection, browser consolle does not 
    return error)
    console.log(this.exampleDate);
   }
 }

这就是我的项目（component.ts）中的内容： …

我有以下控件:

@(Html.Kendo().DatePickerFor(model => model.Attributes.DueDate)
    .HtmlAttributes(new { 
        ID = "idSurvey_DueDate", 
        @data_bind = "value: DueDate", 
        @Class = "report-label datepicker surveyAttributesData", 
        TabIndex = 3 })
    .Min(DateTime.Now)                                                            
)

以下jquery:

$("#idSurvey_DueDate").kendoValidator({
    rules: {
        dateValidation: function (e) {
            var currentDate = kendo.parseDate($(e).val());
            // Check if date parse was successful
            if (!currentDate) {
                return false;
            }
            return true;
        }
    },
    messages: {
        dateValidation: "Invalid Date!",
        min: "Date must not be in the past!"
    }
});

当我测试它并输入无效日期时,我得到的消息不是我所期望的.相反,它是"字段DueDate必须是日期".这个神秘信息来自哪里,为什么不使用我在验证器中放置的消息属性？我想要的是不允许无效的日期格式以及日期不是过去.因此必须执行最低要求.

正如在DateTimePicker/Basic使用中可以看到的那样,我在下面使用的示例设置当前小时12:00 AM而不是DateTime.Now,当按下DateTimePicker页脚的链接时.怎么解决？

@(Html.Kendo().DateTimePickerFor(m => m.VisitDate)
    .Animation(true)
    .Format("dd/MM/yyyy HH:mm")
    .TimeFormat("HH:mm")
    .Min(new DateTime(1900, 1, 1)) 
    .Max(new DateTime(2099, 12, 31)) 
    .Footer(true)
    .Value(DateTime.Now) 
)

之前:

后:

链接插入午夜 - 但这感觉不对.

你如何让它插入当前时间呢？

更新:这是我在最后一步使用的DateTimePicker和javascript方法:

@{
    ViewBag.Title = "Create";
    Layout = "~/Views/Shared/_Layout.cshtml";
    var today = DateTime.Now.ToString("dd/MM/yyyy 00:00", 
                    new System.Globalization.CultureInfo("en-US"));
}


@(Html.Kendo().DateTimePicker()
    .Name("datetimer")
    .Animation(true)
    //.Culture("en-US")
    .TimeFormat("HH:mm")
    .Min(new DateTime(1900, 1, 1)) 
    .Max(new DateTime(2099, 12, 31)) 
    .Value(DateTime.Now)
    .Format("dd/MM/yyyy HH:mm")
    .Events(e => e.Change("datetimepicker_change"))
)


<script>
function datetimepicker_change() {
    // I use this method so that when selecting …

我正在使用 kendo 日期选择器，并且在弹出日历的底部添加了一个文本区域，供用户在更改日期时添加评论。当日期选择器显示时，我会显示评论区域，但是当我单击文本区域输入评论时，日历会关闭。我尝试在日期选择器的关闭事件上使用 e.preventDefault() 但它永远不会关闭。

有没有办法在单击日期选择器外部的已知容器时阻止剑道日期选择器日历弹出窗口关闭？

代码：

网页：

<div class="date-comment-wrapper">
    <textarea id="date-comment" cols="30" rows="5"></textarea>
    <button class="pull-right" id="date-change-submit">Submit Change</button>
</div>

CSS：

.date-comment-wrapper {
    padding: 10px;
    border: 1px solid #c5c5c5;
    width: 225px;
    position: absolute;
    top: 0px;
    left: 0px;
    display:none;
    background-color: white;
    border-radius: 0 0 4px 4px;
}

Javascript 在日期选择器下定位：

var commentDiv = $('.date-comment-wrapper'),
    paddingPlusBorder = 22,
    calendarTopElement = $('.k-animation-container'),
    width = parseFloat(calendarTopElement.css('width')) - paddingPlusBorder,
    height = parseFloat(calendarTopElement.css('height')),
    textArea = commentDiv.children('#date-comment'),
    top = parseFloat(calendarTopElement.css('top')),
    left = parseFloat(calendarTopElement.css('left'));

commentDiv.css({
    width: width,
    left: left,
    top: …

我有一个Kendo Datepicker,我在Kendo Window中显示它,它显示如下:

Datepicker以某种方式膨胀,比通常的字体和大小更大.在Kendo窗口之外,日期选择器显示正常.现在,我想知道我是否可以调整日期选择器或其中的字体,假设缩小字体也会缩小日期选择器的大小.

我试过把它添加到CSS中:

.k-popup .k-calendar {
   font-size: 10px !important;
}

结果很奇怪:

它只是部分工作,因为只有月份名称减少,数字仍然很大......

主要问题是,当打开日期选择器时,它会溢出kendo窗口维度:我正在寻找一种解决方案,允许我缩小日期选择器的尺寸以使其适合.

编辑

我试着添加这个k-calendar类:

@(Html.Kendo().DatePicker()
    .Name("concessionTOD")
    .Start(CalendarView.Month)
    .Value(DateTime.Now)
    .Format("yyyy-MM-dd")
    .Culture("pt-PT")
    .HtmlAttributes(new { @class = "k-calendar" })
)

但结果如下:

你可以在上面的图片中看到输入和月份名称的大小确实减少了,但是日历本身保持臃肿.

编辑2

我了解到,如果窗口被定义为iFrame,内部结果可能会有所不同,因为iFrame作为常规网页需要DOCTYPE以及html,head和body标签.我将此添加到插入窗口的部分视图中,结果如下:

因此,日历不再膨胀,但仍然溢出窗口的高度,导致滚动条出现.要访问日历的下半部分,我必须使用滚动.如前所述,我希望日历在窗口外溢出,如OnaBai的回答所示,而不创建任何滚动条.

另外,我在文档中发现了

Refreshes the content of a Window from a remote URL or the initially defined content template. Note that passing data and non-GET requests cannot be sent to an iframe, as they require a form with a target attribute.

我不确定如何解释第二句,但它可能有助于处理这个问题.

我在我的应用程序中使用2个kendo日期选择器:

<div class="span12">
    <div class="span2" style="text-align: right">
        Start Date:
    </div>
    <div class="span2">
        @(Html.Kendo().DatePickerFor(m=>m.StartDate))
    </div>
    <div class="span2" style="text-align: right">
        End Date:
    </div>
    <div class="span2">
        @(Html.Kendo().DatePickerFor(m=>m.EndDate))
    </div>
    <div class="span4">
        <button class="btn btn-primary" onclick="getGraphData()">Show</button>
    </div>
</div>

单击该按钮时,我会读取这些日期选择器客户端的值,并向API控制器发出POST.

我遇到的问题有时是DateTime参数被错误地解析,我使用的是en-GB文化(在我的web.config中指定),但是给定日期为2014年3月1日(3月1日),当值为由模型装订器处理,它被解释为03/01/2014(1月3日).

我的javascript如下:

function getGraphData() {

        var startDatePicker = $("#StartDate").data("kendoDatePicker");
        var endDatePicker = $("#EndDate").data("kendoDatePicker");
        var param = {
            StartDate: kendo.toString(startDatePicker.value().toLocaleDateString(), "dd/MM/yyyy"),
            EndDate: kendo.toString(endDatePicker.value().toLocaleDateString(), "dd/MM/yyyy")
        };
       // Do post here

    }

我的模型如下:

public class DateRangeParam
    {
        #region Constructors and Destructors

        /// <summary>
        /// Initializes a new instance of …

我以这种方式设置日期格式：

$('#filterdate').kendoDatePicker({format: "dd/MM/yyyy"});

我在某处设置了代码（#filterdate）

#filterdate是10/7/2014

但是当我使用此代码时：

$('#filterdate').data("KendoDatePicker").value();

返回：2014年6月10日

为什么日期不同？这真的很奇怪。我认为初始化剑道（也许）有问题。

$("#monthpicker").kendoDatePicker({
  // defines the start view
  start: "year",

  // defines when the calendar should return date
  depth: "year",

  // display month and year in the input
  format: "MMMM yyyy"
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css" rel="stylesheet" />

<input id='monthpicker' style='width:150px' />

这就是我所做的.我希望在特定月份之后禁用所有月份.
例如:我想在2014年10月之后禁用所有月份.请注意,kendo datepicker定义为start:"year"".

这是我的日期选择器的代码:

<div class="editor-field">
                    @(Html.Kendo().DatePickerFor(model => model.Date)
                        .HtmlAttributes(ViewBag.Disabled ? (object)new { @class = "formDatePicker", disabled = "disabled", @id = "Date", style = "width:150px", placeholder = "Select Date" } : new { @class = "formDatePicker", @id = "Date", style = "width:150px", placeholder = "Select Date" })
                        .Events(e => e.Open(@<text>function(e){BrowserCompatibility.DisableDatePickerYearsOnSomeBrowsers(e);}</text>))
                        .Format(@HCulture.GetShortDateFormat())
                        .Events(e => e.Change(@<text>function(e){
                            $("#DateString").val($('#Date').val());
                            checkInputValid();
                            }</text>))
                    )
                </div>

我试过这个解决方案,但它不起作用:

 var datePicker = $("#Date").data('kendoDatePicker');
 datePicker.input.val(input.attr('placeholder'));

我在我的应用程序中使用Kendo UI控件.最近我在使用FireFox时发现了一个很大的Kendo控件问题.

我发现一些Kendo UI控件在firefox中无法正常工作.

喜欢: - KendoDatePicker,Kendo().Dropdownlist().

1)KendoDatePicker(): -

当我使用$("#DatePicker").KendoDatePicker()然后在Firefox中没有显示KendoDatePicker日历.

我发现firefox没有使用Kendo.default.min.css.但是,当我使用IE或Chrome检查类似功能时,它正在运行.并采取上述CSS.

2)Html.Kendo().DropDownList(): -

如果我用鼠标更改Dropdownlist项而不是替换firefox中的项.但在其他浏览器中运行良好.

以下是Dropdownlist的代码: -

@using Kendo.Mvc.UI
@model string

@(Html.Kendo().DropDownList()
.Name("SelectedCategory")  
.DataTextField("Text")
.DataValueField("Text")
.Value(Model)       
.BindTo(ViewBag.Categories)    
)

任何人都可以帮我解决这个问题吗？Kendo UI Controls和FireFox有任何默认问题吗？

我需要向 Kendo DataPicker 对象添加 data- 属性。

然而，我没有看到一种直观的方法来做到这一点。只有“name”和“htmlattributes”，它们似乎只接受“style”、“title”和“id”。

我需要这个来进行 jQuery 操作，所以没有其他方法可以解决它。

这是我到目前为止所拥有的：

<div>
@(Model.FieldLabel): @(Html.Kendo().DatePicker()
    .Name("valueToGet")
    .Value(Model.FieldValue)
    .HtmlAttributes(new { style = "width: 100%", title = Model.FieldLabel, id = Model.FieldId.ToString()})
    .Deferred()        
    )
</div>