bootstrap-datetimepicker时间控件的使用
官方文档:http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
常规使用:
<div class="input-group date form_datetime" id="sform">
<input class="form-control data-form-start" type="text" placeholder="开始时间" name="start_time" id="start_time" readonly="true" value="" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
<div class="input-group date form_datetime" id="eform">
<input class="form-control data-form-start" type="text" placeholder="结束时间" name="end_time" id="end_time" readonly="true" value="" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
$(".form_datetime").datetimepicker({
format:'yyyy/mm/dd',
language:'zh-CN',
minView: "month",
todayBtn: 1,
autoclose: 1,
})
开始时间,结束时间的使用:
注意:开始时间必须小于结束时间,结束时间必须大于开始时间
$("#sform").datetimepicker({
format:'yyyy/mm/dd',
language:'zh-CN',
minView: "month",
todayBtn: 1,
autoclose: 1,
}).on('show', function (ev) {//在控件显示时就触发事件
var etime = $("#end_time").val();//获取结束时间
$("#sform").datetimepicker('setEndDate', etime);//给开始控件设置一个结束的日期。
});
$("#eform").datetimepicker({
format:'yyyy/mm/dd',
language:'zh-CN',
minView: "month",
todayBtn: 1,
autoclose: 1,
}).on('show', function (ev) {
var stime = $("#start_time").val();
$("#eform").datetimepicker('setStartDate', stime);//给结束控件设置一个开始日期
});
参考文档:http://blog.csdn.net/gwpjava/article/details/48542121
http://www.bootcss.com/p/bootstrap-datetimepicker/demo.htm
bootstrap-datetimepicker时间控件的使用的更多相关文章
- bootstrap的时间控件使用(双日历)
这段时间看了下bootstrap的时间控件,发现使用起来还是很简单的,趁着有时间的时候整理了一下,方便自己以后忘记的时候查阅... 废话不多说先上效果图 接下来是代码实现 第一步当然是导入css.js ...
- DateTimePicker时间控件:
DateTimePicker时间控件: http://xdsoft.net/jqplugins/datetimepicker/ 可以参考文档设置各种属性,格式. 用法: 首先下载datetimepic ...
- C#--DataGridView添加DateTimePicker时间控件
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...
- datetimepicker时间控件
喜欢上datetimepicker源自于对bootstrap的喜欢. 一款简单到爆的时间空间 引入jq 引入bootstrap 引入datetimepicker和bootstrap-datetimep ...
- html,datepicker,datetimepicker时间控件使用
1.My97DatePicker 传送门:点击打开链接 ps:My97DatePicker貌似对chrom不兼容 2.jquery日期选择/日历 http://www.oschina.net/proj ...
- bootstrap添加时间控件
$('#startTime').daterangepicker({ singleDatePicker: true,format:"YYYY-MM-DD HH:mm:ss",time ...
- Bootstrap中时间(时间控件)的设计
运用bootstrap的时间控件,生成时间选择器. 1.截图:有以下这些样式 10年视图 年视图 月视图 日视图 小时视图 2.视图设计: ...
- BootStrap母版页布局.子页面布局.BootstrapTable.模态框.警告框.html导出tabl生成Excel.HTML生成柱图.饼图.时间控件中文版
如上就是很多后台管理系统的母版页布局. 左边一列模板.上面一列系统标识. 空白处充填子页面 以ASP.NET MVC为基础 引入bootstrap.js.bootstrap.css body: < ...
- bootstrap 时间控件
近期使用了bootstrap的UI感觉确实非常美丽,非常值得学习和使用. 以下先简单了解下bootstrap的时间控件. 这个时间控件使用起来还是很的简单.仅仅须要引入主要的css和js就能够了 须要 ...
- bootstrap datetimepicker时间日期控件
github地址:https://github.com/smalot/bootstrap-datetimepicker Both Date and Time picker widget based o ...
随机推荐
- MySQL使用yum安装
1.下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2.安装mysql-comm ...
- Ubuntu添加环境变量
在 Ubuntu 系统中有两种设置环境变量 PATH 的方法.第一种适用于为单一用户设置 PATH,第二种是为全局设置 PATH. 第一种方法: 在用户主目录下有一个 .bashrc 文件,可以在此文 ...
- curl download zip file
https://askubuntu.com/questions/285976/download-zip-file-with-curl-command
- tomcat6-输入输出buffer设计
之前写的一个ppt 搬到博客来
- Leetcode1--->数组中两数之和等于给定数
题目: 给定一个数组nums,目标数target.在数组中找到两数之和为target的数,返回两数的下标举例: Given nums = [2, 7, 11, 15], target = 9, Bec ...
- 利用bochs调试Linux 0.11内核
引导程序调试软件bochs,跟配套的linux0.11内核img下载地址分别是: http://sourceforge.net/projects/bochs/http://www.oldlinux.o ...
- FastText 介绍
FastText 介绍 在面试百度的NLP工程师时,被问及常用的词向量表示学习方法有哪些,我说知道word2vec,然后大佬又问我知道FastText么... 这就很尴尬了,不会! 不同于word2v ...
- PHP-7.1 源代码学习:字节码在 Zend 虚拟机中的解释执行 之 概述
本文简要介绍 zend 虚拟机解释执行字节码的基本逻辑以及相关的数据结构,关于 PHP 源代码的下载,编译,调试可以参考之前的系列文章 execute_ex 我们来看看执行一个简单的脚本 test.p ...
- javascript学习笔记 - 引用类型 Date
三 Date new Date() 在不传递参数的情况下,新创建的对象自动获得当前日期和时间.参数接收毫秒的timestamp Date.parse() 接收表示日期的字符串,返回相应的日期毫秒数ti ...
- 关于 __int128
__int128 是 GCC 提供的扩展(extension),可以当作 128 位整数使用. 关于 __int128 和 __int128_t Normally, _t suffix means a ...