开发者

Help changing a select form field depending on calendar date

开发者 https://www.devze.com 2023-03-13 06:50 出处:网络
I have a jquery calendar herehttp://offline.raileisure.com/ I am trying to get the duration select box to change its values depending on what day is selected..

I have a jquery calendar here http://offline.raileisure.com/

I am trying to get the duration select box to change its values depending on what day is selected..

Now the c开发者_开发技巧alendar only lets you choose Monday's or Fridays..

I need the select box to only show the following options..

When Monday (5 Days) When Friday (3 Days, 7 Days, 14 Days)

I don't know where to start :-(

Thanks

Lee


You could do this that way :

$("#datepicker").datepicker({
    onSelect: function(e) {
        var date = new Date(e);
        var day = date.getDay(); // 0 = sunday etc...        
        // clean all the options
        $("#duration").empty();
        // if monday
        if (day === 1) {
            // add "5 days" options
            $("#duration").append("<option value='5'>5 days</option>");
        // else if friday
        } else if (day === 5) {
            // add 3 / 7 / 14 days options
            $("#duration").append("<option value='3'>3 days</option>"
                                  + "<option value='7'>7 days</option>"
                                  + "<option value='14'>14 days</option>");
        } else { // else...
        }
    }
});

When the user picks a date, if fills the <select> according to the selected day.

jsFiddle example here


0Oki

You can fire a function on select of a day. When initializing the datepicker do this:

.datepicker({
   onSelect: function(dateText, inst) { 
               var aDate = dateText.split("/");
               var date = new Date(aDate[2], aDate[1] - 1, aDate[0]); //The - 1 is because the month is zero based.
               alert(date.getDay());
             }
}); 

You can parse the dataText variable and find out if its a monday or friday ... than populate the drop down accordingly :)

Source : http://jqueryui.com/demos/datepicker/#event-onSelect

HTH :)

0

精彩评论

暂无评论...
验证码 换一张
取 消