CODEWITHSUNDEEP
jquerydatepickerrangemaxdatemindate
silvster27
silvster27

Reputation: 1936

jquery datepicker range (mindate maxdate) is not working

I'm trying to set a range for a jquery datepicker that I have on my form but when I open the form it allows me to select any date.

  <input class="span2 datepicker" name="tw#local#changeRequest#DeliveryDate" type="text" id="dp1">


 <!-- jQuery -->
 <script type="text/javascript" src="<#=tw.system.model.findManagedFileByPath('jquery-1.7.2.min.js', TWManagedFile.Types.Web).url;#>"></script>

 <!-- Datepicker Script -->
 <script type="text/javascript" src="<#=tw.system.model.findManagedFileByPath('bootstrap-datepicker_new.js', TWManagedFile.Types.Web).url;#>"></script>

 <script type="text/javascript">
 $(document).ready(function(){

 $( "#datepicker" ).datepicker({ minDate: -20, maxDate: "+1M +10D" });

 });
 </script>

Upvotes: 6

Views: 35770

Answers (7)

Fairouz
Fairouz

Reputation: 1

When implementing the daterangepicker, I would receive a NaN value in the calendar every time I set both minDate & maxDate to a date. Despite working when I code them separately, they would prompt the said error when running together. I found out that if I added startDate & endDate, the calendar will no longer display NaN.

<script>
        let first_date = "{{first_date}}";
        let last_date = "{{last_date}}";

        console.log(first_date);
        console.log(last_date);
        $('#picker').daterangepicker({
            opens: 'right',
            timePicker: true,
            timePicker24Hour: true,
            minDate: first_date,  // with only minDate & maxDate, NaN value in the calender 
            startDate: first_date,   // startDate & endDate highlights the date range and prints values in calender 
            endDate: last_date,
            maxDate: last_date,
            locale: {
                format: 'DD-MM-YYYY HH00'
            }
        }, function (start, end, label) {
            $('#start').text(start.format('DD-MM-YYYY HH00'))
            $('#end').text(end.format('DD-MM-YYYY HH00'))
        })
</script>

To briefly give context, I am developing a web portal using the Flask framework. The {{first_date}} is a jinjja syntax that was transferred from another web page.

To understand more about daterangepicker.js functionality, the link below will tell you all there needs to know about it. https://www.youtube.com/watch?v=f5QA8N4tQwg&ab_channel=CodeTube

Upvotes: 0

AlejandroBec
AlejandroBec

Reputation: 123

You can also test this.

$('#datepicker1').datepicker({
  format: 'mm/dd/yyyy',
});

$('#datepicker1').on('change', function() {
  $('#datepicker2').datepicker({
    startDate: $('#datepicker1').val()
  })
});

Upvotes: 1

yogesh mhetre
yogesh mhetre

Reputation: 121

just add in controller if you are using angularjs $scope.today = new Date()

and in html min-date="today"

Upvotes: 0

VivekS
VivekS

Reputation: 11

One more thing, you might have noticed that already, but your selector is searching for ID as "datepicker". Whereas, your datepicker is your CLASS. So I think you need to change from "#datepicker" to ".datepicker".

Upvotes: 1

VishalDream
VishalDream

Reputation: 341

$('#datepicker').datepicker({
            maxDate: '0'}),

Use '0' for select max date today

You can also reference jQueryUI Api

Upvotes: 4

vadim
vadim

Reputation: 1726

$('#datepicker').datepicker({
                maxDate: '+1m',
                minDate: '-20d',
                });

When min and max date are expressions they should be as strings and properly defined. Here is link for jquery ui datepicker MaxDate section.

Upvotes: 3

Lyubomir Vasilev
Lyubomir Vasilev

Reputation: 3030

As far as I know, it should be done like this:

$("#datepicker").datepicker('option', {minDate: <some date>, maxDate: <some date>});

What you are missing is that you should set them using 'option'.

Upvotes: 11

Related Questions