Daterangepicker - 無法選擇今天的日期

我在下面的代碼中使用了日期選取器在我的應用程序中。使用daterangepicker插件。Daterangepicker - 無法選擇今天的日期

https://jsfiddle.net/jkenluv/z9tgdh7k/

HTML

<input class="form-control input-lg" id="tripOne" name="tripOne" />

JS：

var nowDate = new Date(); 
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 
var maxLimitDate = new Date(nowDate.getFullYear() + 1, nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 

$('input[name="tripOne"]').daterangepicker({ 
"autoApply": true, 
"autoUpdateInput": false, 
"singleDatePicker": true, 
"minDate": today, 
"maxDate": maxLimitDate, 
"opens": "left", 
"locale": { 
    format: 'DD MMM YYYY' 
    } 
}, function (start, end) { 
    $("#tripOne").val(start.format('DD MMM YYYY')); 
    $('#tripOne').parent().parent().removeClass('has-error'); 
}); 

$(function() { 
    $('.calendar.right').show(); 
});

但是，我不能能夠選擇'今天的日期'或'已選定日期'。這對我們的要求是強制性的。請讓我知道如何解決這個問題？

感謝

來源

2017-02-18 TDG

您的代碼似乎工作得很好！哪裏有問題？ –

例如：上載..選擇2月18日（今天的日期）..它不會被點擊。但是，如果您選擇第19 ..它將工作 – TDG

我不知道爲什麼它不適合你。但它爲我工作。我可以選擇今天的日期。 –

請read the doc

如果您使用的日期範圍作爲一個過濾器，你可能要一個選擇器連接到輸入，但離開它由空默認。此示例顯示如何使用autoUpdateInput設置和 apply和cancel事件來完成事件。

因此，無論您可以刪除autoUpdateInput線也可以將其設置爲true。

"autoUpdateInput": false,

"autoUpdateInput": true,

來源

2017-02-18 08:24:44

如果我刪除這個...然後onload ..我可以看到今天的日期..但是，我們的日曆輸入值必須在用戶點擊輸入後觸發。此外，我仍然可以點擊今日或已選日期 – TDG

var nowDate = new Date(); 
    var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0); 
    var maxLimitDate = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate()+360, 0, 0, 0, 0); 

    $('input[name="tripOne"]').daterangepicker({ 
    "autoApply": true, 
    "autoUpdateInput": false, 
    "singleDatePicker": true, 
    "minDate": today, 
    "maxDate": maxLimitDate, 
    "locale": { 
     format: 'DD MMM YYYY' 
    } 
    },function(start) { 
     $("#tripOne").val(start.format('DD MMM YYYY')); 
     $('#tripOne').parent().parent().removeClass('has-error'); 
     setTimeout(function(){ 
      $('.daterangepicker').addClass('returnTripEndDatePicker'); 
      $('.departure--date').hide(); 
      $(".returnTripEndDatePicker").prepend("<div class='departure--date'>Select Return Date</div>"); 
      $("#tripTwo").focus(); 
     },120); 
     var returnTripStartDate = new Date(Date.parse(start)); 
     $(function() { 
     $('.calendar.right').show(); 
     }); 
    }); 
    $('input[name="tripTwo"]').daterangepicker({ 
     "autoApply": true, 
     "autoUpdateInput": false, 
     "singleDatePicker": true, 
     "minDate": today, 
     "maxDate": maxLimitDate, 
     "locale": { 
      format: 'DD MMM YYYY' 
     } 
     },function(end) { 
      $("#tripTwo").val(end.format('DD MMM YYYY')); 
      $('#tripTwo').parent().parent().removeClass('has-error'); 
     }); 
    $('input[name="tripOne"]').on('apply.daterangepicker', function(ev, picker) { 
     $(this).val(picker.startDate.format('DD MMM YYYY')); 
     }); 
     $('input[name="tripTwo"]').on('apply.daterangepicker', function(ev, picker) { 
     $(this).val(picker.startDate.format('DD MMM YYYY')); 
     });

來源

2017-02-18 08:35:14

嗨普罕...感謝您的寶貴意見。 90％正常工作。 – TDG

但是，https://jsfiddle.net/jkenluv/z9tgdh7k/2/請檢查這個鏈接..加載後..今天的日期是不可點擊的..如果我選擇第十九個二次方，並選擇下一個輸入日期第十九。有用。但是，今天的日期不能僅在1日輸入 – TDG

無法理解。你可以通過點擊這裏告訴我你的意思嗎？ –

做

$("element1").datetimepicker({ maxDate: moment.endOf('day') }) 
$("element2").datetimepicker({ maxDate: moment.endOf('day') })

如果使用minDate反其道而行之

$("element1").datetimepicker({ minDate: moment.startOf('day') }) 
$("element2").datetimepicker({ minDate: moment.startOf('day') })

來源

2017-07-31 18:52:37

在daterangepicker初始化後添加以下函數：

$('input[name="tripOne"]').on('apply.daterangepicker', function (ev, picker) { 
     $(this).val(picker.startDate.format('DD MMM YYYY')); 
});

來源

2017-09-15 10:36:33 Yogesh

Daterangepicker - 無法選擇今天的日期

回答

相關問題