在基于Boostrap的Web开发中,往往需要录入日期内容,基于Boostrap的插件中,关于日期的录入可以使用bootstrap-datepicker这个非常不错的插件,以替代默认的type=date这种不太友好的日期录入控件,本篇介绍的是我在我的Boostrap开发框架中利用bootstrap-datepicker插件实现日期的录入处理。

1、bootstrap-datepicker插件的介绍

关于bootstrap-datepicker插件的相关的项目地址如下所示:

http://www.bootcss.com/p/bootstrap-datetimepicker

https://github.com/uxsolutions/bootstrap-datepicker

使用这个插件,和其他插件使用类似,只需要引入对应的JS文件和CSS样式即可,如下是该插件的引用文件。

<script src="/js/bootstrap-datepicker.js"></script>
<script src="/css/bootstrap-datepicker3.min.css"></script>

如果需要使用本地语言,引入语言文件即可。

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

插件的文件目录如下所示

插件的使用界面效果如下所示

我们在MVC框架中,使用插件的时候,往往是把对应的CSS和JS,通过打包的方式进行引入,如在C#代码里面BundleConfig.cs的代码如下所示

CSS文件引入如下代码所示

JS文件类似,如下所示。

而我们在开发Boostrap项目的时候,我们可以使用母版的方式引入对应的JS和CSS文件,在子页面则不需要再关注这些应用了,这些是基于MVC的Boostrap开发常见的处理,在这里就不再赘述了。

2、bootstrap-datepicker插件的项目使用代码

初始化bootstrap-datepicker插件也比较简单,最简单的代码如下所示。

<input type="text" id="datetimepicker">
$('#datetimepicker').datetimepicker({
format: 'yyyy-mm-dd hh:ii'
});

或者

<script type="text/javascript">
$(".form_datetime").datetimepicker();
</script>

而一般使用的时候,我们需要设置语言,格式,按钮等属性,如下所示

            $('.input-daterange input').each(function () {
$(this).datepicker({
language: 'zh-CN', //语言
autoclose: true, //选择后自动关闭
clearBtn: true,//清除按钮
format: "yyyy-mm-dd"//日期格式
});
});

在查询数据的界面中,我们一般需要一个区间的时间,如下所示。

而该界面的代码如下所示。

    <div class="input-group input-daterange">
<input id="WHC_PayDate" name="WHC_PayDate" type="text" placeholder="付款日期(起)" data-date-format="yyyy-mm-dd" class="form-control"/>
<div class="input-group-addon">~</div>
<input id="WHC_PayDate2" name="WHC_PayDate" type="text" placeholder="付款日期(止)" data-date-format="yyyy-mm-dd" class="form-control"/>
</div>

以及录入界面明细的时候,选择单个日期的界面如下所示。

    $('.input-date input').each(function () {
$(this).datepicker({
language: 'zh-CN', //语言
autoclose: true, //选择后自动关闭
clearBtn: true,//清除按钮
format: "yyyy-mm-dd"//日期格式
});
});

使用插件的时候,我们不可能为每个input初始化bootstrap-datepicker插件,因此使用了类选择器的处理方式实现所有日期插件的初始化。

插件可选的日期格式:

  • yyyy-mm-dd
  • yyyy-mm-dd hh:ii
  • yyyy-mm-ddThh:ii
  • yyyy-mm-dd hh:ii:ss
  • yyyy-mm-ddThh:ii:ssZ

最后看看整体的界面效果吧。

