CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrapdatepicker
Alagappan Ramu
Alagappan Ramu

Reputation: 2358

Bootstrap Datepicker attributes not being set

I am trying to set the startDate for my datepicker along with autoclose:true. However, it doesn't work.

Can you please point to what I am doing wrong? I have the code up on jsfiddle at http://jsfiddle.net/alagappanr/9Xek7/

Effective Date:  <input type=text size=10 id=effectivedate maxlength=10 name=efdate><br/>
Expiration Date: <input type=text size=10 maxlength=10 name=exdate id=expirationdate>

The JavaScript that I have written for the datepicker is as follows:

jQuery(function() {
     var efDP = jQuery("#effectivedate");
     var exDP = jQuery("#expirationdate");
     efDP.datepicker("setDate", new Date());
     efDP.datepicker("update");
     exDP.datepicker("setDate", new Date(Date.now()+259200000));
     exDP.datepicker("update");
     exDP.datepicker({autoclose:true});
     efDP.datepicker({
         startDate: new Date(),
         autoclose:true,
         });
     efDP.on("changeDate", function(ev){
             var effectDate = new Date(jQuery("#effectivedate").val());
             jQuery("#expirationdate").datepicker("setDate", new Date(effectDate.getTime()+259200000));
             jQuery("#expirationdate").datepicker("update");
         });
   });

Upvotes: 1

Views: 747

Answers (2)

Stephan Vierkant
Stephan Vierkant

Reputation: 10144

You are trying to update a non-existing datepicker on the first few lines. exDP.datepicker({autoclose:true}); creates a new instance. You have to set the options directly:

jQuery(function() {
    var efDP = jQuery("#effectivedate").datepicker({autoclose:true});
    var exDP = jQuery("#expirationdate").datepicker({autoclose:true});

    efDP.datepicker('setDate', new Date()).datepicker('update');
    exDP.datepicker("setDate", new Date(Date.now()+259200000)).datepicker('update');
    efDP.on("changeDate", function(e){
        exDP.datepicker("setDate", new Date(e.date.getTime() +259200000)).datepicker('update');
    });
});

http://jsfiddle.net/svierkant/9Xek7/7/

Please take a look at the documentation, to see if you can reuse objects from events. On the first line of your .on function, your are getting a string from an object (.val()) and making a Date object from it again. The changeDate event however, returns a Date object (which can be reused). Easier coding, more readable and maintainable code.

Upvotes: 1

vinayakj
vinayakj

Reputation: 5681

You should use below coding style.

var efDP = jQuery("#effectivedate");
 efDP.datepicker({
         startDate: new Date(),
         autoclose:true,
         });
 efDP.datepicker("update", new Date(Date.now()+259200000));

Upvotes: 1

Related Questions