Develop Reference

How to change timepicker interval value change dynamic?

In timepicker set interval time first time after that no change interval time. Interval time come from dynamically.
I got interval value dynamic but not display in my timepicker.
<script>
$('#book_time').attr('disabled', true);
$('#book_date').datetimepicker({
timepicker: false,
format: 'm-d-Y',
minDate: 0,
onSelectDate: function (ct, $i) {
var branch = $('#branch_id').val();
// console.log($i.val());
if (branch == '')
{
alert("Please select the branch");
$('#book_date').val('');
} else
{
$('#book_time').change();
let data = {
branch_id: branch,
booking_date: $i.val(),
delivery_type: "A"
}
$('#book_time').attr('placeholder', 'Please wait...');
axios.post('<?= SIET_URL ?>book_table_time_management.php', data)
.then(response => {
$('#book_time').attr('disabled', false);
$('#book_time').attr('placeholder', '');
var interval = response.data.stepsDay;
console.log(interval);
$('#book_time').timepicker({
// console.log(response.data.stepsDay);
timeFormat: 'hh:mm p',
interval: interval,
minTime: response.data.startTime,
maxTime: response.data.endTime,
startTime: response.data.startTime,
// changeinterval:true,
dynamic: true,
dropdown: true,
scrollbar: true
});
console.log(response.data.stepsDay);
// };
})
.catch(error => {
});
}
}
});
</script>
I want to change timepicker interval value change.

how to disable past date in semantic-ui-calendar

I am trying to last one week to customize Semantic UI Calendar Disable past dates it is possible. I want like this I pasted example URL below. and my condition is if I select end date then if I open start date so whatever end date I have selected in start calendar after that day all days will be disabled.
Example:
http://jsfiddle.net/nicolapeluchetti/dAyzq/1/
$containerEventsAlerts.find('#rangeStart').calendar({
type: 'date',
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
endCalendar: $containerEventsAlerts.find('#rangeEnd'),
onChange: function(date, text, mode) {
var $rangeEnd = $('#rangeEnd input');
if (spa.isBlank($rangeEnd.val())) {
//console.log($rangeEnd.val());
$('#rangeEnd input').val(text);
}
},
isDisabled: function(date, mode) {
return true;
},
onHidden: function() {
var $rangeStart = $('#rangeStart input');
if (spa.isBlank($rangeStart.val())) {
$rangeStart.val($('#rangeEnd input').val())
}
}
});
$containerEventsAlerts.find('#rangeEnd').calendar({
type: 'date',
maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate()),
startCalendar: $containerEventsAlerts.find('#rangeStart'),
onChange: function(date, text, mode) {
var rangeStart = $('#rangeStart input');
if (spa.isBlank(rangeStart.val())) {
$('#rangeStart input').val(text);
}
},
onHidden: function() {
var $rangeEnd = $('#rangeEnd input');
if (spa.isBlank($rangeEnd.val())) {
$rangeEnd.val($('#rangeStart input').val())
}
}
});

There is no inbuilt solution for this in the library you are using. But there is a hack that can you do like below.
var today = new Date();
$('#rangestart').calendar({
type: 'date',
onChange: function(date, text, mode) {
$('#rangeend').calendar({
type: 'date',
minDate: date
})
}
});
$('#rangeend').calendar({
type: 'date',
onChange: function(date, text, mode) {
$('#rangestart').calendar({
type: 'date',
maxDate: date
})
}
});
There can be some more modifications required as per your need. But you have to do it all manually.

How to remove allDay from view in fullcalender JS?

I am trying to build an application that creates events within fullcalendar. I don't allow user to create an "allDay" event at all at the client side but they still can see it within the view. Is there any method to remove allDays from views completely?
function initCalendar {
if (!jQuery().fullCalendar) {
return;
}
var date = new Date(),
started,
ended
var header = {};
var calendar = $('#calendar').fullCalendar({
header: header,
selectable: true,
selectHelper: true,
select: function (start, end, allDay) {
$('#fc_create').click();
var dateStart = start;
var dateEnd = end;
$(".antosubmit").on("click", function() {
var title = $("#reservation-title").val();
if (title) {
var event = {
editable: true,
title: title,
start: dateStart,
end: dateEnd,
allDay: false
}
calendar.fullCalendar('renderEvent', event, true);
calendar.fullCalendar('unselect');
#('.antoclose').click();
return false;
}
else {
////alert here
}
})
}
})
}

From the docs:
allDaySlot: false
https://fullcalendar.io/docs/agenda/allDaySlot/
** Update for v5:
https://fullcalendar.io/docs/allDaySlot

jquery autocomplete transformResult auto focus property not working

Now it is looking like this
I am workingin jquery autocomplete below is my code where i want to search city.
jQuery('#citySearch').autocomplete({
serviceUrl: basePath + '/selectMycities.json',
paramName: "tagName", //
onSelect: function(suggestion) {
cityID = suggestion.data;
cityId=cityID;
jQuery("#cityId").val(cityID);
return false;
},
transformResult: function(response) {
return {
suggestions: jQuery.map(jQuery.parseJSON(response), function(item) {
return {
value: item.cityName,
data: item.cityId,
id: item.cityId
};
})
};
}
});
Now in above autocomplete i want to set autoFocus as true but it is not working. please help.
It should like 2nd image