在Bootstrap开发框架中使用bootstrap-datepicker插件的更多相关文章

  1. 在Bootstrap开发框架中使用bootstrapTable表格插件和jstree树形列表插件时候,对树列表条件和查询条件的处理

    在我Boostrap框架中,很多地方需要使用bootstrapTable表格插件和jstree树形列表插件来共同构建一个比较常见的查询界面,bootstrapTable表格插件主要用来实现数据的分页和 ...

  2. 在Bootstrap开发框架中使用dataTable直接录入表格行数据(2)--- 控件数据源绑定

    在前面随笔<在Bootstrap开发框架中使用dataTable直接录入表格行数据>中介绍了在Web页面中使用Jquery DataTable插件进行对数据直接录入操作,这种处理能够给用户 ...

  3. 在Bootstrap开发框架中使用Grid++报表

    之前在随笔<在Winform开发中使用Grid++报表>介绍了在Winform环境中使用Grid++报表控件,本篇随笔介绍在Bootstrap开发框架中使用Grid++报表,也就是Web环 ...

  4. 在Bootstrap开发框架中使用dataTable直接录入表格行数据

    在Winform开发的时候,我们很多时候可以利用表格控件来直接录入数据,不过在Web上较少看到,其实也可以利用dataTable对象处理直接录入表格行数据,这个可以提高数据的录入方便,特别是在一些简单 ...

  5. 使用BootStrap框架中的轮播插件

    在使用bootstrap框架中的轮播插件时,效果做出来后,无法通过点击小圆行的按钮来选择特定的图片. 后面发现是最开始的<div>标签中少写了一个id.一开始<div>标签是这 ...

  6. 基于Metronic的Bootstrap开发框架经验总结(15)-- 更新使用Metronic 4.75版本

    在基于Metronic的Bootstrap开发框架中,一直都希望整合较新.较好的前端技术,结合MVC的后端技术进行项目的开发,随着时间的推移,目前Metronic也更新到了4.75版本,因此着手对这个 ...

  7. Vue&Element开发框架中增加工作流处理,查看申请单中整合多个处理类型的处理

    关于我在Winform框架.混合框架.Bootstrap开发框架中的简易审批性工作流模块,我写过不少文章,有兴趣可以参考<工作流模块>的随笔进行了解,本篇随笔在完成了Vue&Ele ...

  8. 基于Metronic的Bootstrap开发框架经验总结(18)-- 在代码生成工具Database2Sharp中集成对Bootstrap-table插件的分页及排序支持

    在我们开发系统界面,包括Web和Winform的都一样,主要的界面就是列表展示主界面,编辑查看界面,以及一些辅助性的如导入界面,选择界面等,其中列表展示主界面是综合性的数据展示界面,一般往往需要对记录 ...

  9. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

随机推荐

  1. Java提高班(二)深入理解线程池ThreadPool

    本文你将获得以下信息: 线程池源码解读 线程池执行流程分析 带返回值的线程池实现 延迟线程池实现 为了方便读者理解,本文会由浅入深,先从线程池的使用开始再延伸到源码解读和源码分析等高级内容,读者可根据 ...

  2. Joda-Time开源库

    Joda-Time是一个面向 Java™ 平台的易于使用的开源时间日期库. 依赖 <dependency> <groupId>joda-time</groupId> ...

  3. Mysql语句中当前时间不能直接使用C#中的Date.Now传输

    MySql中处理字符串时间,会默认把第一个数字当成年份处理. 在C#服务器中,使用Date.Now.ToString()生成的字符串时间,如果不指定字符串格式,C#会按照系统语言输出不同的字符串格式, ...

  4. ABP框架 将EntityFrameworkCore生成的SQL语句输出到控制台

    首先 在 EntityFrameworkCore中安装 Microsoft.Extensions.Logging.Console nuget install Microsoft.Extensions. ...

  5. Linux学习笔记之Python3的安装以及创建虚拟环境(CentOS)

    安装python3 一.安装需要编译的关联库 yum instal -y zlib zlib-devel (根据自己系统的情况,安装需要的关联库,同样用yum安装即可) yum install ope ...

  6. PHP反射原理的实现

    反射 反射,直观理解就是根据到达地找到出发地和来源.我们可以仅仅通过一个光秃秃对象就能知道它所属的类.拥有哪些方法. 反射是指在PHP运行状态中,扩展分析PHP程序,导出或提出关于类.方法.属性.参数 ...

  7. Selenium自动化测试 Verify

    Selenium 找了很久,没有发现有verify的方法,可是,有个时候要的是确认,而不是直接断言, 当然要在运行结束后能够得到确认的结果,于是写了下面的代码,给大家分享.     import ja ...

  8. 简单实现弹出弹框页面背景半透明灰,弹框内容可滚动原页面内容不可滚动的效果(JQuery)

    弹出弹框 效果展示 实现原理 html结构比较简单,即: <div>遮罩层 <div>弹框</div> </div> 先写覆盖显示窗口的遮罩层div.b ...

  9. 自定义工作流活动运行产生System.Security.SecurityException

    摘要: 微软动态CRM专家罗勇 ,回复305或者20190224可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me . 最近碰到一个 ...

  10. WebService访问oracle数据库本地调试

    WebService访问oracle数据库本地调试-一步一个坑 上篇文章提到我们额数据库挂了,重装了数据库,然后呢我需要在本地调试WebService,看看那些数据结构缺失,迁移到新数据库中去.踩坑之 ...