bootstrap的表单怎么选日期


当前第2页 返回上一页

需要bootstrap提供封装的css和js

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

<link href="bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" />

<script src="bootstrap-datetimepicker.js"></script>

<script src="bootstrap-datetimepicker.zh-CN.js"></script>

<script>

 $.fn.datetimepicker.defaults = {

  //默认语言

  language: 'zh-CN',

  //默认选择格式

  format: "yyyy-mm-dd hh:ii:ss",

  autoclose: true,

  todayBtn: true,

  //选择板所在输入框位置

  pickerPosition: "bottom-left"

 };

</script>

 <div class="input-append date form_datetime">

 <input size="16" type="text" value="" id="startTime" readonly>

 <input size="16" type="text" value="" id="endTime" readonly>

</div>

<script>

 $(function () {

  var picker1 = $('#startTime').datetimepicker();

  var picker2 = $("#endTime").datetimepicker();

  //动态设置最小值(选择前面一个日期后:后面一个日期不能小于前面一个)

  picker1.on('changeDate', function (e) {

   picker2.datetimepicker('setStartDate', e.date);

  });

  //动态设置最大值(选择后面一个日期后:前面一个日期不能大于前面一个)

  picker2.on('changeDate', function (e) {

   picker1.datetimepicker('setEndDate', e.date);

  });

 });

</script>

以上就是bootstrap的表单怎么选日期的详细内容,更多文章请关注木庄网络博客

返回前面的内容

相关阅读 >>

bootstrap按钮样式有哪些

bootstrap是哪个组织创立的

bootstrap中fonts怎么引用

html的select对象如何进行option对象的操作

layui和bootstrap区别

bootstrap.js有什么用

如何解决bootstrap table乱码问题

bootstrap图片轮播由哪三部分组成

浅谈使用bootstrap-datepicker插件实现日期录入处理功能

bootstrap实现简单侧边导航栏效果

更多相关阅读请进入《bootstrap》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...