bootstrap日期时间插件datetimepicker
<!DOCTYPE HTML> |
02 |
<html> |
03 |
<head> |
04 |
<link href= "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel= "stylesheet" > |
05 |
<link rel= "stylesheet" type= "text/css" media= "screen" |
06 |
href= "http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css" > |
07 |
</head> |
08 |
<body> |
09 |
<div id= "datetimepicker" class= "input-append date" > |
10 |
<input type= "text" ></input> |
11 |
<span class= "add-on" > |
12 |
<i data-time-icon= "icon-time" data-date-icon= "icon-calendar" ></i> |
13 |
</span> |
14 |
</div> |
15 |
<script type= "text/javascript" |
16 |
src= "http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js" > |
17 |
</script> |
18 |
<script type= "text/javascript" |
19 |
src= "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js" > |
20 |
</script> |
21 |
<script type= "text/javascript" |
22 |
src= "http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js" > |
23 |
</script> |
24 |
<script type= "text/javascript" > |
25 |
$( '#datetimepicker' ).datetimepicker({ |
26 |
format: 'MM/dd/yyyy hh:mm' , |
27 |
language: 'en' , |
28 |
pickDate: true , |
29 |
pickTime: true , |
30 |
hourStep: 1, |
31 |
minuteStep: 15, |
32 |
secondStep: 30, |
33 |
inputMask: true |
34 |
}); |
35 |
</script> |
36 |
</body> |
37 |
格式如下: <input id="to_datetime" type="text" class="zc_input" value="结束日期" data-date-format="yyyy-mm-dd hh:ii" data-date="<?php echo date('Y-m-d',time())?>T05:25:07Z"> <script> $('#from_datetime').datetimepicker({ </script> by:yttsic |
bootstrap日期时间插件datetimepicker的更多相关文章
- Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定
一放假就高产似母猪了. 00.混乱的前端界 Angular1.x确实是个学习成本很高的框架,刚开始实习那会儿,前端啥也不懂,工头说用Angular,我们这群小弟也只能硬着头皮学.在这之前,前端的东西大 ...
- boostrap日期时间插件datetimepicker使用过程的一些问题总结
1.汉化问题 虽然有转门的汉化脚本,不过如果简单使用的话自己稍微改一下源码就行了: var dates = $.fn.datetimepicker.dates = { en: { days: ['Su ...
- 【Bootstrap】bootstrap-datetimepicker日期时间插件
[bootstrap-datetimepicker] datetimepicker是一个比较方便的日期时间插件.有了这个之后,我们可以在类似于表单的地方提供一个友好的日期(时间)输入功能.官方文档:[ ...
- Bootstrap日期/日历插件Datepicker 时间加标记
由于工作需要,项目中使用了Bootstrap日期/日历插件Datepicker,根据需求需要在其中添加日期标记,实现效果图如下: 特此记录此次解决方案: 1.首先分析了功能的DOM元素(如下图),可以 ...
- vue使用日期时间插件layDate
项目中需要用到日期时间插件,尝试用bootstrap.element的时间插件都各有各的报错,对于一个菜鸟来说真的是很痛苦啊.终于,最后用了layDate实现了需要的功能 最终效果: 使用步骤: 1. ...
- 原生js日期时间插件鼠标点击文本框弹出日期时间表格选择日期时间
原文出处 (这是我从互联网上搜来的,感觉能满足各方面的需求.个人感觉挺不错的,所以后期修改了一下向大家推荐!) 效果图: html代码: <!DOCTYPE html PUBLIC " ...
- dateTimePicker日期时间插件-----限定节假日调休的可选择性
需求:在项目中需要一款这样的日期插件,可以选择年月日,时分秒,对法定节假日不能选择,因法定节假日进行的调休可以选择: 现在使用的比较多的日期插件比如:Wdatepicker,jqueryUI的date ...
- angularjs封装bootstrap官网的时间插件datetimepicker
背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...
- 【bootstrap】时间选择器datetimepicker和daterangepicker
在bootstrap中的时间选择器有两种:dateTimePicker和dateRangePicker 1.dateTimePicker好像是官方嫡插件: 需要的文件: <link rel= ...
随机推荐
- mysql使用mysqldump导出数据出错
mysqldump -hlocalhost -uroot -p123456 student_info jssypk > c:/databackup.sql 导出表结构 mysqldump - ...
- github 上的pull request总结
自己先要fork别人的代码. 然后把代码git clone到本地.. 当自己有提交的时候, 可以在git commit之后 git push origin master 然后这份git push or ...
- 从Java视角理解CPU缓存(CPU Cache)
从Java视角理解系统结构连载, 关注我的微博(链接)了解最新动态众所周知, CPU是计算机的大脑, 它负责执行程序的指令; 内存负责存数据, 包括程序自身数据. 同样大家都知道, 内存比CPU慢很多 ...
- Struct2 向Action中传递参数(中文乱码问题)
就是把视图上的值传递到Action定义的方法中 也就是把数据从前台传递到后台 三种方式: 1. 使用action属性接收参数 比如jsp页面: <body> 使用action属性接收参数 ...
- js生成随机数的方法实例总结
js生成随机数主要用到了内置的Math对象的random()方法.用法如:Math.random().它返回的是一个 0 ~ 1 之间的随机数.有了这么一个方法,那生成任意随机数就好理解了.比如实际中 ...
- c#基础语言编程-编码
字符编码是计算机技术的基础理论,其字符编码有ASCII码.UTF-8.还有就是GB2312,当然这是在中国常用的. 1.ASCII码 在计算机内部所有的信息都是以二进制字符进行存储.用每个二进制位中的 ...
- python google play
#!/usr/env python #-*- coding: utf-8 -*- import urllib import urllib2 import random import requests ...
- All About JAVA Maven的安装
一转眼几个月过去了..真是忙碌的几个月,最近在弄CAS 身份认证系统,新版本的CAS需要使用Maven进行构建,所以还要研究下Maven相关的资料.第一步就是下载安装Maven.根据官方网站的文档很容 ...
- Android GridView 一行显示数据(包括图片和文本),解决的办法是计算数据占该行的宽度是多少
最近在做图片的浏览功能,开始是使用Gallery做,但是,达不到我想要的效果,关于使用Gallery显示缩略图的缺点和优点,不在详述了.以下是一个完整的Demo代码,注意我的模拟器是640*960. ...
- android 31 GridView
GridView:网格列表,也支持适配器. package com.sxt.day05_01; import java.util.ArrayList; import java.util.List; i ...