CODEWITHSUNDEEP
jqueryfunctionuser-interfacedatepicker
Sajir
Sajir

Reputation: 93

JQuery UI datepicker external function call in option not working

The getDefault_Date() function not calling when datepicker initialize Sombody please explain where is the error

    $('.dtpExpiryDate').datepicker({
        numberOfMonths: 1,
        showButtonPanel: false,
        dateFormat: 'dd/mm/yy',
        showOn: 'both',
        buttonImage: "images/calender.jpg",
        buttonImageOnly: true,
        changeMonth: true,
        changeYear: true,            
        minDate: 0,
        maxDate: '+20Y',
        defaultDate: getDefault_Date()
    });


    function getDefault_Date() {
        var issueDate = $.trim($('.dtpIssueDate').val());
        console.log(issueDate);
        if (issueDate != '') {
            var dateArray = issueDate.split("/");
            dateArray[2] += 10;
            var defaultDate = "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";
            return defaultDate;
        } else {
            return 0;
        }
    }

Upvotes: 1

Views: 1068

Answers (4)

Sajir
Sajir

Reputation: 93

I figured it out I am calling the function when datepicker is initializing at that time the issuedate is empty so i placed the function call in the onclose event of the issudate datepicker now everything works fine thank you all for answering.

script from jQuery Documentation

$(function() {
        $( "#from" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onClose: function( selectedDate ) {
                $( "#to" ).datepicker( "option", "minDate", selectedDate );
            }
        });
        $( "#to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onClose: function( selectedDate ) {
                $( "#from" ).datepicker( "option", "maxDate", selectedDate );
            }
        });
    });

Upvotes: 0

bipen
bipen

Reputation: 36541

initialize your datepicker without defaultDate.

after initailize, do your calculation and set your deafultDate.

var ddate="";
var issueDate = $.trim($('.dtpIssueDate').val());
if (issueDate != '') {
    var dateArray = issueDate.split("/");
    dateArray[2] += 10;
    var ddate= "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";

} 
$('.dtpExpiryDate').datepicker( "option", "defaultDate", ddate );

NOTE: Make sure your ddate is in correct dateFormat i.e dd/mm/yy... the dateFormat you specified when you initailizied the datpicker..

defaultDate supports a string in the format defined by the dateFormat option, or a relative date.

go throught the API documentaion of the datepicker

http://api.jqueryui.com/datepicker/#option-dateFormat

Upvotes: 2

Murali N
Murali N

Reputation: 3498

instead of this statement

 var defaultDate = "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";

do this

var defaultDate = new Date(dateArray[0], dateArray[1], dateArray[2]);

if defaultDate is not expected date you should try to swap those dateArray items as per date, month, year

Upvotes: 0

anuj arora
anuj arora

Reputation: 831

The function should be outside of the jquery brackets, like

$(document).ready(function(){

$('.dtpExpiryDate').datepicker({
    numberOfMonths: 1,
    showButtonPanel: false,
    dateFormat: 'dd/mm/yy',
    showOn: 'both',
    buttonImage: "images/calender.jpg",
    buttonImageOnly: true,
    changeMonth: true,
    changeYear: true,            
    minDate: 0,
    maxDate: '+20Y',
    defaultDate: getDefault_Date()
});

});

function getDefault_Date() {
    var issueDate = $.trim($('.dtpIssueDate').val());
    console.log(issueDate);
    if (issueDate != '') {
        var dateArray = issueDate.split("/");
        dateArray[2] += 10;
        var defaultDate = "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";
        return defaultDate;
    } else {
        return 0;
    }
}

Also if it is not working, you can place the function matter in front of defaultDate, like

defaultDate: function(){
             var issueDate = $.trim($('.dtpIssueDate').val());
    console.log(issueDate);
    if (issueDate != '') {
        var dateArray = issueDate.split("/");
        dateArray[2] += 10;
        var defaultDate = "'" + dateArray[0] + "/" + dateArray[1] + "/" + dateArray[2] + "'";
        return defaultDate;
    } else {
        return 0;
    }
}

Upvotes: 0

Related Questions