标签: bootstrap-datepicker

我收到错误:

Uncaught TypeError: undefined is not a function

当我尝试设置datepicker时:

$('.datepicker').datepicker();

如何确定日期选择器是否已加载？

要清楚,我没有使用jQuery UI

我正在使用提供的setValue方法设置引导日期选择器的值.

例如

tripToDatePicker.setValue(tripFromDatePicker.date);

但由于某种原因,日历不会更新

不确定这是否是我移动的设置,但我遇到了bootstrap datepicker在我访问项目的每一页上加载大量本地化文件的问题,即使页面中没有组件使用了datepicker元素.

我从我的development.log得到这样的东西:

Started GET "/assets/bootstrap-datepicker/locales/bootstrap-datepicker.ar.js?body=1" for 127.0.0.1 at 2014-07-29 00:14:15 -0700


Started GET "/assets/bootstrap-datepicker/locales/bootstrap-datepicker.az.js?body=1" for 127.0.0.1 at 2014-07-29 00:14:15 -0700


Started GET "/assets/bootstrap-datepicker/locales/bootstrap-datepicker.bg.js?body=1" for 127.0.0.1 at 2014-07-29 00:14:15 -0700


...


Started GET "/assets/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.js?body=1" for 127.0.0.1 at 2014-07-29 00:14:16 -0700


Started GET "/assets/bootstrap-datepicker/locales/bootstrap-datepicker.zh-TW.js?body=1" for 127.0.0.1 at 2014-07-29 00:14:16 -0700

很多行,从AR到zh-TW,如名称所示,它们是每种语言/区域的单独本地化文件.

这对我的生产服务器来说不是问题,但在开发时它非常重要.在Vagrant下,加载这些文件需要在每页之前大约7700ms,在VMware大约2300ms之下.

我的application.rb只有以下内容:

config.action_controller.include_all_helpers = false

我的宝石文件:

source 'https://rubygems.org'

gem 'rails', '4.1'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder', '~> …

我正在尝试显示角度ui datepicker与日标题(星期标题中的日期格式),2个字母,3个字母的defualt,并由attr format-day-header ="EEE"定义,在哪里可以找到2的选项信吗？(我试过'EE'它只是在标题中写EE).

plunker是plunker链接

angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DatepickerDemoCtrl', function ($scope) {
  $scope.today = function() {
    $scope.dt = new Date();
  };
  $scope.today();

  $scope.clear = function () {
    $scope.dt = null;
  };

  // Disable weekend selection
  $scope.disabled = function(date, mode) {
    return ( mode === 'day' && ( date.getDay() === 0 || date.getDay() === 6 ) );
  };

  $scope.toggleMin = function() {
    $scope.minDate = $scope.minDate ? null : new Date();
  };
  $scope.toggleMin();

  $scope.open = function($event) {
    $scope.status.opened = true;
  }; …

请看我的小提琴.

我有一个月度选择器,只允许用户提前一年选择,但我想要的是过去几个月被禁用,以及提前一年被禁用的任何月份,但我无法弄清楚如何让这个工作.

示例场景当前月份为"十月",因此"2015年"月份"1月至9月"将被禁用,"11月至12月"月份将被禁用为"2016年"

我尝试过使用minDate:"0"和maxDate:"1y"但它们不起作用.

HTML

<div class="input-group date" style="width: 200px">
    <input type="text" id="example1" class="form-control" style="cursor: pointer"/>
        <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
</div>

JQuery的

$('#example1').datepicker
({
    format: "MM yyyy",
    minViewMode: 1,
    autoclose: true,
    startDate: new Date(new Date().getFullYear(), '0', '01'),
    endDate: new Date(new Date().getFullYear()+1, '11', '31')
});

我有一个生日输入文本,我使用Bootstrap datepicker v4.

表格在<div class="media">容器内.如图所示,datepicker日历被"media"div的边框隐藏,我无法用z-index解决这个问题,它没有用.当我同时使用overflow: visible这两个类:媒体和制表符内容时,字段会丢失其宽度并更改显示布局(请参阅第二张图片).

