bootstrap的datetimepicker_bootstrap日期选择器

bootstrap的datetimepicker_bootstrap日期选择器先说datepicker。github上的地址是:https://github.com/eternicode/bootstrap-datepicker。效果如下:在bundle里面引用添加js和

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

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

bootstrap的datetimepicker_bootstrap日期选择器

在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
});

效果如下:

bootstrap的datetimepicker_bootstrap日期选择器

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

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>

 



版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167138.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 鸿蒙 OS 2.0 来了!值得开发者关注的是什么?

    鸿蒙 OS 2.0 来了!值得开发者关注的是什么?鸿蒙OS首发时,余承东特意用橙色标明1.0版本「基于开源框架,关键模块自研」。而按照华为的规划,今年在HDC上刚刚发布的鸿蒙2.0迎来了史诗级升级,完全演化成一个自主独立的操作系统。

  • phpstorm2021.12.13激活【中文破解版】

    (phpstorm2021.12.13激活)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.html4D5UJRVIF9-eyJsaWNlbnNlSWQi…

  • 图像处理之gamma校正

    图像处理之gamma校正图像处理之gamma校正

  • 【Minecraft Modding】创建第一个Item

    【Minecraft Modding】创建第一个Item【MinecraftModding】创建第一个Item1.编辑mods.toml文件2.建立目录和包3.编辑Test.java3.注册物品4.定义物品的属性5.runClient在环境创建完成的基础上,就可以开始创建模组了!本文将叙述如何创建一个Item,即Minecraft中的掉落物。1.编辑mods.toml文件首先需要在IntelliJIDEA中载入项目,找到src\main\resources\META-INF\mods.toml文件。该文件包含了这个Mo

  • EmguCv模板匹配[通俗易懂]

    模板匹配是一种最原始、最基本的模式识别方法,研究某一特定对象物的图案位于图像的什么地方,进而识别对象物,这就是一个匹配问题。它是图像处理中最基本、最常用的匹配方法。模板匹配具有自身的局限性,主要表现在它只能进行平行移动,若原图像中的匹配目标发生旋转或大小变化,该算法无效。先贴上简陋的界面图  代码:Matsrc=newImage&lt;Bgr,byte&gt;(ib_o…

  • Unity+Android GET和POST方式的简单实现API请求(人像动漫化)

    Unity+Android GET和POST方式的简单实现API请求(人像动漫化)Unity与Android的简单交互,Unity打开Android相册并调用

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号