bootstrap-datepicker实现日期input readonly 标签中选择时间功能

引用datepicker css,js,zh-CH文件

ps: 都是基于bootstrap，所以得先引入bootstrap文件才可以使用

　　 <link href="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script> <script src="https://cdn.bootcss.com/bootstrap-datepicker/1.8.0/locales/bootstrap-datepicker.zh-CN.min.js"></script>   // 日期显示会用到中文

<input readonly name="start-time" class="form-control choice-start-time" type="text" placeholder="开始时间"><span>-</span><input readonly name="end-time" class="form-control choice-end-time" type="text" placeholder="结束时间">

// 选择时间事件
$(function () {var today = new Date();var todayStr = today.getFullYear() + '/' + (today.getMonth()+1)+ '/' + today.getDate();var option = {'format': 'yyyy/mm/dd','autoclose': true,'startDate': '2018/7/10','endDate': todayStr,'language': 'zh-CN','todayBtn': 'linked', // 显示一个选择今日的按钮'todayHighlight': true, // 当前日期是否高亮'showButtonPanel': false, // 是否展示按钮'clearBtn': true// 'startDate': '-3d'
    };$('input[name="start-time"]').datepicker(option);$('input[name="end-time"]').datepicker(option);
});

posted on 2018-07-26 14:39 .Tang 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/tangpg/p/9371674.html

bootstrap-datepicker实现日期input readonly 标签中选择时间功能相关推荐

Bootstrap datepicker 在弹出窗体modal中不工作
解决办法在 show 方法后面添加下面一段代码 $('#modalCard').modal('show');-例子打开弹出窗体 //$('#modalCard').modal('hide') ...
使用JavaScript在input标签中添加readonly属性
JavaScript如何将readonly属性添加到input标签?下面本篇文章就来给大家介绍一下使用JavaScript将readonly属性添加到input标签的方法,希望对大家有所帮助. 在Ja ...
bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"><label class="control- ...
ngx-material中Datepicker的日期格式化和选择语系
本文主要介绍ngx-material的Datepicker组件中对设定日期的格式和设定组件的语系.对于Datepicker的使用将一笔带过,详细使用可查看angular官网. Datepicker组件 ...
html里的input属性,HTML中强大的input标签属性
用了许久的html,这个标签是最常用的标签之一. 标签中type属性是必不可少的,以往我最常用的有 type="text"(单行文本输入) 类型. type="butto ...
input标签中常见的type属性介绍
input标签中常用的type属性介绍 type="text"--->文本框type="password"--->密码框type="rad ...
struts2 标签中read-only=true 和disabled的区别
struts2 标签中read-only=true 和disabled的区别都不能对内容进行修改,区别在readonly提交的时候还会有该字段,但是disabled会在提交的时候忽略该字段转载于: ...
第一篇-Html标签中head标签，body标签中input系列，textarea和select标签
第十四周课程(1-12章节) HTML 裸体 CSS 穿华丽衣服 Javascript 动起来一 HTML (20个标签) 1.我们的浏览器是socket客户端 2.一套规则,浏览器认识的规则 ...
html中加减号怎么输入,jQuery 实现点击加减号改变input标签中的value值,该怎么解决...
jQuery 实现点击加减号改变input标签中的value值我想点击左右两边的加减号,让中间input标签中的value属性值做出相应的改变,jQuery怎么实现? ------解决思路 ...

bootstrap-datepicker实现日期input readonly 标签中选择时间功能

bootstrap-datepicker实现日期input readonly 标签中选择时间功能相关推荐

最新文章

热门文章