先说datepicker。 github上的地址是:https://github.com/eternicode/bootstrap-datepicker
效果如下:

在bundle里面引用添加js 和 css的引用。
bundles.Add(new StyleBundle("~/Content/css").Include( "~/Content/bootstrap.css", "~/Content/site.css", "~/Content/datepicker3.css"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include( "~/Scripts/bootstrap.js", "~/Scripts/respond.js", "~/Scripts/bootstrap-datepicker.js", "~/Scripts/bootstrap-datepicker.zh-CN.js"/*中文语言包*/ )); 
然后是html页面代码,很简单,一个标签即可:
<input type="text" class="datepicker" placeholder="请选择日期" />

然后是写js格式化:

<script type="text/javascript">
$(function () {
$(".datepicker").datepicker({
language: "zh-CN",
autoclose: true,//选中之后自动隐藏日期选择框
clearBtn: true,//清除按钮
todayBtn: true,//今日按钮
format: "yyyy-mm-dd"//日期格式,详见 http://bootstrap-datepicker.readthedocs.org/en/release/options.html#format
});
});
</script>

如此,基本的功能就实现了,比较容易。

datepicker有一系列的方法,比如获取/设置日期,基本的格式是:

$('.datepicker').datepicker('method', arg1, arg2);

比如获取当前日期:

$(".datepicker").datepicker("getDate").toLocaleString();//获取
$(".datepicker").datepicker("setDate", '2014-01-25');//设置

这个datepicker有个比较实用的功能,很多情况下我们给客户选择的是一个时间段,所有要求开始时间必须小于结束时间,这个功能datepicker已经帮我们实现了。
添加如下html标签:

<div class="input-group input-medium date-picker input-daterange" data-date-format="yyyy-mm-dd">
<input name="dtBegin" class="form-control" style="font-size: 13px;" type="text" value="">
<span class="input-group-addon">到</span>
<input name="dtEnd" class="form-control" style="font-size: 13px;" type="text" value="">
</div>

两个input放在一个div中,格式相关的可以在div中设置,不需要后面每个重新设置。

执行如下js:

$(".date-picker").datepicker({
language: "zh-CN",
autoclose: true
});

效果如下:

当客户选择了开始时间比结束时间要大,结束时间自动变成开始时间。

datepicker介绍完毕。

下面介绍jquery.form.js

github项目地址:http://jquery.malsup.com/form/

园中能搜到很多文章,外加现在mvc中的Ajax.BeginForm() 也都实现相关的异步表单的功能。但是异步文件上传这功能还是挺不错的,外加进度条显示,在前段时间公司项目中感觉挺实用的。

<form method="post" action="@Url.Action("ReceiveFile", new {controller = "Home" })" enctype="multipart/form-data">
<input type="file" name="file1" />
</form>

定义form标签的时候要注意enctype="mutipart/form-data"。

<script type="text/javascript">
$(function () {
$("[name=file1]").change(function () {//文件改变的时候触发异步提交表单事件。
$(this).parents("form").ajaxSubmit({
uploadProgress: function (event,position,total,percent) {
//percent就是百分比了
console.log(percent);
}
});
});
});
</script>
												

bootstrap-datepicker的简单使用的更多相关文章

  1. bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装

    1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...

  2. 对bootstrap modal的简单扩展封装

    对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677   注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...

  3. bootstrap datepicker含有hasDatepicker无法弹出

    bootstrap datepicker 初始化时,会给控件添加hasDatepicker类 ,如果此时调用 $singleDay.datepicker(initDayOpts);无法弹出时间控件 需 ...

  4. webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署

    本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...

  5. Bootstrap在线编辑器简单分享

    Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...

  6. BootStrap 按钮组简单介绍

    学会按钮组需要掌握以下几个类. btn   btn-group btn-toolbar  btn-group-vertical   和 下拉菜单的基本类 dropdown-toggle dropdow ...

  7. bootstrap datepicker显示日历

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  8. 使用Bootstrap+metisMenu完成简单的后台管理界面

    零. 写在前面 作者最近在一个小项目中需要写后台管理界面,在互联网上绕了一圈,最后决定使用Bootstrap+metisMenu来完成.理由1:Bootstrap是目前流行的前端框架,风格简约,简单易 ...

  9. bootstrap开发一个简单网页。

    CSS代码: body{        padding-top: 50px;        padding-bottom: 50px;        overflow: auto!important; ...

  10. android中TimePicker和DatePicker的简单使用

    package com.example.demo10; import java.util.Calendar; import android.support.v7.app.ActionBarActivi ...

随机推荐

  1. elasticsearch 配置说明

    elasticsearch的config文件夹里面有两个配置文件:elasticsearch.yml和logging.yml,第一个是es的基本 配置文件,第二个是日志配置文件,es也是使用log4j ...

  2. 几种在shell命令行中过滤adb logcat输出的方法

    我们在Android开发中总能看到程序的log日志内容充满了屏幕,而真正对开发者有意义的信息被淹没在洪流之中,让开发者无所适从,严重影响开发效率.本文就具体介绍几种在shell命令行中过滤adblog ...

  3. spring-jms

    http://haohaoxuexi.iteye.com/blog/1893038 理解PooledConnectionFactory.CachingConnectionFactory和SingleC ...

  4. Exponential notation

    Exponential notation You are given a positive decimal number x. Your task is to convert it to the &q ...

  5. NDK常用命令

    NDK Build 用法(NDK Build)   1.ndk-build的用法 Android NDKr4引入了一个新的.小巧的shell脚本ndk-build,来简化源码编译. 该文件位于NDK根 ...

  6. USACO Section 1.3 Mixing Milk 解题报告

    题目 题目描述 Merry Milk Makers 公司的业务是销售牛奶.它从农夫那里收购N单位的牛奶,然后销售出去.现在有M个农夫,每个农夫都存有一定量的牛奶,而且每个农夫都会有自己的定价.假设所有 ...

  7. CSS中margin和position:relative的定位问题

    一.代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  8. PAT (Advanced Level) 1018. Public Bike Management (30)

    先找出可能在最短路上的边,图变成了一个DAG,然后在新图上DFS求答案就可以了. #include<iostream> #include<cstring> #include&l ...

  9. [ERROR] Fatal error: Can't open and lock privilege tables: Table 'mysql.user' doesn't exist 160913 02:11:21 mysqld_safe mysqld from pid file /tmp/mysql.pid ended

    -- :: [Note] InnoDB: Renaming log file ./ib_logfile101 to ./ib_logfile0 -- :: [Warning] InnoDB: New ...

  10. CentOS 7 源码编译安装 Mysql 5.7

    1.创建 mysql 用户,用户组,以及相关目录 /usr/sbin/groupadd mysql /usr/sbin/useradd -g mysql mysql mkdir -p /opt/loc ...