Question

我想使用Kendo Datepicker编辑器，该编辑器的格式为＆＃34; dd-MMM-yyyy＆＃34;，我现在使用Datepicker的代码作为::

@(Html.Kendo().DatePicker()
                      .Name("FromDate")
                      .Format("dd-MMM-yyyy")
                    )

但我想要这样的东西如下图所示:: enter image description here

如上图所示：

1）默认情况下，Datepicker显示格式

2）用户只需输入dd的值，光标会自动移至mmm，当mmm完成后，它会自动转到yyyy

Answer 1

本周安排的最新版Kendo有一个新的Masked Input控件。您可以尝试将这两个控件组合在一起。它可能看起来像这样：

@(Html.Kendo().DatePicker()
    .Name("FromDate")
    .Format("dd-MMM-yyyy")
)

然后使用javascript连接屏蔽输入。这种语法并不准确，但我认为它应该让你走上正确的道路。

<script>
    $(document).ready(function(){
      // Only want the masked input on the input of the control
      $("#FromDate input").kendoMaskedTextBox({
          mask: "**-***-****"
      });
    });
</script>

修改

作为替代方案，您可以使用此处的Digital Bush Masked Input插件：http://digitalbush.com/projects/masked-input-plugin/，它可能如下所示：

<script> $(document).ready(function(){ // Only want the masked input on the input of the control $("#FromDate input").mask('**-***-****'); }); </script>

Answer 2

我认为你可以在kendo scheduler中使用mask jquery。这是我在kendo scheduler中显示日期格式的例子。首先你有下载Mask输入插件，你可以这样做........... .....

    <div class="row form-group">
       <div class="col-xs-6">
         <label for="fname">Start Date (MM/DD/YYYY)</label>
            <input kendo-date-picker k-format="'MM/dd/yyyy'" ng-model="_OrgTicker.StartDate" style="width:100%;" id="dateFormat" />
       </div>
   </div>

这是您在下面给出的脚本

                <script>
                    $(function () {
                        var dateFormat = $("#dateFormat");
                        dateFormat.kendoMaskedTextBox({
                            mask: "00/00/0000"
                        });
                        //dateFormat.kendoDatePicker();
                        //dateFormat.closest(".k-datepicker").add(dateFormat).removeClass("k-textbox");
                    });
                </script>

Answer 3

这是一个自定义日期选择器，它根据日期正则表达式验证输入的日期字符串。您可以将此作为独立的日期选择器或启用了不显眼验证的表单的一部分。

    public static MvcHtmlString KendoDatePicker(this HtmlHelper htmlHelper, string name, string value, int width, string className = "", bool required = false, string formId = "")
    {
        var cssClassName = "";
        cssClassName = required ? String.Format("{0} {1}", className, "required") : className;

        //MM/dd/yyyy, M/dd/yyyy, MM-dd-yyyy, M-dd-yyyy
        var regex = @"^([1-9]|0[1-9]|1[0-2])[- / .]([1-9]|0[1-9]|1[0-9]|2[0-9]|3[0-1])[- / .](1[9][0-9][0-9]|2[0][0-9][0-9])$";

        if (required)
        {
            string elementValidationScript = "";
            if(!String.IsNullOrEmpty(formId))
            {
                elementValidationScript = "$('#" + formId + "').validate().element('#" + name + "');";
            }

            return MvcHtmlString.Create("<script type=\"text/javascript\">" +
             "$(function() {" +
                                      "$.validator.messages.required = '*';" + //If were using unobtrusive validation, this changes the default required validator message to simply an asterisk
                                      "$('#" + name + "').kendoDatePicker();" + //create the date picker
                                       @"function isMMDDYYYYFormat(str, dateControl) { var isMatch = str.match(/" + regex + "/); if(!isMatch) { dateControl.addClass('input-validation-error'); dateControl.val(''); alert('Please enter a valid date value in the following format MM/dd/YYYY') } else { dateControl.removeClass('input-validation-error'); } };" +
                                      "$('#" + name + "').blur(function(e){ isMMDDYYYYFormat($(this).val(), $(this)); " + elementValidationScript + " }); " +
                          "})" +
                          "" +
             "</script>" +
         "<input type=\"text\" size=\"10\" value=\"" + value + "\" id=\"" + name + "\" name=\"" + name + "\" class='datePicker " + cssClassName + "'" + " style=\"width:" + width + "px;\" />");
        }
        else
        {
            return MvcHtmlString.Create("<script type=\"text/javascript\">" +
           "$(function() {" +
                                    "$('#" + name + "').kendoDatePicker();" +
                                     @"function isMMDDYYYYFormat(str, dateControl) { var isMatch = str.match(/" + regex + "/); if(!isMatch) { dateControl.addClass('input-validation-error'); dateControl.val(''); alert('Please enter a valid date value in the following format MM/dd/YYYY') } else { dateControl.removeClass('input-validation-error'); } };" +
                                    "$('#" + name + "').blur(function(e){ $(this).removeClass('input-validation-error'); if($(this).val() != null && $(this).val().length > 0) { isMMDDYYYYFormat($(this).val(), $(this)); }}); " +
                                    "$('#" + name + "').removeAttr('data-val-date');" + //removes the default date validation message 
                        "})" +
           "</script>" +
       "<input type=\"text\" size=\"10\" value=\"" + value + "\" id=\"" + name + "\" name=\"" + name + "\" class='datePicker " + cssClassName + "'" + " style=\"width:" + width + "px;\" />");

        }

具有特定日期格式的Kendo Datepicker编辑器

3 个答案: