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. 查看Linux是32位还是64位的方法

    发布:JB01   来源:脚本学堂     [大 中 小] 本文介绍下,快速查看linux系统是32位还是64位的方法,有需要的朋友参考下吧. 本节内容:查看linux操作系统的位数 一,方法A:un ...

  2. 线程相关函数(2)-pthread_self()获取调用线程ID

    获取调用线程tid #include <pthread.h>pthread_t pthread_self(void); 示例: #include <pthread.h> #in ...

  3. Ubuntu环境下使用npm安装node模块时报错的处理方法

    错误信息: npm ERR : node: not found : npm ERR! not ok code 0 解决方案: sudo apt-get install nodejs-legacy 也可 ...

  4. Nginx - Windows下Nginx初入门,附CentOS下Nginx的安装

    公司刚使用nginx,预先学习下.鉴于机器没有Linux环境,在Windows熟悉下. 下载 目前(2015-07-11),nginx的稳定版本是1.8.0,在官网下载先,windows版的nginx ...

  5. V模型与测试级别

    V模型与测试级别[1] 2015-06-24 目录 2.1.1 V模型2.2.1 单元测试2.2.2 集成测试2.2.3 系统测试2.2.4 验收测试 2.1.1 V模型 返回 单元测试:验证软件单元 ...

  6. Hadoop单机Hadoop测试环境搭建

    Hadoop单机Hadoop测试环境搭建: 1. 安装jdk,并配置环境变量,配置ssh免密码登录 2. 下载安装包hadoop-2.7.3.tar.gz 3. 配置/etc/hosts 127.0. ...

  7. python 将base64字符串还原成图片保存

    import os,base64 strs='''/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAoHBwgHBgoICAgLCgoLDhgQDg0NDh0VFhEYIx8lJCI ...

  8. [C++]using std string;的作用是什么

    相关资料: http://bbs.csdn.net/topics/330194465 #include <string>将string库包含到当前编译单元中. using std::str ...

  9. 转:解决centos netstat和ps感染木马

    解决方法:a.去除恶意文件的执行权限chmod 000 /tmp/gates.lod   /tmp/moni.lod    service sendmail stopchkconfig --level ...

  10. C语言 · 复数四则运算

    算法提高 6-17复数四则运算   时间限制:1.0s   内存限制:512.0MB      设计复数库,实现基本的复数加减乘除运算. 输入时只需分别键入实部和虚部,以空格分割,两个复数之间用运算符 ...