bootstrap-datepicker的简单使用
先说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的简单使用的更多相关文章
- bootstrap datetimepicker、bootstrap datepicker日期组件对范围的简单封装
1.bootstrap datepicker 使用 <div class="row form-group"> <label class="control ...
- 对bootstrap modal的简单扩展封装
对bootstrap modal的简单扩展封装 参考自:http://www.muzilei.com/archives/677 注:原文不支持bootstrap新版本,并且居中等存在问题 此段时间 ...
- bootstrap datepicker含有hasDatepicker无法弹出
bootstrap datepicker 初始化时,会给控件添加hasDatepicker类 ,如果此时调用 $singleDay.datepicker(initDayOpts);无法弹出时间控件 需 ...
- webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部署
本文为大家讲解的是webUI框架miniUI,easyUI,extJS,Bootstrap简介及简单部属,感兴趣的同学参考下 ExtJS是一种主要用于创建前端用户界面,是一个基本与后台技术无关的前端a ...
- Bootstrap在线编辑器简单分享
Bootstrap 已经使响应式网站开发变得简单很多. 但是如果你不必手动写全部代码,事情会如何呢? 如果你可以自由地选择你想要使用的Bootstrap 组件.并可以把它们拖拽到画布中,事情会如何呢? ...
- BootStrap 按钮组简单介绍
学会按钮组需要掌握以下几个类. btn btn-group btn-toolbar btn-group-vertical 和 下拉菜单的基本类 dropdown-toggle dropdow ...
- bootstrap datepicker显示日历
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...
- 使用Bootstrap+metisMenu完成简单的后台管理界面
零. 写在前面 作者最近在一个小项目中需要写后台管理界面,在互联网上绕了一圈,最后决定使用Bootstrap+metisMenu来完成.理由1:Bootstrap是目前流行的前端框架,风格简约,简单易 ...
- bootstrap开发一个简单网页。
CSS代码: body{ padding-top: 50px; padding-bottom: 50px; overflow: auto!important; ...
- android中TimePicker和DatePicker的简单使用
package com.example.demo10; import java.util.Calendar; import android.support.v7.app.ActionBarActivi ...
随机推荐
- C#实现http断点下载
我们寄希望于万能的解决方案,但是现实的情况总是很糟糕.在软件编程的世界中,技术分散的情况尤为严重,且不说各种语言拥有的优势不能融合,单就一门语言而言,就拥有众多的技术和相关技术需要学习.网络编程就是这 ...
- gen_create_syn.sql
set echo off feedback off verify off pagesize 0 linesize 120 ---变量从 sqlplus 的 call代码 传递过来 . -- 1 表示连 ...
- C++异常机制的实现方式和开销分析
C++异常机制的实现方式和开销分析 白杨 http://baiy.cn http://baiy.cn/doc/cpp/inside_exception.htm 在我几年前开始写<C++编码规范与 ...
- 使用python将mysql数据库的数据转换为json数据
由于产品运营部需要采用第三方个推平台,来推送消息.如果手动一个个键入字段和字段值,容易出错,且非常繁琐,需要将mysql的数据转换为json数据,直接复制即可. 本文将涉及到如何使用Python访问M ...
- Chapter 1 First Sight——7
Eventually we made it to Charlie's. 最终我们到了查理斯的家. He still lived in the small,two-bedroom house that ...
- Cron 时间元素
一个cron表达式有至少6个(也可能7个)有空格分隔的时间元素. 按顺序依次为 秒(0~59) 分钟(0~59) 小时(0~23) 天(月)(0~31,但是你需要考虑你月的天数) 月(0~11) 天( ...
- Codeforces Round #364 (Div. 2)C. They Are Everywhere(尺取法)
题目链接: C. They Are Everywhere time limit per test 2 seconds memory limit per test 256 megabytes input ...
- Django之路:模型(数据库)和自定义Field以及数据表的更改
一.Django 模型(数据库) Django模型是与数据库相关的,与数据库相关的代码一般写在models.py中,Django支持sqlite3,MySQL,PostgreSQL等数据库,只需要在s ...
- phpstrom 快捷键
常用的PHPStorm快捷键:ctrl+j 插入活动代码提示ctrl+alt+t 当前位置插入环绕代码alt+insert 生成代码菜单ctrl+q 查看代码注释ctrl+d 复制当前行ctrl+y ...
- Ubuntu 开启SSH 以及LAMP环境安装
1. 更新 apt-get sudo apt-get update 2.安装 openssh sudo apt-get install openssh-server 3.设置root账号密码 sudo ...