skip to Main Content

How do I display week starts from Sunday in datepicker along with week numbers.

eg: I need Week starting from 12/03/23(Sunday) should display week number 11 instead of 10. Any help appreciated. thanks

enter image description here

my code:-

$(document).ready(function() {
  $('.date-picker').datepicker({
    showWeek: true,
    firstDay: 0,
    changeMonth: true,
    changeYear: true,
    showButtonPanel: false,
    dateFormat: 'dd/mm/yy',
    autoclose: true,
  });
});
<input name="sel-date" id="sel-date" class="date-picker" value="<?= $week_start ?>">

2

Answers


  1. You can use calculateWeek function to change the week number:

    $('.date-picker').datepicker({
      showWeek: true,
      firstDay: 0,
      changeMonth: true,
      changeYear: true,
      showButtonPanel: false,
      dateFormat: 'dd/mm/yy',
      autoclose: true,
      calculateWeek: date => $.datepicker.iso8601Week(new Date(date)) + 1,
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    Date Picker on input field: <input type="text" name="sel-date" id="sel-date" class="date-picker">
    Login or Signup to reply.
  2. You can use the calculateWeek property from the datepicker also you can use beforeShowDay to disable the dates like i have done in the snippet..

    let me know

    Date Picker on input field:

    $(function(){
     $('.date-picker').datepicker({   
       showWeek: true,      
       firstDay: 0,
       changeMonth: true,
       changeYear: true,
       showButtonPanel: false,
       dateFormat: 'dd/mm/yy',
       autoclose: true,
       calculateWeek: date => $.datepicker.iso8601Week(new Date(date)) + 1,
       beforeShowDay: function(date) {
         return [date.getDay() === 0,''];
       },  
     });
    });
    #ui-datepicker-div { font-size: 12px; } 
    Date Picker on input field: <input name="sel-date" id="sel-date" class="date-picker" value="12/03/2023">
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search