标签: daterangepicker

下周使用jquery和moment js开始和结束

我搜索了这个问题,发现Stackoverflow上没有答案..所以我决定回答它......

如果您需要将星期一作为周开始的下一个/上周的开始/结束,这个问题会有所帮助.

javascript jquery daterangepicker momentjs

31
推荐指数
3
解决办法
5万
查看次数

获取daterangepicker引导程序的值

嗨我刚接触使用javascript并在使用daterangepicker bootstrap时遇到问题.我管理实现这个我得到的演示,但我坚持从javascript获取开始日期和结束日期的值.

这是javascript

<script type="text/javascript">
$(document).ready(function() {
    $('#reportrange').daterangepicker(
       {
          startDate: moment().subtract('days', 29),
          endDate: moment(),
          minDate: '01/01/2012',
          maxDate: '12/31/2014',
          dateLimit: { days: 60 },
          showDropdowns: true,
          showWeekNumbers: true,
          timePicker: false,
          timePickerIncrement: 1,
          timePicker12Hour: true,
          ranges: {
             'Today': [moment(), moment()],
             'Yesterday': [moment().subtract('days', 1), moment().subtract('days', 1)],
             'Last 7 Days': [moment().subtract('days', 6), moment()],
             'Last 30 Days': [moment().subtract('days', 29), moment()],
             'This Month': [moment().startOf('month'), moment().endOf('month')],
             'Last Month': [moment().subtract('month', 1).startOf('month'), moment().subtract('month', 1).endOf('month')]
          },
          opens: 'left',
          buttonClasses: ['btn btn-default'],
          applyClass: 'btn-small btn-primary',
          cancelClass: 'btn-small',
          format: 'DD/MM/YYYY',
          separator: ' …
Run Code Online (Sandbox Code Playgroud)

javascript jquery jsp datepicker daterangepicker

23
推荐指数
5
解决办法
8万
查看次数

在Bootstrap Date Range Picker中配置语言

我正在使用提供和解释的Bootstrap Date Range Picker 在这个页面中我使用cdn添加了所有库,我的意思是:

<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
Run Code Online (Sandbox Code Playgroud)

但问题是我需要所有西班牙语,我没有看到一段代码来配置它.我该怎么办?

daterangepicker twitter-bootstrap-3

17
推荐指数
2
解决办法
4万
查看次数

更新Twitter Bootstrap的日期范围选择器的选定日期

我正在使用Dan Grossman的 Twitter Bootstrap 日期范围选择器.

初始化时,可以设置startDate和endDate等预定义值.是否可以稍后以类似的方式手动更新值?

我想要做的是用我保存的过滤器"加载"日期范围选择器,其中包括开始和结束日期(不是通过定义预定义的范围).只是通过jQuery更新日期范围选择器的字段将不会更新日历的实际选择.

我想在初始化日期范围选择器时我应该这样做:

var reportrange = $('#reportrange').daterangepicker(),
DateRangePicker = reportrange.data('daterangepicker');
Run Code Online (Sandbox Code Playgroud)

但是,如何使用DateRangePicker手动更新日期范围选择器和日历以及新选择的日期?

javascript jquery daterangepicker twitter-bootstrap

10
推荐指数
2
解决办法
3万
查看次数

无法绑定到“rangePicker”,因为它不是“mat-date-range-input”的已知属性

我正在使用角度日期范围选择器并遇到问题:

无法绑定到“rangePicker”,因为它不是“mat-date-range-input”的已知属性。

  1. 如果 'mat-date-range-input' 是一个 Angular 组件并且它有 'rangePicker' 输入,那么验证它是否是这个模块的一部分。
  2. 如果 'mat-date-range-input' 是一个 Web 组件,则将 'CUSTOM_ELEMENTS_SCHEMA' 添加到该组件的 '@NgModule.schemas' 以抑制此消息。

我也在 app.module.ts 中添加了导入、导出、提供者:

imports: [
    MatNativeDateModule,
    MatDatepickerModule,
    FormsModule,
    ReactiveFormsModule
],
exports:[
  MatDatepickerModule,
  MatNativeDateModule
],
providers: [
  MatDatepickerModule,
  MatNativeDateModule,
]
Run Code Online (Sandbox Code Playgroud)

html中的日期范围选择器:

<mat-form-field appearance="fill">
        <mat-label>Enter a date range</mat-label>
        <mat-date-range-input [rangePicker]="picker">
            <input matStartDate placeholder="Start date">
            <input matEndDate placeholder="End date">
        </mat-date-range-input>
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>
Run Code Online (Sandbox Code Playgroud)

我应该在 module.ts 中添加任何其他内容吗?

daterangepicker angular-material angular

10
推荐指数
1
解决办法
8815
查看次数

bootstrap daterangepicker按钮打开

我使用bootstrap daterangepicker(dangrossman)和Bootstrap 3.现在我想我可以使用插件按钮打开daterangepicker并在输入字段中点击

我的代码:

<div class="form-group">
        <div class="input-group input-group-sm">
            <span class="input-group-btn">
                <button class="btn btn-default" type="button"><span class="glyphicon glyphicon-calendar"></span></button>
            </span>
                <input id="daterangepicker" class="form-control" type="text" name="daterangepickerDisplay">
        </div>
    </div>
Run Code Online (Sandbox Code Playgroud)

这工作..但只有当我点击输入字段..

jquery daterangepicker twitter-bootstrap twitter-bootstrap-3

9
推荐指数
1
解决办法
7797
查看次数

更改移动布局上的日历位置

更改移动布局上的日历位置,

我用了daterangepicker-bs3.cssdaterangepicker.js'

但移动布局超出了我的预期.

桌面布局,开始日期日历应在左侧

移动布局,开始日期日历应该在鞋面上,但结果是在底部

目前的代码

:javascript
  $(document).ready(function() {
    $('#date-range-picker').daterangepicker(
      {
        locale: {
          applyLabel: "#{escape_javascript t('date_range_picker.apply')}",
          cancelLabel: "#{escape_javascript t('date_range_picker.cancel')}",
          fromLabel: "#{escape_javascript t('date_range_picker.depart_date')}",
          toLabel: "#{escape_javascript t('date_range_picker.return_date')}",
        },
        format: 'YYYY/MM/DD',
        dateLimit: { days: 30 }
      },
      function(start, end, label) {
        console.log(start.toISOString(), end.toISOString(), label);
      }
    );
  });
Run Code Online (Sandbox Code Playgroud)

HTML

<div class="col-sm-8">
    <div class="input-prepend input-group">
        <span class="add-on input-group-addon">
            <i class="fa fa-calendar"></i>
        </span>
        <input class="form-control" id="date-range-picker" name="departure_at" type="text" value="2015/11/16 - 2015/11/21">
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

css jquery daterangepicker

9
推荐指数
1
解决办法
751
查看次数

html5 日期范围选择器

我想推出一个日期范围选择器,如下图所示。理想输出

这是我现在正在执行的更新代码以及我现在拥有的输出。

$(function() {
  $("#fromperiod").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function(selectedDate) {
      $("#toperiod").datepicker("option", "minDate", selectedDate);
    }
  });
  $("#toperiod").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    onClose: function(selectedDate) {
      $("#fromperiod").datepicker("option", "maxDate", selectedDate);
    }
  });
});
Run Code Online (Sandbox Code Playgroud)
.picker {
  display: inline;
  border: 1px solid lightgray;
  padding : 4px;
}
input {
  border: 0;
}
Run Code Online (Sandbox Code Playgroud)
<link href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>Period</td>
    </tr>
    <tr>
      <td>
        <div class='picker'>
          <label for="fromperiod">From</label>
          <input type="text" id="fromperiod" name="from">
          <label for="toperiod">to</label>
          <input type="text" id="toperiod" …
Run Code Online (Sandbox Code Playgroud)

html javascript jquery datepicker daterangepicker

7
推荐指数
1
解决办法
5万
查看次数

如何在 daterangepicker 中设置默认日期?

有什么方法可以在 daterangepicker 中简单地将默认日期设置为当前+ 5 天?像这样:

$('.selector').daterangepicker({
singleDatePicker: true,
showDropdowns: true,
setDate: '+5d',
minDate: new Date()
}, function(start, end, label) {
    $('.selector').val(start.format("YYYY-MM-DD"));

});
Run Code Online (Sandbox Code Playgroud)

javascript daterangepicker

7
推荐指数
1
解决办法
2万
查看次数

在 flutter 中制作范围日期选择器

我正在尝试制作一个像这样的日期范围选择器,日期选择器从值(今天值)开始,然后用户选择他需要的范围,在颤振中我终于找到了这个

但当我单击日期选择器按钮时,我无法打开它。

我尝试使用另一个包日期范围选择器,但这对我没有帮助! 在此输入图像描述

calendar syncfusion daterangepicker flutter

7
推荐指数
2
解决办法
3万
查看次数