网站开发:Bootstrap-daterangepicker时 间插件实现选择日期范围

发布时间:2018-11-15 21:17:37 来源:腾巢网络

日 期范围在我们网站项目开发中,也 是不可以少的一项时间控件。比 如网站后台日期范围查询,我 们都会指定开始日期和结束日期来查询这个范围内的数据信息。

网站开发:Bootstrap-daterangepicker时
间插件实现选择日期范围

要实现以上功能,对 于网站前端开发者来通常情况下都会运用到Bootstrap-daterangepicker日 期和时间表单项目组件。

具体用到的CSS与JS文件有:

bootstrap/dist/css/bootstrap.min.css

bootstrap-daterangepicker/daterangepicker.css

jquery/dist/jquery.min.js

moment/min/moment.min.js

bootstrap-daterangepicker/daterangepicker.js

具体实现代码:

<script type="text/javascript"> 
$(function () {
$(".reservation").val("请选择日期范围");
$('.reservation').daterangepicker(
{ 
autoUpdateInput: false,
format: 'YYYY-MM-DD',
applyLabel: "应用",
cancelLabel: "取消",
monthNames: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"],
}
},
).on('cancel.daterangepicker', function(ev, picker)
{
$("#reservation").val("请选择日期范围");
}).on('apply.daterangepicker', function(ev, picker) {  
$("#reservation").val(picker.startDate.format('YYYY-MM-DD')+" 至 "+picker.endDate.format('YYYY-MM-DD'));
}
)
}
)    
</script>
<input type="text" class="form-control pull-right reservation" id="reservation">

获取Bootstrap日期和时间表单组件:https://github.com/uxsolutions/bootstrap-datepicker


最新资讯

  1. 移动互联网建站:遵 义做网站建设那家公司好
  2. 贵 州腾巢网络成功入驻熊掌号,再 现移动互联时代新域名
  3. 贵 阳旅游网站建设及技术开发解决方案
  4. 贵 阳企业营销型网站建设重点在于效果而不是价格高低
  5. 遵义企业开发小程序,助 企业快速进入新移动互联网时代
  6. 新 移动时代的制胜法宝——百度智能小程序
  7. 贵阳网站建设,附:网站建设明细报价表
  8. 贵州遵 义做网站建设那家公司好?
  9. 为留住Safari默认搜索引擎“宝座”,谷歌将向苹果支付90亿美元
  10. 小程序的未来如何?是否新商机?
  11. 腾 巢绥阳本土网络公司,提 供网站建设及小程序开发服务
  12. 腾 巢网络自主开发微信小程序正式上线投入运营
友情链接:    西甲历史射手榜   彩友网---首页_欢迎您   彩票宝网---首页_欢迎您   湖北福利彩票 - 快3网   50彩票注册