none
bootstrap-datetimepicker问题 RRS feed

  • 问题

  • 我的代码如下:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="bootstrapDatetimepickerTest5.WebForm1" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
        <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css">
        <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
        <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    
        <link href="datetimepicker/css/bootstrap-datetimepicker.css" rel="stylesheet" type="text/css" />
        <script src="datetimepicker/js/bootstrap-datetimepicker.js" type="text/javascript"></script>
    
    
        <script type="text/javascript">
    
    
            $(function () {
    
                $("#inp").datetimepicker({
                    autoclose:true,
                    startView:3,
                    minView:3,
                    format:'yyyy/mm'
                   
                });
    
            })//end documenr.ready
        
        
        </script>
        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <input type="text" id="inp" name='inp' />
        </div>
        </form>
    </body>
    </html>
    

    结果是:

    那两个“next”的箭头取哪里了,请问我是那个样式没有添加啊??好纠结,

    为什么网上的例子是有箭头的,而我没有

    2014年11月19日 7:41

答案

全部回复

  • this.isInput = this.element.is('input');
    
    this.bootcssVer = this.isInput ? (this.element.is('.form-control') ? 3 : 2) : ( this.bootcssVer = this.element.is('.input-group') ? 3 : 2 );
    
    this.picker = $((this.bootcssVer == 3) ? DPGlobal.templateV3 : DPGlobal.template)
    
    DPGlobal.template = '<div class="datetimepicker">' +
    		'<div class="datetimepicker-minutes">' +
    		'<table class=" table-condensed">' +
    		DPGlobal.headTemplate 
    
    DPGlobal.templateV3 = '<div class="datetimepicker">' +
    		'<div class="datetimepicker-minutes">' +
    		'<table class=" table-condensed">' +
    		DPGlobal.headTemplateV3
    
    headTemplate:     '<thead>' +
    							  '<tr>' +
    							  '<th class="prev"><i class="icon-arrow-left"/></th>' +
    							  '<th colspan="5" class="switch"></th>' +
    							  '<th class="next"><i class="icon-arrow-right"/></th>' +
    							  '</tr>' +
    			'</thead>',
    headTemplateV3:   '<thead>' +
    							  '<tr>' +
    							  '<th class="prev"><i class="glyphicon glyphicon-arrow-left"></i> </th>' +
    							  '<th colspan="5" class="switch"></th>' +
    							  '<th class="next"><i class="glyphicon glyphicon-arrow-right"></i> </th>' +
    							  '</tr>' +
    			'</thead>',

    查看bootstrap-datetimepicker.js文件,上述代码为关键点;
    你写的代码this.bootcssVer =2;生成的标记是<i class="icon-arrow-left"></i>
    如果你在input添加class=“form-control” ,this.bootcssVer 就为3;生成的标记为<i class="glyphicon glyphicon-arrow-left"></i>
    2014年11月20日 3:02
  • 你好,

    这个左右导航需要用到bootstrap的glyphicon字体图标:

    http://v3.bootcss.com/components/

    在你的项目中,你只是添加js和css的引用文件,你需要下载Bootstrap的包,然后将fonts目录的问下负责到你的项目中去。

    最后建议你可以下载下面的完整代码:

    http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm

    2014年11月20日 3:10
  • xie xie 
    2014年11月24日 0:37