<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<div class="tab-wrap">
  <div class="media">
    <div class="parrent pull-left">
      <ul class="nav nav-tabs nav-stacked">
        <li class="active"><a href="#tab1" data-toggle="tab" class="analistic-01"><?= lang('BASIC_INFO'); ?></a></li>
        <li class=""><a href="#tab2" data-toggle="tab" class="analistic-02"><?= lang('PUBLIC_PROFILE'); ?></a></li>
        <li class=""><a href="#tab3" data-toggle="tab" class="tehnical"><?= lang('INTERESTS'); ?></a></li>
        <li class=""><a href="#tab4" data-toggle="tab" class="tehnical"><?= lang('FOTOS'); ?></a></li>
      </ul>
    </div>

    <div class="parrent media-body">
      <div class="tab-content">
        <div class="tab-pane fade active in" id="tab1">
          <div class="media">    
            <div class="media-body">     
              <div class="form-group">
                <div class='input-group date' id='datetimepicker1'>
                  <input …

RTL布局中的bootstrap datepicker工作不正常,我正在使用这个bootstrap datepicker http://bootstrap-datepicker.readthedocs.io 这是我的代码在page.cshtml中的代码

<div class="form-group" id="data_3">
  <label class="col-md-3 control-label">@Resources.ResourceLanguages.BirthDate</label>
  <div class="input-group date col-md-8" data-provide="datepicker">
    <div class="col-md-1"></div>
    <span class="input-group-addon"><i class="fa fa-calendar"></i></span> @Html.TextBoxFor(m => m.BirthDate, "{0: dd/MM/yyyy}", new { @class = "form-control", type = "text", placeholder = @Resources.ResourceLanguages.BirthDate, ReadOnly = "" }) @Html.ValidationMessageFor(m
    => m.BirthDate)
  </div>
</div>

这是我的javascript代码

$(document).ready(function() {
  $('#data_3 .input-group.date').datepicker({
    startView: 2,
    todayBtn: "linked",
    keyboardNavigation: false,
    forceParse: false,
    autoclose: true,
    orientation: "top left"
  });
});

这是我得到的问题,我尝试了互联网上的每一个解决方案,但没有任何作用,这个问题是否有任何解决方案？bootstrap datepicker是否支持RTL布局？

我想在我的应用程序中使用Angular的DatePickerModule.所以我按如下方式安装了软件包:npm install ng2-datepicker-bootstrap --save

安装成功.现在,我在AppModule中导入了DatePickerModule模块,如下所示:

import { DatePickerModule } from 'ng2-datepicker-bootstrap';

@NgModule({

  declarations: [
    other Components......,
    DatePickerModule
  ],
  imports: [
    ........
  ],
  providers: [Service, DatePickerModule],
  bootstrap: [AppComponent]
})

export class AppModule { }

然后在我的info.component.html中使用以下代码.

<datepicker [(ngModel)]="model.firstDate" [viewFormat]="'DD/MM/YYYY'" [modelFormat]="'YYYY-MM-DD'"  [id]="'firstDate'" [label]="'To'"></datepicker> 

但是当我运行项目时,我收到了这个错误: 错误:模块'AppModule'声明的意外模块'DatePickerModule'.请添加@ Pipe/@ Directive/@ Component注释.

顺便说一句,我是Angular2的新手.

我正在尝试随时间设置 datepicker 控件的值。无法完成

尝试转换为所需格式

应用程序组件.html

<input id="requestdate" type="date" class="form-control" formControlName="requestdate" 

app.component.ts

ngOnInit() {

this.loginForm = this.formBuilder.group({ 
                    requestdate : ['']
                  })

let date = new Date()
date = date.toLocaleDateString().substring(0,10)

this.loginForm.get('requestdate').patchValue(date)


}

无法看到转换后的日期

我正在研究如何使用，bootstrap datepicker但我需要它只显示月份或年份，就像这样：

但结果只是变成了这样：

我只需要选择月份和年份而不是整个日历。下面是我的整个代码片段：

$(document).ready(() => {
    $("#datepicker").datepicker( {
        format: "mm-yyyy",
        startView: "months", 
        minViewMode: "months"
    });
})

<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>My Teasting Website</title>

  <!--Bootstrap css-->
  <link rel="stylesheet" href="src/bootstrap/css/bootstrap.min.css">
  <!--bootstrap-datepicker css-->
  <link rel="stylesheet" href="/src/datepicker/css/datepicker.css">

</head>

<body>


    <input type="text" readonly="readonly" name="date" id="datepicker">

  <script src="/src/jquery.js"></script>
  <!--Bootstrap js-->
  <script src="src/bootstrap/js/bootstrap.min.js"></script>
  <script src="/src/datepicker/js/bootstrap-datepicker.js"></script>
  <script src="/js/script.js"></script>

</body>

</html>