标签: bootstrap-datepicker

我试图在开始日期和结束日期上实现引导日期选择器。当我选择开始日期时，我将所选值更新为结束日期，但是当我单击结束日期时，日期选择器会打开，但不会突出显示所选日期。

这是我的代码：

$('#start_date, #end_date').datepicker();

$('#start_date').on('changeDate', function (selected) {
    $('#end_date').val($(this).val());
    $(this).datepicker('hide');
});

js fiddle 链接是： Js fiddle Link

我使用了源自以下内容的日期输入表单：

Youderian, C.如何将日期选择器添加到 Bootstrap 表单。形式登。[博客]。2015-10-27。

但我无法禁用过去的日期。我尝试了以下方法；根据GitHub 中的一个问题，但它对我不起作用。

$(document).ready(function() {
  var date_input = $('input[name="date"]'); //our date input has the name "date"
  var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
  date_input.datepicker({
    format: 'mm/dd/yyyy',
    container: container,
    todayHighlight: true,
    autoclose: true,
  })
})
$(function() {
  var nowDate = new Date();
  var today = new Date(nowDate.getFullYear(), nowDate.getMonth(),
    nowDate.getDate(), 0, 0, 0, 0);
  $('#date').datepicker({
    startDate: today
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js"></script> …

我使用了以下形式的 ngbDatepicker

<ngb-panel>
              <ng-template ngbPanelTitle>
                <div class="row">
                  <ui-switch (change)="onChange($event,2)" [checked]="professionalLearningEvent.sportsPractive" size="small"></ui-switch>&nbsp;&nbsp;
                  <label class="accordianTitle" (click)="onAccordianTitleClick(2)">Will your sports practice be
                    affected ?</label>
                </div>
              </ng-template>
              <ng-template ngbPanelContent>
                <div class="container">

<div class="input-group">
  <input class="form-control" [formControl]="control" ngbDatepicker [dayTemplate]="getDayTemplate()" #d="ngbDatepicker" [ngClass]="{ 'is-invalid': isFieldInvalid(control) }">
  <div class="input-group-append">
    <button class="btn btn-sm btn-outline-secondary" (click)="d.toggle()" type="button">
      <span class="fa fa-calendar"></span>
    </button>
  </div>
</div>

                </div>
              </ng-template>
            </ngb-panel>

日期选择器 UI 不会溢出。尝试找到一些解决方案，但无法找到。

我正在使用bootstrap-datepicker并遇到问题.

当我点击一天,它运作良好,但当我再次点击同一天.选择被取消

该自举日期选择器的演示 效果很好.

我从上面的链接找到了bootstrap日期选择器的示例.

如何让Require Bootstrap日期选择器始终处于打开模式？

我在我的一个应用程序中使用bootstrap日期选择器.

要求就像日期选择器应该在页面加载时打开,它也应该在选择后始终处于打开模式.

我发现它可以通过autoclose:false属性进行管理,但是,如果我点击日期选择器的一侧,它就会越来越近了.

应始终处于开放模式.

我希望有任何财产可以使它成为可能,请找到我正在使用的以下功能.

HTML

 <input type="text" id="select_date" class="selecteShipDate" />

脚本

<script src="assets/js/bootstrap-datepicker.js"></script>                                                                                       
<script type="text/javascript">
    $(function () {
        $('#select_date').datepicker({
            format: 'dd MM yyyy',
            autoclose: false
        })
    });
</script>

我有一个按钮,使用以下代码将datepicker设置为明天:

$("#txtDateOfJourney").datepicker({ startDate: '+1d'});

但它不起作用.

这是一个小提琴演示

有任何想法吗？

我正在使用Bootstrap（http://bootstrap-datepicker.readthedocs.org/en/latest/i18n.html）中的datepicker 。当使用不带“ language”属性的datepicker时，它可以工作，但是当我尝试指定一种语言（“ sv”）时，它会失败并显示消息（即，尝试在小部件中选择日期时）：

未捕获的TypeError：无法读取未定义的属性“ length”

这些是我正在使用的版本：

jQuery v1.8.3

jQuery UI 1.8.22

Boostrap 2.3.1

从调试器的角度来看，这似乎是崩溃的代码（Datetimepicker.prototype，带有“ p：”的行）：

    formatDate:       function (date, format, language, type) {
        if (date == null) {
            return '';
        }
        var val;
        if (type == 'standard') {
            val = {
                // year
                yy:   date.getUTCFullYear().toString().substring(2),
                yyyy: date.getUTCFullYear(),
                // month
                m:    date.getUTCMonth() + 1,
                M:    dates[language].monthsShort[date.getUTCMonth()],
                MM:   dates[language].months[date.getUTCMonth()],
                // day
                d:    date.getUTCDate(),
                D:    dates[language].daysShort[date.getUTCDay()],
                DD:   dates[language].days[date.getUTCDay()],
                p:    (dates[language].meridiem.length == 2 ? dates[language].meridiem[date.getUTCHours() < 12 ? 0 : 1] : …

我在弹出窗口中有一个表单，在此表单中，我输入了datepicker引导程序。我在输入之前用datepicker填充所有输入，但是当我打开datepicker时，所有输入将清除。有人可以帮忙吗？

    $('.datepicker').datepicker({
        format: 'dd.mm.yyyy',
        language: 'ru',
        autoclose: true
    });

<div class="modal fade" id="taskform" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="myModalLabel">??????? ??????</h4>
			</div>
			@using (Html.BeginForm(Model.ActionName, Model.ControllerName, FormMethod.Post, new { id = "task_form" }))
			{
				<div class="modal-body">
					<div class="form-group">
						@Html.HiddenFor(m => m.CampaignId)
						@Html.HiddenFor(m => m.AuthorId)

						@Html.LabelFor(x => x.Title)
						@Html.TextBoxFor(x => x.Title, new { @class = "form-control form-input" })
					</div>
						
					<div class="form-group">
						<br />
						@Html.LabelFor(x => x.Description)
						@Html.TextAreaFor(x => x.Description, new …

我在我的项目中使用"datepicker"插件,它设置为十年视图,我想禁用未来的日期,为此我使用了该maxDate选项,但它不起作用,我的代码:

$('#data_1 .input-group.date').datepicker({
    todayBtn: "linked",
    maxDate: "0",
    keyboardNavigation: false,
    forceParse: false,
    calendarWeeks: true,
    autoclose: true
});

试过0和new Date

脚本

<script>
  $(function () {
    $(".datepicker").datepicker();
  });
</script>

文本框

<input class="datepicker" id="_Date" name="Date" type="text" value="01-Jan-2017">

当我选择日期格式文本框时,格式看起来像10/11/2017但我需要像2017年10月11日那样的格式