lundi 1 août 2016

Jquery datepicker if day=friday change options of other input dropdown

I want to let users set a date (with jquery datepicker) and a time for a meeting. Problem is, that the possible time range for the input options is shorter on fridays.

I managed to get it running onselect, so if a user selects a friday, everything works fine. But if the initial date is a friday there is no selection and therefor the function is not called. I couldn't find any onload methods, so what can I do?

$(function() {
            $('#datepicker').datepicker({
                prevText: '<zurück', prevStatus: '',
                prevJumpText: '<<', prevJumpStatus: '',
                nextText: 'Vor>', nextStatus: '',
                nextJumpText: '>>', nextJumpStatus: '',
                currentText: 'heute', currentStatus: '',
                todayText: 'heute', todayStatus: '',
                clearText: '-', clearStatus: '',
                closeText: 'schließen', closeStatus: '',
                minDate:0,
                maxDate:"+14D",
                monthNames: ['Januar','Februar','März','April','Mai','Juni',
                'Juli','August','September','Oktober','November','Dezember'],
                monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun',
                'Jul','Aug','Sep','Okt','Nov','Dez'],
                dayNames: ['Sonntag','Montag','Dienstag','Mittwoch','Donnerstag','Freitag','Samstag'],
                dayNamesShort: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'],
                showMonthAfterYear: false,
                showOn: 'both',
                buttonImage: '/wp-content/themes/advoneo/img/icons/calendar-small.png',
                buttonImageOnly: true,
                dateFormat:'dd.mm.yy',
                beforeShowDay : function (date) {
                  var dayOfWeek = date.getDay ();
                  // 0 : Sunday, 1 : Monday, ...
                  if (dayOfWeek == 0 || dayOfWeek == 6) return [false];
                  else return [true];
                },
                onSelect: function (selectedDate) {
                    var date = $(this).datepicker('getDate');
                    var day = date.getDay();
                        if(day === 5 && navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)
                           {
                            var otherFridayTime = $("#SATerminUhrzeit").find('option[value="13:00"], option[value="13:30"], option[value="14:00"], option[value="14:30"], option[value="15:00"], option[value="15:30"], option[value="16:00"], option[value="16:30"], option[value="17:00"], option[value="17:30"], option[value="18:00"], option[value="18:30"]').detach();                                                                    
                            $("#SATerminUhrzeit").append(otherFridayTime);
                        }                       
                    else {
                        if (day === 5) {    
                        $("#SATerminUhrzeit").find('option[value="13:00"], option[value="13:30"], option[value="14:00"], option[value="14:30"], option[value="15:00"], option[value="15:30"], option[value="16:00"], option[value="16:30"], option[value="17:00"], option[value="17:30"], option[value="18:00"], option[value="18:30"]').hide();                                                                    
                        }
                        else {                                              
                        $("#SATerminUhrzeit").find('option[value="13:00"], option[value="13:30"], option[value="14:00"], option[value="14:30"], option[value="15:00"], option[value="15:30"], option[value="16:00"], option[value="16:30"], option[value="17:00"], option[value="17:30"], option[value="18:00"], option[value="18:30"]').show();                                                                    
                        }
                    }
                },
                firstDay: 1
            });
        });
          </script>

Language is in German because thats where I come from. And because hide() and show() don't work for safari there is that extra "if". That is not working also but that's a problem for another question.

I hope you can help me I'm really stuck here...

Aucun commentaire:

Enregistrer un commentaire