CODEWITHSUNDEEP
htmljquery-ui-datepicker
Orionis
Orionis

Reputation: 1021

JQuery-UI DatePicker does not set the correct minDate and maxDate

Possibly this is an old issue...but let me try. I just thought to renew some old WEB pages using the UI components, particularly the Datepicker widget that I never used. After a lot of studying and a number attempts I was able to 'understand' something creating a simple test page with 2 widget; I want the user to select a date between 2 limiting dates got from a DB.

Everything looks fine except the minDate and maxdate settings. Setting the limits with 2 strings (with format set to 'dd/mm/yy'):

    var firstStr="01/09/24";
    var lastStr="30/09/24";

I get a span from Oct,27 upto Nov, 25, with any apparent relation with the wanted dates. This is the zipped page I'm using (I enclosed the CSS and JS inside this page):

<!DOCTYPE html>
<html class="no-js" lang="it" >
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Stats</title>
<link rel="stylesheet" href="css/jquery-ui.css">    
<link rel="stylesheet" href="css/jquery-ui.theme.css">  

<style>
body{background:#444;}

P.statP {
    display:inline-block;
    width:150px; 
    color:#fff; 
    border:1px solid #ff8;
    margin:0;
        text-align:center;
    }
    
Input.statI {
    width:148px;
    text-align:center;
}

DIV.statDiv{
    float:left;

    margin-left:10px;
    width:320px; 
    border:1px solid #faa;  
}

Label.statLbl {
    display:inline-block;
    width:150px; 
    color:#f84;
    }
    </style>    
</head>

<body>
    
<div class="sfondoStat">                                            
      <div class="statDiv">     
            <label class="statLbl" for="datepickerFrom">&nbsp;Start at: </label>            
            <input class="statI" type="text"  id="datepickerFrom">
            <p class="statP" id="date1"></p>
            <p class="statP">&nbsp;<span id="d1"></p>
        </div>
        
      <div class="statDiv">     
            <label class="statLbl"  for="datepickerTo">&nbsp;End at: </label>                       
            <input  class="statI" type="text"  id="datepickerTo">   
            <p class="statP"  id="date2"></p>
            <p class="statP">&nbsp;<span id="d2"></p>
      </div>
</div>

<!-- ======================== scripts  ============================= -->

<script src="js/jquery-2.2.4.min.js"></script>
<script src="js/jquery-ui.js"></script>

<script type="text/javascript">
    var today=Date();
    var format = "dd/mm/yy";
    var firstStr="01/09/24";
    var lastStr="30/09/24";
    var startDate = "";
    var endDate = "";

    $(document).ready(function(){   

        $("#date1").text("min: "+firstStr);
        $("#date2").text("max: "+lastStr);

        $.datepicker.setDefaults({
            dateFormat: format,
            changeMonth: true,
            changeYear: true,   
          showOn: "focus",
            numberOfMonths: 1,  
            minDate: firstStr,
            maxDate: lastStr,
            setDate: today 
        });


        $("#datepickerFrom").datepicker({     
            onSelect: function(startDate){
              $("#d1").text(startDate),
              $("#datepickerTo").datepicker("option","minDate",startDate)
            }
        });
              
              
        $("#datepickerTo").datepicker({
            onSelect: function(endDate){
                $("#d2").text(endDate)          
            }
        });
            
    });
      
</script>

  </body>
</html>

I saw several similar topics on this issue, but none gave me a solution. Even setting: minDate = new Date (firsString) - and the same for maxDate - did not make the job...it is even worst.

Upvotes: -1

Views: 62

Answers (1)

Mahmoud Saleh
Mahmoud Saleh

Reputation: 32

You have only one issue, the date format is set to dd/mm/yy that means you need to pass 4-digits as year format not 2-digits. only update the format to the below code:

var format = "dd/mm/y";

Upvotes: 1

Related Questions