• bootstrap的datepicker在选择日期后调用某个方法


     

    bootstrap的datepicker在选择日期后调用某个方法

    首先感谢网易LOFTER博主Ivy的博客,我才顿悟了问题所在,希望给后面用这几款插件的童鞋一个提醒,别犯和我同样的错误!

    这里是lvy博主写的博客:http://10305101ivy.blog.163.com/blog/static/5847658920135434648580/

    API调用网上一大把,我就不介绍了,大家自己百度。但是一定要注意他们的不同用法

    这里主要讲的是区别:

    一、bootstrap的datepicker:

    2013年bootstrap火了,之后推出了许多使用插件,其中包括bootstrap的datepicker

    Github开源地址:https://github.com/eternicode/bootstrap-datepicker

    在线文档:http://bootstrap-datepicker.readthedocs.org/en/latest/

    二、datetimepicker:

    此项目是bootstrap-datetimepicker 项目 的一个分支,原项目不支持 Time 选择。
    其它部分也进行了改进、增强,例如load 过程增加了对 ISO-8601 日期格式的支持。

    具体的大家可以看看这儿http://www.bootcss.com/p/bootstrap-datetimepicker/

    三、jQuery的datepicker:

    jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式、语言、限制选择日期范围、添加相关按钮以及其它导航等。
    官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/

    一个不错的地址,用来DIY jQuery UI界面效果的站点http://jqueryui.com/themeroller/


    我之前用到了bootstrap的datepicker

    然后我使用了jquery的datepicker的调用方法,把两者混淆了。

    $('#job-calendar').datepicker({
                dateFormat: "yyyy-mm-dd",
                language: "zh-CN",
                onSelect: gotoDate
            });

    function gotoDate(ev){

                window.location.href = "XXXX.html" + "?Date=" + ev.date.getFullYear().toString() + "-"+ (ev.date.getMonth()+1).toString()+ "-"+ ev.date.getDate().toString();
            }

    得不到我要的选择日期,页面跳转的效果。以为是版本的问题,更换最新版本后还是不行。后来才发现有两款datepicker插件。

    以下是bootstrap的datepicker的api调用方法。

    $('#job-calendar').datepicker({
                dateFormat: "yyyy-mm-dd",
                language: "zh-CN",
                onSelect: gotoDate
            }).on('changeDate',gotoDate);

    主要是想让大家注意的是,看清楚自己用的是哪个插件,去找对应的api,一些细微的差别真够折腾好久的!

    下面介绍

    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>
    复制代码

     上述使用转自:http://www.cnblogs.com/mymint/p/4512463.html

  • 相关阅读:
    linux添加自定义命令
    linux 将自己的服务添加到系统service服务
    制作linux下的.run安装包
    Wowza 相关
    深入理解 Vue Computed 计算属性
    养狗相关知识整理
    柯基犬体重对照图
    window下tomcat的内存溢出问题
    postMan测试https接口
    beego获取用户请求参数的方法
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/6323616.html
Copyright © 2020-2023  润新知