1

I have a question on how to make sure whenever this hidden value changed, the datepicker will reload. Because the datepicker will used the hidden value to highlight the days. So whenever the hidden value changed, the highlighted days in datepicker also will change.

Here my code so far. $("#dates").val() is a hidden value. sample of the value is 2013/11/11-2013/11/17. This value will highlight the whole week (mon-sun). There's a previous and next button, which will changed the $("#dates").val() by week eg: 2013/11/18-2013/11/24, 2013/11/25-2013/12/1

I have no problem to trigger if the hidden value is changed, the problem is I want the datepicker to reload once the hidden value changed. so that the highlighted week while changed accordingly. currently whenever the hidden value change, the highlighted week will remain the same.

I did try to used $( "#datepicker" ).datepicker( "refresh" ); whenever the hidden value changed, but still no luck. Please help me. Thanks

$(document).ready(function() {

var dates = $("#dates").val();
var lt = dates.split("-");
var ts = lt[0].split("/");
var te = lt[1].split("/");
var date1 = new Date(ts[0], ts[1]-1, ts[2]);
var date2 = new Date(te[0], te[1]-1, te[2]);

$(function(){

$('#datepicker').datepicker({     
    dateFormat: 'yy/mm/dd',
    beforeShowDay: highlightDays,
    onSelect: function(dateText, inst) {
            $("#showdaybtn").addClass("fcurrent");
            $("#showweekbtn").removeClass("fcurrent");
            $("#showmonthbtn").removeClass("fcurrent");
            $('#type').val('1');
            var p = $("#gridcontainer").swtichView("day").BcalGetOp();
            if (p && p.datestrshow) {
                $("#txtdatetimeshow").text(dateText);
                $("#hdnTempData").val(dateText);
            }
            showhideToday('day');
            glbView = "day";        
    }
});

function highlightDays(date) {
if (date >= date1 && date <= date2) {
            return [true, 'highlight', 'tooltipText'];
        }  
      return [true, ''];
}   
});

});

//to check if the hidden value changed
$(document).on('change', '#dates', function () {
    $( "#datepicker" ).datepicker( "refresh" );
});
user2699175
  • 929
  • 2
  • 9
  • 16
  • several issues....first, how can you register a change event on a hidden input? Won't fire if value is changed from code. Second, all your date calcs are done on page load, if `$("#dates")` is changed, you need to do calcs again – charlietfl Nov 13 '13 at 03:34
  • calling `$(function(){..` inside `$(document).ready` is redundant...they are exactly the same thing. http://api.jquery.com/ready/ – charlietfl Nov 13 '13 at 03:35
  • @charlietfl i used the last code, which is `$(document).on('change', '#dates', function () { $( "#datepicker" ).datepicker( "refresh" ); });` to check if the hidden value changed, i try to display alert and it's worked. so i do think there's no problem with that code. – user2699175 Nov 13 '13 at 04:17
  • http://stackoverflow.com/questions/6533087/jquery-detect-value-change-on-hidden-input-field to – user2699175 Nov 13 '13 at 05:04

0 Answers0