Question 36363 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Change bootstrap date picker views dynamically – Jquery

I need to change the view of the date picker dynamically. Have few buttons(month, year, day). I am trying to achieve the below:

  1. On selecting particular button say month

I want date picker to render the months only.

  1. On selecting year

I want date picker to render the years only.

Below is the code and jsbin link

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap- 
 datepicker.js"></script>
<link rel="stylesheet" 
 href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap- 
datepicker/1.3.0/css/datepicker.css"/>
</head>
<body>
    <input id="startdate">
    <br><br>
    <button class="btn" value="year">year</button>
    <button class="btn" value="month">Month</button>
    <button class="btn" value="day">Day</button>
    <script>
       var viewType = "day";    
         $(document).ready(function(){
        });

        const btns = document.querySelectorAll(".btn");
        btns.forEach(function(elem){
            elem.addEventListener("click", function(e){
                viewType = e.target.value;
            });
        });
        $('#startdate').click(function(){   
            CheckCalendarView();
        });

        function CheckCalendarView(){
                if(viewType === "month"){
                        $('#startdate').datepicker({
                            format: 'MM/yyyy',
                            startView: "months",
                            minViewMode: "months",
                        });
                    }else if(viewType === "day"){
                        $('#startdate').datepicker({
                            format: "mm/dd/yyyy",
                            todayHighlight: true,
                            startView: "days",
                            minViewMode: "days",
                            startDate: new Date(),
                        });
                    }else{
                        $('#startdate').datepicker({
                            format: "yyyy",
                            startView: "years",
                            minViewMode: "years",
                        });
                    }   
            }

        
    </script>
</body>

I am failing in the re-rendering/re-initializing the views..

Tags:

2

Answers


  1. 0

    When changing the calendar view, you need to first call $('#startdate').datepicker('remove') to reinitialize the datepicker.

    You also don’t need a click handler on #startdate since clicking it doesn’t affect which calendar should show.

    Your $(document).ready() function was wrong. It should encapsulate the JS initialization you are doing.

    You were also mixing vanilla JS with jQuery to add the click handlers. I’ve turned them into pure jQuery.

    <!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
</head>

<body>
  <input id="startdate">
  <br><br>
  <button class="btn" value="year">year</button>
  <button class="btn" value="month">Month</button>
  <button class="btn" value="day">Day</button>
  <script>
    var viewType = "day";
    $(document).ready(function () {
      $('.btn').click(function () {
        viewType = $(this).val()
        CheckCalendarView();
      });
    });

    function CheckCalendarView() {
      $('#startdate').datepicker('remove')
      if (viewType === "month") {
        $('#startdate').datepicker({
          format: 'MM/yyyy',
          startView: "months",
          minViewMode: "months",
        });
      } else if (viewType === "day") {
        $('#startdate').datepicker({
          format: "mm/dd/yyyy",
          todayHighlight: true,
          startView: "days",
          minViewMode: "days",
          startDate: new Date(),
        });
      } else {
        $('#startdate').datepicker({
          format: "yyyy",
          startView: "years",
          minViewMode: "years",
        });
      }
    }
  </script>
</body>
    Login or Signup to reply.
  2. 0

    Maybe the date-picker lib can not re-initialize.

    I don’t know whether the bootstrap-datepicker has the remove() method or not. If the answer is no, then I will use simple Javascript to hack it, like this:

    <!DOCTYPE html>
<html>
<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.css" />
</head>
<body>
    <input id="startdate">
    <br><br>
    <button class="btn" value="year">year</button>
    <button class="btn" value="month">Month</button>
    <button class="btn" value="day">Day</button>
    <script>
      var viewType = "day";     
            $(document).ready(function(){
            const btns = document.querySelectorAll(".btn");
            btns.forEach(function(elem){
                elem.addEventListener("click", function(e){
                    viewType = e.target.value;
          
          // 📌 use javascript to remove and create a input (id="startdate") 
          document.getElementById("startdate").remove();
          var body = document.getElementsByTagName("body")[0];
          var newElement = document.createElement("input");
          newElement.setAttribute("id","startdate");
          body.insertBefore(newElement, body.firstChild);
          
          // 📌 initialize again
          CheckCalendarView()
                });
            });

            $('#startdate').click(function(){   
                CheckCalendarView();
            });              
            });

            function CheckCalendarView(){
                    if(viewType === "month"){
                            $('#startdate').datepicker({
                                format: 'MM/yyyy',
                                startView: "months",
                                minViewMode: "months",
                            });
                        }else if(viewType === "day"){
                            $('#startdate').datepicker({
                                format: "mm/dd/yyyy",
                                todayHighlight: true,
                                startView: "days",
                                minViewMode: "days",
                                startDate: new Date(),
                            });
                        }else{
                            $('#startdate').datepicker({
                                format: "yyyy",
                                startView: "years",
                                minViewMode: "years",
                            });
                        }   
                }
    </script>
</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search