当前位置: 首页 > 编程日记 > 正文

bootstrap 时间日期日历控件(datetimepicker)附效果图

开发交流QQ群:  173683895   173683895   526474645  人满的请加其它群

效果图

代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script><script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script><script src="https://cdn.bootcss.com/moment.js/2.22.0/moment-with-locales.js"></script><script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script><title></title><style type="text/css">.myrow {display: flex;flex-direction: row;/*margin-left:1em;*/}.xxxx {height: 2px;background: #999999;margin-top: 16px;width: 2em;margin-left: 1em;margin-right: 1em;}</style></head><body><div class="form-group "><label for="name">身份证有效期限*</label><div class="myrow"><div class='input-group date' style="width: 14em;" id='datetimepicker1'><input type='text' class="timeInput form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div><div class="xxxx"></div><div class='input-group date' style="width: 14em;" id='datetimepicker2'><input type='text' class="timeInput form-control" /><span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div></div></div><script>$(function() {$('#form1').hide();var picker1 = $('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn'),//minDate: '2016-7-1'});var picker2 = $('#datetimepicker2').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn')});//动态设置最小值picker1.on('dp.change', function(e) {picker2.data('DateTimePicker').minDate(e.date);});//动态设置最大值picker2.on('dp.change', function(e) {picker1.data('DateTimePicker').maxDate(e.date);});});$('#datetimepicker1').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn'),defaultDate: "2018-1-1"});$('#datetimepicker2').datetimepicker({format: 'YYYY-MM-DD',locale: moment.locale('zh-cn'),defaultDate: "2028-1-1"});</script></body></html>

相关文章:

如何在您HTML中嵌入视频和音频

by Abhishek Jakhar通过阿比舍克贾卡(Abhishek Jakhar) 如何在您HTML中嵌入视频和音频 (How to embed video and audio in your HTML) HTML allows us to create standards-based video and audio players that don’t require the use of any plugins. Adding video and audi…

html 省份,城市 选择器附效果图

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 效果图&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html><head><meta charset"UTF-8"><link href"https://cdn.bootcss.com/bootstrap/3.3.7/css/boots…

机器学习:协方差矩阵

一、统计学的基本概念 统计学里最基本的概念就是样本的均值、方差、标准差。首先&#xff0c;我们给定一个含有n个样本的集合&#xff0c;下面给出这些概念的公式描述&#xff1a; 均值&#xff1a; 标准差&#xff1a; 方差&#xff1a; 均值描述的是样本集合的中间点&#xf…

TemplatedParent 与 TemplateBinding

http://blog.csdn.net/idebian/article/details/8761388转载于:https://www.cnblogs.com/changbaishan/p/4716414.html

避免成为垃圾邮件_如何避免犯垃圾

避免成为垃圾邮件by Yoel Zeldes由Yoel Zeldes 如何避免犯垃圾 (How to avoid committing junk) In the development process, every developer writes stuff they don’t intend to commit and push to the remote server, things like debug prints. It happens to all of u…

[bzoj2333] [SCOI2011]棘手的操作 (可并堆)

//以后为了凑字数还是把题面搬上来吧2333 发布时间果然各种应景。。。 Time Limit: 10 Sec Memory Limit: 128 MB Description 有N个节点&#xff0c;标号从1到N&#xff0c;这N个节点一开始相互不连通。第i个节点的初始权值为a[i]&#xff0c;接下来有如下一些操作&#xff1…

vue.js created函数注意事项

因为created钩子函数是页面一加载完就会调用的函数&#xff0c;所以如果你想在这个组件拿值或者是赋值&#xff0c;很可能this里面能拿到数据&#xff0c;但是如果你用this.赋值的话&#xff0c;控制台或者debugger都会发现this里面有你所想要的数据&#xff0c;但是赋值后就是…

JS删除城市的后缀

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 代码 const deleteStr str >{if (str.indexOf("市") ! -1 || str.indexOf("州") ! -1){str str.substring(0, str.length - 1)console.log(删除城市的最后一个字,str)return s…

gatsby_将您的GraphCMS数据导入Gatsby

gatsbyLets set up Gatsby to pull data from GraphCMS.让我们设置Gatsby来从GraphCMS中提取数据。 This will be a walk-through of setting up some basic data on the headless CMS, GraphCMS and then querying that data in Gatsby.这将是在无头CMS&#xff0c;GraphCMS上…

Java学习笔记07--日期操作类

一、Date类 在java.util包中定义了Date类&#xff0c;Date类本身使用非常简单&#xff0c;直接输出其实例化对象即可。 public class T { public static void main(String[] args) { Date date new Date(); System.out.println("当前日期&#xff1a;"date); //当前…

javascript数组集锦

设计数组的函数方法 toString, toLocaleString, valueOf, concat, splice, slice indexOf,lastIndexOf, push, pop, shift, unshift, sort, reverse map, reduce, reduceRight, filter, every, some, forEach 创建数组 数组字面量创建&#xff1a;var arr [val1, val2, val3];…

JS实现HTML标签转义及反转义

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 编码反编码 function html_encode(str) { var s ""; if (str.length 0) return ""; s str.replace(/&/g, "&amp;"); s s.replace(/</g, "<")…

喜欢把代码写一行的人_我最喜欢的代码行

喜欢把代码写一行的人Every developer has their favourite patterns, functions or bits of code. This is mine and I use it every day.每个开发人员都有自己喜欢的模式&#xff0c;功能或代码位。 这是我的&#xff0c;我每天都用。 它是什么&#xff1f; (What is it?) …

智能家居APP开发

智能家居APP开发 APP开发技术qq交流群&#xff1a;347072638 前言&#xff0c;随着智能硬件设备的流行&#xff0c;智能家居開始红火&#xff0c;智能家居就是家用电器的智能化。包含智能锁&#xff0c;灯&#xff0c;空调&#xff0c;灯&#xff0c;音箱等等&#xff0c;移动设…

android小技巧(二)

一、如何控制Android LED等&#xff1f;(设置NotificationManager的一些参数) 代码如下: final int ID_LED19871103; NotificationManager nm(NotificationManager)getSystemService(NOTIFICATION_SERVICE); Notification notification new Notification(); notificatio…

JS 验证表单不能为空

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 JS 验证表单不能为空的简单demo&#xff0c;先看效果图 实现代码 <!--index.wxml--> <form classform bindsubmitformSubmit bindresetformReset><input namename value{{name}} placeho…

周末不用过来了,好好休息吧_如何好好休息

周末不用过来了&#xff0c;好好休息吧When I wrote about my productive routine in a previous article, I said I’d work for 1.5 hours and take a break for 30 minutes. And I’d repeat this sequence four times a day.当我在上一篇文章中谈到生产性例程时&#xff0c…

HTML实现折现图完整源码及效果图

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 效果图 源码 <!DOCTYPE html> <html><head><meta charset"utf-8" /><script src"https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.common…

Date类(java.util)和SimpleDateFormat类(java.text)

在程序开发中&#xff0c;经常需要处理日期和时间的相关数据&#xff0c;此时我们可以使用 java.util 包中的 Date 类。这个类最主要的作用就是获取当前时间&#xff0c;我们来看下 Date 类的使用&#xff1a; 使用 Date 类的默认无参构造方法创建出的对象就代表当前时间&#…

8月12笔记-安卓文件扫描

Android的文件系统 1.Android的项目是运行在Linux操作系统上的 2.Linux的文件系统根目录是/&#xff0c;Windows只有某个盘符根目录 3.mnt文件夹是手机的内存卡根目录&#xff0c;此目录是安卓开发经常使用的 4.在windows下&#xff0c;最高管理员叫做Administrator&#xff0c…

可视化编码_Modulz简介:可视编码的下一步

可视化编码by Colm Tuite通过Colm Tuite Modulz简介&#xff1a;可视编码的下一步 (Introducing Modulz: The Next Step in Visual Coding) Modulz is a visual code editor for designing and building digital products — without writing code. Last week, we launched ou…

SQL执行过程中的性能负载点

一、SQL执行过程 1、用户连接数据库&#xff0c;执行SQL语句&#xff1b; 2、先在内存进行内存读&#xff0c;找到了所需数据就直接交给用户工作空间&#xff1b; 3、内存读失败&#xff0c;也就说在内存中没找到支持SQL所需数据&#xff0c;就进行物理读&#xff0c;也就是到磁…

认识Backbone (五)

Backbone.Router&#xff08;路由&#xff09;/ Backbone.history&#xff08;历史&#xff09; Backbone.Router 为客户端路由提供了许多方法&#xff0c;并能连接到指定的动作&#xff08;actions&#xff09;和事件&#xff08;events&#xff09;。 对于不支持 History API…

if else 你以为你把它吃透了吗?我让你惊讶一下

开发交流QQ群: 173683895 173683895 526474645 人满的请加其它群 if 和 else 是写代码最常用的&#xff0c;但是往往同学们不会去深入的了解他&#xff0c;这里我写几个Demo玩玩。 首先简单列一下什么值会返回true &#xff0c; 什么值会返回false。 示例&#xff1a;…

router路由react_使用React Router在React中受保护的路由

router路由reactIn this video, you will see how to create a protected route using React Router. This route is accessible only when the user is logged in.在此视频中&#xff0c;您将看到如何使用React Router创建受保护的路由。 仅当用户登录时&#xff0c;此路由才可…

SSH框架搭建笔记

1、建立一个web项目&#xff0c;设置编码格式&#xff0c;建立src下的包&#xff0c;建立资源文件夹 2、加入Spring运行必须的jar包(5个jar包)spring-beans-4.1.4.RELEASE.jarspring-context-4.1.4.RELEASE.jarspring-core-4.1.4.RELEASE.jarspring-expression-4.1.4.RELEASE.j…

灵活运用 SQL SERVER FOR XML PATH

FOR XML PATH 有的人可能知道有的人可能不知道&#xff0c;其实它就是将查询结果集以XML形式展现&#xff0c;有了它我们可以简化我们的查询语句实现一些以前可能需要借助函数活存储过程来完成的工作。那么以一个实例为主. 一.FOR XML PATH 简单介绍 那么还是首先来介绍一下FOR…

小程序画布,随机24个数显示在画布上面,不可重叠

QQ技术交流群 173683866 526474645 欢迎加入交流讨论&#xff0c;打广告的一律飞机票 效果图&#xff08;下面两个图都是随机显示24的圆圈在画布上面&#xff09; 实现代码 <!--pages/test2/test2.wxml--> <canvas style"width: 100%; height:700rpx;" ca…

hacktoberfest_Hacktoberfest 2018:如何获得免费衬衫—即使您是编码新手

hacktoberfestEvery October, Digital Ocean and GitHub ship out free Hacktoberfest shirts to thousands of people around the world.每年10月&#xff0c;Digital Ocean和GitHub都会向全球成千上万的人运送免费的Hacktoberfest衬衫。 I’ve gotten Hacktoberfest shirts …

Android自动化测试框架

1、Monkeyrunner&#xff1a;优点&#xff1a;操作最为简单&#xff0c;可以录制测试脚本&#xff0c;可视化操作&#xff1b;缺点&#xff1a;主要生成坐标的自动化操作&#xff0c;移植性不强&#xff0c;功能最为局限&#xff1b; 2、Rubotium&#xff1a;主要针对某一个…