how to show custom text in jquery datepicker without loosing existing functionality

Question

I created a jQuery datepicker for date selection.I am showing custom using

$("#datepicker").datepicker({
    onSelect: function (dateText, inst) {
        var date = $('#datepicker').datepicker('getDate');
        date.setDate(date.getDate() + 6);
        $('#datepicker').val('Week: ' + dateText + " to " + $.datepicker.formatDate('mm/dd/yy', date));
    }
}).attr('readonly', 'readonly');

After selecting date custom text is showing but if i reopened datepicker the selected date is not highlighted. I want to highlight selected date: jsFiddle.

Answer 1

you could use the beforeShow function to reset the value like so

 $("#datepicker").datepicker({
     onSelect: function (dateText, inst) {
         var date = $('#datepicker').datepicker('getDate');
         date.setDate(date.getDate() + 6);
         $('#datepicker').val('Week: ' + dateText + " to " + $.datepicker.formatDate('mm/dd/yy', date));
     },
     beforeShow: function(input, inst) {
         if($(input).val().length > 0) {
             var ar = $(input).val().match('[0-9]{2}/[0-9]{2}/[0-9]{4}');
             $('#datepicker').datepicker('setDate',new Date(ar[0]));
         }
     }
 }).attr('readonly', 'readonly');

fiddle

Answer 2

above code working good, but the problem is not working when double clicking on dates. So i customized code like.

$(document).ready(function () {
        $(function () {
            var dateData, isOnSelectFired = 0;
            $("#txtReportDate").datepicker({
                dateFormat: "mm/dd/yy", changeMonth: true, changeYear: true//, maxDate: new Date($("#hdnMaxDate").val()),
                , beforeShow: function (input, inst) {
                    isOnSelectFired = 0;
                    dateData = $(input).val();
                    if ($(input).val().length > 0) {
                        var ar = $(input).val().match('[0-9]{2}/[0-9]{2}/[0-9]{4}');
                        $(input).datepicker('setDate', new Date(ar[0]));
                    }
                },
                onSelect: function (dateText, inst) {
                    isOnSelectFired = 1;
                    var date = $('#txtReportDate').datepicker('getDate');
                    date.setDate(date.getDate() + 6);
                    $('#txtReportDate').val('Week: ' + dateText + " to " + $.datepicker.formatDate('mm/dd/yy', date));
                },
                onClose: function (dateText, inst) {
                    if (isOnSelectFired != 1) {
                        $('#txtReportDate').val(dateData);
                    }
                }
            }).attr('readonly', 'readonly');
        });
   });
});

jsFiddle