AngularJS下使用Kendo的DatePicker控件日期有时不显示

在AngularJS下使用Kendo的DatePicker控件时,在k-ng-model绑定了日期对象,但是页面在显示时,有时控件显示空白,但是有时又正常,具有一定随机性,在stackoverflow中也没找到类似状况和解决方法,经过分析跟踪后,确认问题是DatePicker控件的问题,控件说明文档中所述ng-model和k-ng-model是有区别的:

  • The first is to demonstrate the difference between ng-model="dateString" and k-ng-model="dateObject"dateString is bound to the input field‘s contents as a string — so it gets the formatted string date, while dateObject is bound to the widget‘s value() which in the case of DatePicker returns a JS Date object. As you can see, we can apply the Angular date filter on it.

ng-model绑定的是一个string类型的变量,k-ng-model则绑定一个对象变量,在两者都绑定的情形下,控件显示的是ng-model绑定的变量,所以可以把控件的ng-model和k-ng-model都赋值,这样就能保证值正常又显示正确。

HTML代码:

<input kendo-date-picker k-ng-model="datestart" ng-model="datestartString" />

JavaScript代码:

$scope.datestart = new Date();
$scope.datestartString = $scope.datestart.getFullYear() + ‘-‘ + ($scope.datestart.getMonth() + 1) + ‘-‘ + $scope.datestart.getDate();

有一点要注意,js日期对象的getMonth返回的月份为0到11,所以上面代码中才加了1。

时间: 2024-10-06 23:13:06

AngularJS下使用Kendo的DatePicker控件日期有时不显示的相关文章

iOS开发-DatePicker控件

时间控件不管是Android还是iOS中都是必然存在的一个控件,具体的效果大同小异,显示日期,时间,iOS中有四种方式可以选择,Time, Date,Date and Time  , Count Down Timer,Demo比较简单,需要一个DatePicker控件和一个Button显示时间或者日期,具体实现如下: 页面布局 Main.storyboard布局: Y 效果: 代码实现 首先将控件拖入ViewController.h中,将Button的点击拖入ViewController.m中:

C# Winform学习---MDI窗体的设计,PictureBox控件(图片上一页下一页),Timer控件,MenuStrip控件

一.MDI窗体的设计 1.MDI简介 MDI(Multiple Document Interface)就是所谓的多文档界面,与此对应就有单文档界面 (SDI), 它是微软公司从Windows 2.0下的Microsoft Excel电子表格程序开始引入的,Excel电子表格用户有时需要同时操作多份表格,MDI正好为这种操作多表格提供了很大的方便,于是就产生了MDI程序 2.效果图: 如下图所示,多窗体嵌套,其中一个是父窗体,其条是子窗体. 横向排列下面的窗体: 纵向排列下面的窗体: 关闭全部子窗

.NET平台下的流程图及图表控件FlowChart

FlowChart.NET是一款专业的.NET平台下的流程图及图表控件,它可以运行在任何C#, VB.NET或Delphi.NET语言编写的软件中.能够帮助你创建工作流程图.对象层次和关系图.网络拓扑图.实体关系图.IVR.工业自动化.genealogy trees .算法流程图.组织结构图.XML文档.类图等,该控件可轻松的整合到您的应用程序中,且不需要太多的程序编写.详细的文档可帮助您快速掌FlowChart.NET的使用方法,且包含了多种编程语言的实例.FlowChart.NET提供多种功

Jquery+json绑定带层次下拉框(select控件)

一.实现的效果图 二.主要代码 html代码 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> Jquery代码 var html = ['<option value="0">不选父级模块</option>'];

(四) kendo UI 模板控件template使用与注意事项

<script id="index" type="text/x-kendo-template"></script> ======================================================= <script id="index" type="text/x-kendo-template"> <span>Hello World!</span&

Android下在onCreate中获取控件的宽度和高度(通过回调)

有时候需要在onCreate方法中知道某个View组件的宽度和高度等信息, 而直接调用View组件的getWidth().getHeight().getMeasuredWidth().getMeasuredHeight().getTop().getLeft()等方法是无法获取到真实值的,只会得到0. 这是因为View组件布局要在onResume回调后完成. 下面提供实现方法: 第一种: onGlobalLayout回调会在布局完成时自动调用 img1.getViewTreeObserver().

Android开发之DatePicker控件与TimePicker控件

DatePicker控件继承自FrameLayout类,日期选择控件的主要功能是向用户提供包含年.月.日的日期数据并允许用户对其修改. TimePicker控件继承自FrameLayout类,向用户显示一天中的时间,允许用户对其进行修改. DatePicker控件的方法: 1.init() 初始化DatePicker日期选择控件,设置初始显示的年份.月份.日数,设置日期更改监听器.其中有一个monthOfYear参数为初始月份,实际显示的月份是此处设置的值加1. 2.OnDateChangedL

Asp.net绑定带层次下拉框(select控件)

1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server"> <option value="0" data="|0|">不选父级类</option> </select> 备注:查看源代码 4.后台代码 using System; using System.Data; using System.Web.UI.WebControl

带农历日历的DatePicker控件!Xamarin控件开发小记

原文:带农历日历的DatePicker控件!Xamarin控件开发小记 闲来无事开发了个日期选择控件,感兴趣的同学前往: https://github.com/MatoApps/Mato.DatePicker Mato.DatePicker 说明 这是一个带有农历日历的日期选择Xamarin控件 可以指定初始日期 多选和单选日期 引用 PCL:https://www.nuget.org/packages/Mato.DatePicker.PCL/ Android:https://www.nuget