My97DatePicker使用 、layDate 日期与时间组件

一、My97DatePicker

官方:http://www.my97.net/

<head>
    <meta charset="UTF-8">
    <title>Bootstrap介绍</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
      <script src="js/My97DatePicker/WdatePicker.js" type="text/javascript"></script>

</head>
<body>

 <table>

                                    <tr>

                                        <td>
                                             <span title="">  时间范围start:</span>
                                        </td>
                                        <td>
                                             <input name="startTime" type="text" id="startTime" class="form-control" onfocus="WdatePicker({dateFmt:‘yyyy/MM/dd‘,readOnly:true})" />

                                        </td>

                                          <td  >   <span title=""> 时间范围end:</span>
                                         </td>
                                        <td>
                                            <input name="endTime" type="text" id="endTime" class="form-control"  onfocus="WdatePicker({dateFmt:‘yyyy/MM/dd‘,readOnly:true})"  />
                                        </td>

                                         <td   >
                                            <input type="submit" name="BtnSelect" value="查詢" id="BtnSelect" class=" btn-success" />
                                        </td>

                                    </tr>

 </table>

二、layDate 日期与时间组件

官方:http://www.layui.com/laydate/

1.引入:  <script src="/Scripts/laydate/laydate.js"></script>

2.使用:

<script type="text/javascript">
lay(‘#version‘).html(‘-v‘ + laydate.v);
//日期时间选择器
laydate.render({
elem: ‘#txtstart‘
, type: ‘datetime‘
});

laydate.render({
elem: ‘#txtend‘
, type: ‘datetime‘
});

</script>

  

原文地址:https://www.cnblogs.com/July-/p/6438056.html

时间: 2024-10-02 20:47:22

My97DatePicker使用 、layDate 日期与时间组件的相关文章

layui之日期和时间组件

参考文档:https://www.layui.com/doc/modules/laydate.html代码片段如下: layui.use('laydate', function(){ var laydate = layui.laydate; laydate.render({ elem: '#createDate', // 指定元素 type:'datetime' }); }); 效果图如下: 其中type默认值为date(年月日),有如下几个可选值: 原文地址:https://www.cnblo

easyui基于 layui.laydate日期扩展组件

本人后端开发码农一个,公司前端忙的一逼,项目使用的是easyui组件,其自带的datebox组件使用起来非常不爽,主要表现在 1.自定义显示格式很麻烦 2.选择年份和月份用户体验也不好 网上有关于和My97DatePicker结合的例子,但感觉也用的不是很爽. 发现国内的layDate体验非常满意,所以萌生出想把这两个组件组合起来的想法,具体代码如下,本人非前端,所以只是实现了基本功能,大神勿喷哦. easyUI版本:V1.5.2 layDate版本:V5.0 /* 基于laydate日期扩展组

yii2超好用的日期组件和时间组件

作者:白狼 出处:http://www.manks.top/yii2_datetimepicker.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利.原文有图片.日期组件,时间组件在平时开发中是必不可少的.今天我们就来谈谈在yii2中的超好用的时间组件,也省的大家各种找js插件了. 分享之前我们先预览下效果,看看到底怎么个好用法.当然啦,好用不好用在于自我的感觉,光看上面的图片是感受不到的.再告诉你个好消息,这两款插

my97datepicker开始日期小于结束日期格式化时间精确届时分秒

my97datepicker开始日期小于结束日期格式化时间精确到时分秒 一 , 需求: 结束时间 > 开始时间, 不符合的时间段不能选择.比如我选择开始日期是7月28,那结束的日期将只能从7月28日后面的日期里来选择,省去了我们JS验证结束日期小于开始日期的麻烦. 具体代码如下: 开始日期的input id = "startDate" 结束日期的input id = "endDate" 从: <input id="startDate"

Android界面编程——日期时间组件(五)

Android界面编程--日期时间组件 2.6日期时间组件 2.6.1 TextClock 以文本的方式显示系统日期和时间,可以自定义显示格式,是 Android4.2(对应API Level 17)提供的新特性. TextClock有两种格式设置方式: 1. 在24小时模式: 属性:android:format24Hour 方法:set Format24Hour(CharSequence) 2. 在12小时模式: 属性:android: format12Hour 方法:set Format12

跟我学Android之九 日期时间组件

本章内容 第1节 AnalogClock和DigitalClock 第2节  CalendarView 第3节  DatePicker和TimerPicker 第4节  Chronometer 第5节   Timer类 本章目标 掌握图形时钟和数字时钟的用法. 掌握日历视图的用法. 熟练掌握日期和时间选择器的用法. 熟练掌握Chronometer的用法. 熟练掌握Timer类的用法. AnalogClock是一个模拟时钟视图,使用AnalogClock标签进行布局,除了长宽外基本需要其他属性,对

jsp日期插件My97DatePicker 强大的日期控件 使用方便简单

本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.htm是必须文件,不可删除 各目录及文件的用途:WdatePicker.js 配置文件,在调用的地方仅需使用该文件,可多个共存,以xx_WdatePicker.js方式命名con

jQuery LayDate 日期控件

她基于原生JavaScript精心雕琢,兼容了包括IE6在内的所有主流浏览器.她具备优雅的内部代码,良好的性能体验,和完善的皮肤体系,并且完全开源,你可以任意获取开发版源代码,一扫某些传统日期控件的封闭与狭隘.layDate本着资源共享的开发者精神和对网页日历交互无穷的追求,延续了layui一贯的简单与易用.她遵循LGPL协议,您可以免费将她用于任何个人项目. 版本 LayDate 1.1 作者:闲心贤 github 在线实例 实例预览 layDate - js日期控件与时间插件演示 实例预览 

【经验】Angularjs 中使用 layDate 日期控件

layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的.后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件. 解决思路:将layDate的初始化及相关代码定义在指令里. 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值. 指