Issue in changing view by dropdown of bootstrap datepicker

Question

I am facing problem with the bootstrap datepicker when I am trying to change the view of the datepicker as per mode selected in the dropdown.

Following is the HTML code :

Mode : <select id="mode">
    <option value="1">Day</option>
    <option value="2">Month</option>
    <option value="3">Year</option>
</select>
<br><br>
From : <input type="text" id="from" /> 
&nbsp;To : <input type="text" id="to" />

jQuery Code:

$("#from").datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
});
$("#to").datepicker({
    autoclose: true,
    startDate: '+1d',
    endDate: '+1y',
    clearBtn: true,
    todayHighlight: true,
    orientation: "top right"
});

$("#mode").change(function(){
    jQuery("#to").removeAttr('disabled');
    $("#from").val('');
    $("#to").val('');
    $("#from").datepicker('update');
    $("#to").datepicker('update');
    $("#from").datepicker("remove");
    $("#to").datepicker("remove");
    if ($(this).val() == 2){
        $("#from").datepicker({
            autoclose: true,
            startDate: '0',
            endDate:'+1y',
            startView: 1,
            minViewMode: 1,
            clearBtn: true,
        });
        $("#to").datepicker({
            autoclose: true,
            startDate: '0',
            startView: 1,
            endDate:'+1y',
            minViewMode: 1,
            clearBtn: true,
            orientation: "top right"
        });
        $("#from").datepicker().on("clearDate", function(){
            $("#to").val('');
            $("#to").datepicker('update');
        });
        $("#to").datepicker().on("clearDate", function(){
            $("#from").val('');
            $("#from").datepicker('update');
        });

        $("#from").datepicker().on("changeDate", function(){
            var fromDate    = $("#from").datepicker("getDate");
            if (fromDate != "Invalid Date" && fromDate != '' ) {
                fromDate.setMonth(fromDate.getMonth() + 1, 1);
                $("#to").datepicker("setDate", fromDate);
                $("#to").datepicker("setStartDate", fromDate);
                $("#to").datepicker("update");
            }
        });
        $("#to").datepicker().on("changeDate", function(){
            var toDate  = $("#to").datepicker("getDate");
            if (toDate != "Invalid Date") {
                $("#from").datepicker("setEndDate", toDate);
                $("#from").datepicker("update");
            }
        });
    }else if($(this).val() == 3){
        jQuery("#to").attr('disabled', 'disabled');
        $("#from").datepicker({
            autoclose: true,
            startDate: '0',
            endDate:'+1y',
            startView: 0,
            minViewMode: 0,
            clearBtn: true,
        });

        //clear event for the datepicker
        $("#from").datepicker().on("clearDate", function(){
            $("#to").val('');
            $("#to").datepicker('update');
        });
        $("#to").datepicker().on("clearDate", function(){
            $("#from").val('');
            $("#from").datepicker('update');
        });

        //set startdate event for the datepicker
        $("#from").datepicker().on("changeDate", function(){
            var fromDate    = $("#from").datepicker("getDate");
            if (fromDate != "Invalid Date") {
                fromDate.setDate(fromDate.getDate() + 365);
                $("#to").datepicker("setDate", fromDate);
                $("#to").datepicker("setStartDate", fromDate);
            }
        });
        $("#to").datepicker().on("changeDate", function(){
            var toDate  = $("#to").datepicker("getDate");
            if (toDate != "Invalid Date") {
                $("#from").datepicker("setEndDate", toDate);
            }
        });
    }else{
        $("#from").datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
        });
        $("#to").datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
            orientation: "top right"
        });
    }
});

What I am trying to do is, I have three types of modes : Day, Month and Year. When I select the month in the dropdown, on its change event I need to remove the all the previous events bind with the datepicker and bind new events with the datepickers.

But, After changing the mode several time the events are not binded anymore and it stops setting value in the input boxes.

I am not sure if this is the proper way to do it, If there is any other way to do it then it will be very helpful.

Any help will be appriciated. Thanks in advance.

This is the jsfiddle link of the code : http://jsfiddle.net/tejashsoni111/aL9vB/2/

This is the link to the documentation : http://bootstrap-datepicker.readthedocs.org/en/release/

Answer 1

Just one way, create a prototype for your date/timepicker like this

<div id="fake_from_container" style="display:none">
<input type="text" class="fake_text" /> 
</div>
<div id="from_container>
</div>

Then whenever you want to init the date/timepicker, try

$('#from_container').html($('#fake_from_container').html());
$('.fake_text', $('#from_container')).attr('id', 'from');

$("#from").datepicker().....

The idea is: first, the fake_from_container is just to store the html code for input, Eachtime you want to re-init the date/time picker, you will create the input from beginning, by copy the html code from $('#fake_from_container') to $('#from_container'), after that, #from_container will be

<div id="from_container>
    <input type="text" class="fake_text" /> 
</div>

Then, set the id for the input item inside #from_container

$('.fake_text', $('#from_container')).attr('id', 'from');

You will have

<div id="from_container>
    <input type="text" class="fake_text" id='from' /> 
</div>

Then, you can init the date/timepicker with whatever option for a fresh input #from

Answer 2

seems like you need .input-daterange.

full jsfiddle demo

html

<br>Mode :
<select id="mode">
    <option value="1">Day</option>
    <option value="2">Month</option>
    <option value="3">Year</option>
</select>
    <br /><br />
<div id="datepicker-container"> </div>

---

Now load .input-daterange into #datepicker-container dynamically (each time select box changes):

<div class="input-daterange" id="datepicker">from:
     <input type="text" name="start" />to:
     <input type="text" name="end" />
</div>

Then everytime the selectbox(#mode) changes, initiate the .input-daterange with datepicker() function based on selected option in selectbox(#mode).

ie full javascript:

function initDatepicker(mode){
    $('#datepicker-container').html(''+
     '<div class="input-daterange" id="datepicker">from:'+
         '<input type="text" name="start" />to:'+
         '<input type="text" name="end" />'+
    '</div>');
    var $dtpicker=$('#datepicker-container > .input-daterange');
    $dtpicker.find(':input').val('');
    if (mode == 1) {//Day
        $dtpicker.datepicker({
            autoclose: true,
            startDate: '+1d',
            endDate: '+1y',
            clearBtn: true,
            todayHighlight: true,
        });
    } else if (mode == 2) {//Month
        $dtpicker.datepicker({
            autoclose: true,
            startDate: '0m',
            endDate: '+1y',
            clearBtn: true,
            startView: 1,
            minViewMode: 1
        });
    } else if (mode == 3) {// Year
        $dtpicker.datepicker({
            autoclose: true,
            startDate: "0y",
            endDate: "+1y",
            clearBtn: true,
            startView: 2,
            minViewMode: 2
        });
    } 
}

$("#mode").change(function () {    
    $('#datepicker-container > .input-daterange').datepicker('remove');
    initDatepicker($(this).val());
});
initDatepicker(1);// for first time initiate Day