Bootstrap datepicker禁用过去的日期而没有当前日期

时间:2013-04-20 17:16:26

标签: javascript jquery twitter-bootstrap

我想禁用当前日期之前的所有过去日期,而不是当前日期。我正在尝试使用bootstrap datepicker库“bootstrap-datepicker”并使用以下代码:

$('#date').datepicker({ 
    startDate: new Date() 
});

工作正常。但它是禁用日期直到今天。

例如,如果今天是04-20-2013并且我通过设置startDate:new Date()来禁用过去的日期。但我可以从2013年11月11日开始选择日期。

更新:我可以解决以下UTC区域:

var d = new Date();
options["startDate"] = new Date(d.setDate(d.getDate() - 1));

startDate: "+0d"

但是,当UTC提前一天时,这些方法不起作用。对于我在加利福尼亚的客户,这意味着在下午5点,我的客户不能再选择他当地的当前日期作为有效日期。为了解决这个问题,我暂时使用startDate: "-1d",但当然在5之前,这意味着昨天可见。

现在有没有人提出更好的方法,因为我不想告诉用户输入UTC日期?

提前致谢。

18 个答案:

答案 0 :(得分:48)

var date = new Date();
date.setDate(date.getDate()-1);

$('#date').datepicker({ 
    startDate: date
});

答案 1 :(得分:19)

HTML

<input type="text" name="my_date" value="4/26/2015" class="datepicker">

JS

jQuery(function() {
  var datepicker = $('input.datepicker');

  if (datepicker.length > 0) {
    datepicker.datepicker({
      format: "mm/dd/yyyy",
      startDate: new Date()
    });
  }
});

这将在打开日历时突出显示日期为2015年4月26日(2015年4月26日)的默认日期 禁用当前日期之前的所有日期。

答案 2 :(得分:14)

使用

SELECT target_group, 
       ( Cast(Count(*) AS DECIMAL(11, 2)) / NULLIF(target_group, 0) ) * 100 AS claim_rate 
FROM   [data].[dbo].[testgame] 
       OUTER apply (SELECT Count(*) AS target_group 
                    FROM   [casino_game].[dbo].[group_user] gu 
                    WHERE  gu.group_id = (SELECT pt.group_id 
                                          FROM 
                           [casino_game].[dbo].[promo_trigger] pt 
                           JOIN [casino_game].[dbo].[promo_offer] 
                                po 
                             ON po.trigger_id = pt.trigger_id 
                                          WHERE  pt.NAME = f.promo_name 
                                          GROUP  BY pt.group_id)) ou 

喜欢

startDate: '-0d'

答案 3 :(得分:8)

您可以使用数据属性:

<div class="datepicker" data-date-start-date="+1d"></div>

答案 4 :(得分:7)

&#13;
&#13;
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
	$('#date').datetimepicker({
		startDate: today
	});
&#13;
&#13;
&#13;

答案 5 :(得分:5)

<script type="text/javascript">
$('.datepicker').datepicker({
    format: 'dd/mm/yyyy',
    todayHighlight:'TRUE',
    startDate: '-0d',
    autoclose: true,
})

答案 6 :(得分:4)

这是

 <script>
          $(function () {
              var date = new Date();
              date.setDate(date.getDate() - 7);

            $('#datetimepicker1').datetimepicker({
                maxDate: 'now',
                showTodayButton: true,
                showClear: true,
                minDate: date
            });
        });
    </script>

答案 7 :(得分:3)

试一试:

$(function () {
     $('#datetimepicker').datetimepicker({  minDate:new Date()});
});

答案 8 :(得分:3)

停用所有过去日期

<script type="text/javascript">
        $(function () {
            /*--FOR DATE----*/
            var date = new Date();
            var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

            //Date1
            $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
              format: 'dd-mm-yyyy',
              todayHighlight:'TRUE',
              startDate: today,
              endDate:0,
              autoclose: true
            });

        });
</script>

禁用所有未来日期

 var date = new Date();
 var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());

   //Date1
   $('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
       format: 'dd-mm-yyyy',
       todayHighlight:'TRUE',
       minDate: today,
       autoclose: true
   });

答案 9 :(得分:2)

