bootstrap日期时间控件

bootstrap日期时间控件datetime控件Bootstrap的日期时间控件,使用非常的简单。首先,添加日期时间控件的引用@*datetime控件*@

大家好,又见面了,我是你们的朋友全栈君。

datetime控件

Bootstrap的日期时间控件,使用非常的简单。

这里写图片描述

首先,添加日期时间控件的引用

@*datetime控件*@
    <link href="~/Content/BootStrap/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <script src="~/Content/BootStrap/js/moment-with-locales.js"></script>
    <script src="~/Content/BootStrap/js/bootstrap-datetimepicker.min.js"></script>
    <script src="~/Content/BootStrap/js/bootstrap-datetimepicker.zh-CN.js"></script>

链接:http://pan.baidu.com/s/1sl56aw1 密码:jc2y
页面代码

<a class='input-group date' id='datetimepicker1' style="float: left; left: 320px;">
                <input type='text' class="form-control" id='nowdate' style="width: 150px; height: 30px;" />
                <span class="input-group-addon" style="float: left; width: 50px; height: 30px;">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
            </a>

JavaScript代码

//设置日期时间控件
function Datetime() { 
   
    $('#datetimepicker1').datetimepicker({
        language: 'zh-CN',//显示中文
        format: 'yyyy-mm-dd',//显示格式
        minView: "month",//设置只显示到月份
        initialDate: new Date(),
        autoclose: true,//选中自动关闭
        todayBtn: true,//显示今日按钮
        locale: moment.locale('zh-cn')
    });
    //默认获取当前日期
    var today = new Date();
    var nowdate = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-" + today.getDate();
    //对日期格式进行处理
    var date = new Date(nowdate);
    var mon = date.getMonth() + 1;
    var day = date.getDate();
    var mydate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day);
    document.getElementById("nowdate").value = mydate;
}

日期时间控件默认值的设置,需要注意的是,在JS中使用的ID是input标签的ID。

document.getElementById("nowdate").value = mydate;

此外,设置默认的日期还有一个格式的问题,页面加载之后的日期时间,月份和天数为1~9的话,它的前面没有0。

这里写图片描述

但是,通过日期时间控件选择之后的日期时间,它的前面是有0的。

这里写图片描述

解决方法,首先获取当前的日期时间,然后通过格式化处理一下即可。

    //默认获取当前日期
    var today = new Date();
    var nowdate = (today.getFullYear()) + "-" + (today.getMonth() + 1) + "-" + today.getDate();
    //对日期格式进行处理
    var date = new Date(nowdate);
    var mon = date.getMonth() + 1;
    var day = date.getDate();
    var mydate = date.getFullYear() + "-" + (mon < 10 ? "0" + mon : mon) + "-" + (day < 10 ? "0" + day : day);
    document.getElementById("nowdate").value = mydate;
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

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

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

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

(3)


相关推荐

  • jquery freemarker模板设置变量每次循环加1

    jquery freemarker模板设置变量每次循环加1jquery freemarker模板设置变量每次循环加1

  • struts2拦截器学习

    struts2拦截器学习一、什么是拦截器?提到拦截器,使我不得不想起武侠剧中劫匪们常说的一句话:“此山是我开,此树是我栽,要打此路过,留下买路财!”。难不成程序中也有“打劫”的,说的没错,拦截器就是个打劫的。在现实生活中,劫匪劫的大都是钱财,当然也有别的什么,那么程序中的“劫匪”劫的又是什么呢?或者说程序中为什么需要它?在我们的日常编程中少不了写一些重复的代码,例如在一个地方中写了一段代码,后来发现这段代码在其

  • vc++可以编辑c语言吗?_vc6.0使用教程详解

    vc++可以编辑c语言吗?_vc6.0使用教程详解如何编写自己的VCL控件    用过Delphi的朋友们,大概对Delphi的最喜欢Delphi的不是他的强类型的pascal语法,而是强大的VCL控件,本人就是一位VCL控件的爱好者。    VCL控件的开源,给我们带来了享之不尽的优点。不像曾经的ole控件以及ActiveX,你全然能够重写Delphhi标准控件,并且网上这方面的资源非常多。    关于怎样编写VCL控…

  • 字符串有哪些_vue子组件emit方法失效

    字符串有哪些_vue子组件emit方法失效ES2017引入了字符串补全长度的函数。如果某个字符串的长度不够指定的长度,会在头部或尾部补全。padStart()用于头部补全,padEnd()用于尾部补全。’a’.padStart(3,’0′)//’00a’ ‘x’.padEnd(5,’ab’)//’xabab’ ‘x’.padEnd(4,’ab’)//’xaba’上面代码中,padStart()和padSt…

  • 网页播放rtsp视频流

    网页播放rtsp视频流网页播放rtsp视频流原文:https://blog.csdn.net/u011562107/article/details/78548605?locationNum=10&amp;fps=1RTSP协议(1)是流媒体协议。(2)RTSP协议是共有协议,并有专门机构做维护。(3)RTSP协议一般传输的是ts、mp4格式的流。(4)RTSP传输一般需要2-3个通…

    2022年10月18日
  • Cloudflare 是谁?

    Cloudflare 是谁?

发表回复

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

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