I have found the solution with reference to these https://www.devbridge.com/sourcery/components/jquery-autocomplete/
I used autoSelectFirst property and i got the respected result as like 2nd image.
autoSelectFirst: if set to true, first item will be selected when showing suggestions. Default value false.
jQuery('#citySearch').autocomplete({
autoSelectFirst: true,
serviceUrl: basePath + '/selectMycities.json',
paramName: "tagName", //
onSelect: function(suggestion) {
cityID = suggestion.data;
cityId=cityID;
jQuery("#cityId").val(cityID);
return false;
},
transformResult: function(response) {
return {
suggestions: jQuery.map(jQuery.parseJSON(response), function(item) {
return {
value: item.cityName,
data: item.cityId,
id: item.cityId
};
})
};
}
});

autofocus will highlight first item, while selectFirst will select first item.
jQuery('#citySearch').autocomplete({
selectFirst: true,
autoFocus: true,
serviceUrl: basePath + '/selectMycities.json',
paramName: "tagName", //
onSelect: function(suggestion) {
cityID = suggestion.data;
cityId=cityID;
jQuery("#cityId").val(cityID);
return false;
},
transformResult: function(response) {
return {
suggestions: jQuery.map(jQuery.parseJSON(response), function(item) {
return {
value: item.cityName,
data: item.cityId,
id: item.cityId
};
})
};
}
});

u have to add
$( "#citySearch" ).focus();
https://fiddle.jshell.net/1vfcgcco/1/
or something like this...
$("#auto").autocomplete({
source: function(request, response) {
var results = $.ui.autocomplete.filter(src, request.term);
response(results.slice(0, 4));
}
});
http://jsfiddle.net/vqwBP/1098/

first time implementing module pattern variable is undefined

here is my code
var s;
var AddEvent = {
settings : {
saveButton : $('#uploadfiles1'),
cancelSpeech : $('.cancelSpeech'),
datePicker : $(".datepicker"),
eventName : $('input[name=eventname]'),
eventDate : $('input[name=eventdate]')
},
init:function(s){
s = this.settings;
this.BindEvents();
$('.Wallpapers').addClass('active');
$('input, textarea').placeholder();
},
BindEvents:function(){
this.CancelButton();
this.DatePicker();
// this.SaveButton();
$('input[type=text],textarea').on('keyup change',function(){
AddEvent.FieldsCheck();
});
},
CancelButton: function()
{
s.cancelSpeech.on('click',function(){
var referrer = document.referrer;
window.location = referrer;
});
},
DatePicker :function()
{
s.datePicker.datepicker({
//defaultDate: +7,
showOtherMonths: true,
autoSize: true,
//appendText: '(dd-mm-yyyy)',
dateFormat: 'dd/mm/yy'
});
},
SaveButton: function()
{
this.ClearFields();
},
FieldsCheck: function()
{
alert(s.eventName.attr('name'));
if(s.eventName.val()!='' && s.eventDate.val() !='' && $('textarea').val()!='')
{
s.saveButton.removeAttr('disabled').removeClass('disabled');
}
else
s.saveButton.attr('disabled','disabled').addClass('disabled');
},
ClearFields:function()
{
$('input,textarea').val('');
this.FieldsCheck();
}
};
$(function(){
AddEvent.init(s);
});
i am impletenting this example http://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/
but each time when i type in my input field at this line i get undefined in alert
alert(s.eventName.attr('name'));
please tell me what am i doing wrong i tried to search but couldnt find anything usefull.
edit: here i created a little jsfiddle i am getting
TypeError: this.settings is undefined
[Break On This Error]
console.log(this.settings.eventName.attr('id'));
thanks

Your problem is here :
var s;
AddEvent.init(s);
There is no way after this to have s defined.
A solution would be to simply not pass s (and no declare it in the arguments of the function) :
init:function(s){
s = this.settings;
...
AddEvent.init();
But that lets a variable polluting the global namespace.
If you want your settings to be accessed from all your functions, you could embed in in a closure :
var AddEvent = (function(){
var settings;
return {
init:function(){
settings = {
saveButton : $('#uploadfiles1'),
cancelSpeech : $('.cancelSpeech'),
datePicker : $(".datepicker"),
eventName : $('input[name=eventname]'),
eventDate : $('input[name=eventdate]')
};
this.BindEvents();
$('.Wallpapers').addClass('active');
$('input, textarea').placeholder();
},
BindEvents:function(){
this.CancelButton();
this.DatePicker();
// this.SaveButton();
$('input[type=text],textarea').on('keyup change',function(){
AddEvent.FieldsCheck();
});
},
CancelButton: function()
{
settings.cancelSpeech.on('click',function(){
var referrer = document.referrer;
window.location = referrer;
});
},
DatePicker :function()
{
settings.datePicker.datepicker({
//defaultDate: +7,
showOtherMonths: true,
autoSize: true,
//appendText: '(dd-mm-yyyy)',
dateFormat: 'dd/mm/yy'
});
},
SaveButton: function()
{
this.ClearFields();
},
FieldsCheck: function()
{
alert(settings.eventName.attr('name'));
if(settings.eventName.val()!='' && settings.eventDate.val() !='' && $('textarea').val()!='')
{
settings.saveButton.removeAttr('disabled').removeClass('disabled');
}
else
settings.saveButton.attr('disabled','disabled').addClass('disabled');
},
ClearFields:function()
{
$('input,textarea').val('');
this.FieldsCheck();
}
}
})();
$(function(){
AddEvent.init();
});