layDate日期选择插件使用npm安装好像是行不通的,但angular2+的日期选择控件库又不能够支持时分秒的选择

在angular项目中引用layDate

1. 首先官网下载layDate独立版,把laydate文件夹下的文件放入assets文件夹下

2. 在angular-cli.json文件里添加

"styles": [
"assets/theme/default/laydate.css"
],
"scripts": [
"assets/laydate.js"
],

3. 打开laydate.js文件搜索 modules/laydate/":"theme/

改为 modules/laydate/":"assets/theme/

4. 使用的时候在组件ts里声明,然后在页面初始化的时候创建实例

html页面

<input type="text" id="s" />

ts文件

declare let laydate;

ngOnInit() {
laydate.render({
elem:'#s', // s为页面日期选择输入框的id
type:'datetime',
theme:'#0c6acf',
done:(value, date, endDate)=>{
this.addleaveApplyParams.startLeave = value
console.log(value)
console.log(date)
console.log(endDate)
}
})
}

以上,就可以在angular项目中使用laydate~更多用法见官网

angular2+ 引用layDate日期选择插件的更多相关文章

  1. 移动设备日期选择插件(基于JQUERY)

    上周花了2个小时写的一个日期选择插件,比较适合移动端的设备.先看个效果图吧.如果刚好是你需要的就往下吧,不需要的也可以继续..... 其实网络上已经有的了类似的成熟插件,比如基于mobiscroll, ...

  2. 贴近用户体验的jQuery日期选择插件

    分享一款贴近用户体验的jQuery日期选择插件.这是一款双日历jQuery日期选择时间插件pickerDateRange.效果图如下: 在线预览   源码下载 var dateRange = new ...

  3. 纯原生js移动端日期选择插件

    最近在项目上需要使用日期选择插件,由于是移动端的项目,对请求资源还是蛮节约的,可是百度上一搜,诶~全是基于jquery.zepto的,本来类库就很大,特别像mobiscroll这种样式文件一大堆又丑又 ...

  4. EasyUI 日期选择插件封装成选择到月份的插件

    将普通的日期选择插件封装成选择到月份的插件:                     var nowMonth = new Date();                    var month = ...

  5. 【jquery】多日期选择插件easyui date

    1.本次介绍一个好用的 多日期选择插件:EasyUI date,适用于:需要一次性选择多个日期,无需手动一个一个进行添加. 2.效果图: 3.下载地址:http://www.jeasyui.com/d ...

  6. 推荐三款日期选择插件(My97DatePicker+jquery.datepicker+Mobiscroll)

    1.My97DatePicker 纯原生JS,专注于PC端,支持IE6+:页面上只需要引入WdatePicker.js文件,但是My97DatePicker整个目录是一个整体,最好不要破坏里面的目录结 ...

  7. 日期选择插件clndr的使用

    需求是:在HTML中绘制日历直接供用户选择 而不是使用datepicker之类的表单插件让用户点击input后弹出datepicker让用户选择 浏览了一些解决方案后,发现  CLNDR 这个jQue ...

  8. HTML5 input date属性引起的探索——My97DatePicker(日期选择插件)

    不得不说H5的input date属性真的好用,之前我写的http://www.cnblogs.com/tu-0718/p/6729274.html这篇博客里面也有提到,不过虽然移动端对H5的支持还是 ...

  9. Vue中的v-model与my97日期选择插件冲突

    Vue中的v-model指令只是一个语法糖,其具体实现是:监听input框的input事件,然后将用户输入的值赋值给input框的value属性 <input type="text&q ...

随机推荐

  1. spring in action 5.1 小结 spring mvc起步

    0 配置 DispatcherServlet 是 spring mvc的核心,常规配置方法可以查看之前博客.springMVC简单例子 在此使用servlet 3 规范和 spring3.1 功能增强 ...

  2. CentOS 6.4 yum安装chrome

    CentOS 6.4安装chrome浏览器 vim /etc/yum.repos.d/CentOS-Base.repo 根据你的系统增加一个节点 32-bit [google] name=Google ...

  3. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  4. Android学习笔记(八)——显示运行进度对话框

    显示运行进度对话框 我们经常有这种经历:运行某一应用程序时.须要等待一会,这时会显示一个进度(Please Wait)对话框,让用户知道操作正在进行. 我们继续在上一篇中的程序中加入代码~ 1.在上一 ...

  5. action(二)

    RemoveSelf :消失 CCFiniteTimeAction* action = CCSequence::create( CCMoveBy::create( , ccp(,)), CCRotat ...

  6. java学习之局部变量以及全局变量

    全局变量 什么是全局变量? 全局变量就好比一个容器或者一个公用的东西一样,就类似外面公共场所的凳子一样,大家都可以使用这个凳子. 和他相反的局部变量是啥子东东呢? 局部变量就是局部的东西,如果全局变量 ...

  7. vsftpd 服务移植出现 500 oops : socket 解决

    一开始, 在vsftpd 打印的错误是 500 oops : socket 在 vsftpd 源码里面找到 buildroot-2016.05/output/build/vsftpd-3.0.3/sy ...

  8. MDI多文档窗体--在一个窗体中装载多个窗体

    创建MDI窗体之前,首先要明确两个概念:父窗体和子窗体,在MDI窗体中,起到容器作用的窗体被称为“父窗体”, 可放在父窗体中的其他窗体被称为子窗体,也成为MDI子窗体.当应用程序启动时,首先会显示父窗 ...

  9. js、jquery遍历对象

    js遍历对象: var obj = {a:1,b:2,c:3} for(var s in obj){ alert(obj[s]); } jquery遍历对象: var obj = {a:1,b:2,c ...

  10. web automation 常用技术比较

    selenium2支持通过各种driver(FirfoxDriver,IternetExplorerDriver,OperaDriver,ChromeDriver)驱动真实浏览器完成测试. 除此之外, ...