web-dev-qa-db-ja.com

datepickerで過去の日付を無効にする

Datetimepickerで現在の日付から過去の日付を無効にする方法は？私は同様の質問のためにいくつかの投稿を試しましたが、それを達成することができませんでした、以下は私が試したものです

<link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen"
 href="http://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<script type="text/javascript"
 src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script> 
<script type="text/javascript"
 src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.2.2/js/bootstrap.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js">
</script>
<script type="text/javascript"
 src="http://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.pt-BR.js">
</script>
<script type="text/javascript">
$(function() {
  $('#datetimepicker2').datetimepicker({
    language: 'en',
    pick12HourFormat: true
  });
});
</script>

<div id="datetimepicker2" class="input-append">
<input data-format="MM/dd/yyyy" type="text"/>
<span class="add-on">
  <i  data-date-icon="icon-calendar">
  </i>
</span>

私も試しました

$("datetimepicker2").datepicker({ changeYear: true, dateFormat: 'dd/mm/yy', showOn: 'none', showButtonPanel: true,  minDate:'0d' });

そして

$("#datetimepicker2").datepicker({ minDate: 0 });
jqueryjquery-mobiletwitter-bootstrap
24
Anna

mindateにゼロを指定すると、過去の日付が無効になります。

$( "#datepicker" ).datepicker({ minDate: 0});

がここにあります Live fiddle 作業例 http://jsfiddle.net/mayooresan/ZL2Bc/

公式ドキュメントはこちらから入手可能

50
Jay Mayu

修正された問題:)

以下は作業コードです

$(function(){
    $('#datepicker').datepicker({
        startDate: '-0m'
        //endDate: '+2d'
    }).on('changeDate', function(ev){
        $('#sDate1').text($('#datepicker').data('date'));
        $('#datepicker').datepicker('hide');
    });

})
14
Anna

minDate: dateToday または minDate: '0'はここのキーです。 minDateプロパティを設定してください。

$(function() {
    $( "#datepicker" ).datepicker({
        numberOfMonths: 2,
        showButtonPanel: true,
        minDate: dateToday // minDate: '0' would work too
    });
});

続きを読む

13
Techie
$(function () {
    $("#date").datepicker({ minDate: 0 });
});
8
Rama Krishna

これを試して、

$( "#datepicker" ).datepicker({ minDate: new Date()});

ここで、新しいDate（）は今日の日付を意味します。

8
Annonymous programmer

これは動作します：

 var dateToday = new Date();    
 $(function () {
     $("#date").datepicker({ 
         minDate: dateToday 
     });
 });
6
VIPIN A ROY
var dateToday = new Date();

$('#datepicker').datepicker({                                     
    'startDate': dateToday
});
3
pralhad bulange

これを試して、

$("#datetimepicker2").datepicker({ startDate: "+0d" });
3
Pabari Mohit

これは私のために働く、

$('#datetimepicker2').datetimepicker({
    startDate: new Date()
  });
2
salamflamo
<div class="input-group date" data-provide="datepicker" data-date-start-date="0d">
    <input type="text" class="form-control" id="input_id" name="input_name" />
    <div class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </div>
</div>
2
Shahid Ahmed

ページの読み込み時に日付を設定する場合は、これを使用します：

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

これにより、ページの読み込み自体の開始日として今日の日付が設定され、以前のすべての日付が無効になります。
しかし、ページの読み込み時に設定するのではなく、特定のテキストボックスのクリック時に日付を設定する場合は、$('#datetimepicker1').datetimepicker(); $("#datetimepicker1").on("click", function (e) { $('#datetimepicker1').data("DateTimePicker").minDate(new Date()); });を使用します。

現在の日付を最小日付として設定したくない場合は、新しいDate（）の代わりに、指定された形式で日付を指定する任意の文字列を使用できます。例えば：

_$('#datetimepicker1').data("DateTimePicker").minDate("10/15/2018");
_
1
Deepak Jha

以下で説明するように、パラメータstartDateを導入しました。

var todaydate = new Date();
    $(".leave-day").datepicker({
        autoclose: true,
        todayBtn: "linked",
        todayHighlight: true,
        startDate: todaydate     
      }
    ).on('changeDate', function (e) {
        var dateCalendar = e.format();
        dateCalendar = moment(dateCalendar, 'MM/DD/YYYY').format('YYYY-MM-DD');
        $("#date-leave").val(dateCalendar);
    });
1
Swapnil Nath
$("#datetimepicker2").datepicker({ 
  dateFormat: "mm/dd/yy", 
  minDate: new Date()
});
0
Nikhil Gyan
Try this'
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script><link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

    <!-- table -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <!-- end table -->

    <script>
       $(function() {
        $('#example').DataTable();
        $("#from_date").datepicker({
            dateFormat: "mm/d/yy",
            maxDate: 0,

            onSelect: function () {



                var minDate = $(this).datepicker('getDate');

                $('#to_date').datepicker('setDate', minDate);
                $('#to_date').datepicker('option', 'maxDate', 0);
                $('#to_date').datepicker('option', 'minDate', minDate);
            }
        });
        $('#to_date').datepicker({
            dateFormat: "mm/d/yy"
        });

       });
       </script>
0
SMS

Datepickerを使用して開始日に基づいて終了日を設定します

  $("#AddEvent_txtStartDate").datepicker({
        onSelect: function () {
            minDate = $("#AddEvent_txtStartDate").datepicker("getDate");
            var mDate = new Date(minDate.setDate(minDate.getDate()));
            $("#AddEvent_txtEndDate").datepicker("setDate", mDate);
            $("#AddEvent_txtEndDate").datepicker("option", "minDate", mDate);
        }
    });  
    $("#AddEvent_txtEndDate").datepicker();
0
A.M. Patel

使用できます

$('#li_from_date').appendDtpicker({
    "dateOnly": true,
    "autodateOnStart": false,
    "dateFormat": "DD/MM/YYYY",
    "closeOnSelected": true,
    "futureonly": true
});
0
Ramakrishnan Ramar

**これは私のwordpressプラグイン**

 jQuery(document).ready(function($) {
           $("#datepicker").datepicker({ minDate: 0});
        });
0
anuj rajak