要禁用过去的日期并突出显示今天的日期:

$(function () {
    $('.input-daterange').datepicker({
        startDate : new Date(),
        todayHighlight : true
    });
});

要禁用将来的日期并突出显示今天的日期:

$(function () {
    $('.input-daterange').datepicker({
        endDate : new Date(),
        todayHighlight : true
    });
});

有关更多详细信息,请查看https://bootstrap-datepicker.readthedocs.io/en/latest/options.html?highlight=startdate#quick-reference

答案 10 :(得分:1)

在html中

<input class="required form-control" id="d_start_date" name="d_start_date" type="text" value="">

在Js方面

<script type="text/javascript">
        $(document).ready(function () {
        var dateToday = new Date();
        dateToday.setDate(dateToday.getDate());

        $('#d_start_date').datepicker({
            autoclose: true,
            startDate: dateToday
        })

    });

答案 11 :(得分:1)

您只需在html输入标签中添加数据属性

在rails html中:

<%= form.text_field :appointment_date, 'data-provide': 'datepicker', 'data-date-start-date': "+0d" %>

HTML:

<input data-provide="datepicker" data-date-start-date="+0d" type="text" name="appointment_date" id="appointment_date">

答案 12 :(得分:0)

禁用过去日期只需使用:

     [,1] [,2]     
[1,] "A1" "A76.A14"
[2,] "A5" "A2.A7"  
[3,] "A52.A12" "A70" 

答案 13 :(得分:0)

这取决于您放置在日期选择器上的格式 所以首先我们给它格式。

    var today = new Date();
    var dd = today.getDate();
    var mm = today.getMonth()+1; //January is 0!

    var yyyy = today.getFullYear();
    if(dd<10){
        dd='0'+dd;
    } 
    if(mm<10){
        mm='0'+mm;
    } 
    var today = yyyy+'-'+mm+'-'+dd; //Here you put the format you want

然后传递日期选择器(取决于您使用的版本,可以是startDate或minDate,这是我的情况)

    //Datetimepicker
    $(function () {
        $('#datetimepicker1').datetimepicker({
            minDate: today, //pass today's date
            daysOfWeekDisabled: [0],
            locale: 'es',
            inline: true,
            format: 'YYYY-MM-DD HH:mm', //format of my datetime (to save on mysqlphpadmin)
            sideBySide: true
        });
    });

答案 14 :(得分:0)

您可以在以下链接中找到您的解决方案:https://codepen.io/ahmetcadirci25/pen/NpMNzJ

那对我有用。

我的代码:

        var date = new Date();
        date.setDate(date.getDate());

        $('#datetimepicker1').datetimepicker({
            isRTL: false,
            format: 'dd.mm.yyyy hh:ii',
            autoclose: true,
            language: 'tr',
            startDate: date
        });

答案 15 :(得分:0)

解决方案简单得多:

$('#date').datepicker({ 
    startDate: "now()" 
});

尝试Online Demo并填写输入的开始日期: now()

答案 16 :(得分:0)

如果您的要求是基于另一个动态地禁用startDate和endDate,则可以这样做。

$('#date2').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true
        }).on('show', function(e){
            var date = $('#date3').datepicker('getDate');
            if(date){
             $('#date2').datepicker('setEndDate', date);
                }
    });

        $('#date3').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true
        }).on('show', function(e){
            var date = $('#date2').datepicker('getDate');
            if(date){
             $('#date3').datepicker('setStartDate', date);
                }
    });

如果您的要求仅在过去的日期被禁用,则可以使用以下代码段。

$('#date2').datepicker({
            todayHighlight: true,
            autoclose: true,
            format: "dd/mm/yyyy",
            clearBtn : true,
            startDate : new Date()
        })

如果只是禁用以后的日期,则可以使用以下代码段。

 $('#date2').datepicker({
                todayHighlight: true,
                autoclose: true,
                format: "dd/mm/yyyy",
                clearBtn : true,
                endDate : new Date()
            })

我希望它能对某人有所帮助。

答案 17 :(得分:-1)

以下为我工作

$('.input-group.date').datepicker({
     format: 'dd/mm/yyyy',
     startDate: new Date()
});