I'm trying to set the minTime of my End Time timepicker based on what I've selected in the Start Time timepicker.
I have this, based on something that works for the regular datepicker, but it's not working.
$('#confirmed_time_start').timepicker({
timeFormat: 'hh:mm',
stepHour: 1,
stepMinute: 15,
hour: 8,
minute: 0,
hourMin: 8,
hourMax: 18,
onSelect: function(timeStr) {
var newTime = $(this).timepicker('getDate');
if (newTime) { // Not null
newTime.setDate(newTime.getDate());
}
$('#confirmed_time_end').timepicker('minTime', newTime)
}
});
$('#confirmed_time_end').timepicker({
timeFormat: 'hh:mm',
stepHour: 1,
stepMinute: 15,
hour: 8,
minute: 0,
hourMin: 8,
hourMax: 18
});
The error I'm receiving is:
Object doesn't support this property or method
var time = new Date();
$('#from').timepicker({
ampm: true,
hourMin: 9,
hourMax: 19,
timeFormat: 'hh:mm TT',
onClose: function(dateText, inst) {
var startDateTextBox = $('#to');
if (startDateTextBox.val() != '') {
var testStartDate = new Date(startDateTextBox.val());
var testEndDate = new Date(dateText);
if (testStartDate > testEndDate)
startDateTextBox.val(dateText);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function(dateText){
var time = new Date($(this).datetimepicker('getDate').getTime());
$('#to').timepicker('option', 'minDateTime',time);
}
});
$('#to').timepicker({
ampm: true,
hourMin: 10,
hourMax: 21,
timeFormat: 'hh:mm TT',
onClose: function(dateText, inst) {
var startDateTextBox = $('#from');
if (startDateTextBox.val() != '') {
var testStartDate = new Date(startDateTextBox.val());
var testEndDate = new Date(dateText);
if (testStartDate > testEndDate)
startDateTextBox.val(dateText);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function(dateText){
var time = new Date($(this).datetimepicker('getDate').getTime());
$('#from').timepicker('option', 'maxDateTime',time);
}
});
$('#confirmed_time_start').timepicker({
timeFormat: 'hh:mm',
stepHour: 1,
stepMinute: 15,
hour: 8,
minute: 0,
hourMin: 8,
hourMax: 18,
onSelect: function(timeStr) {
var newTime = $(this).timepicker('getDate');
if (newTime) { // Not null
newTime.setDate(newTime.getDate());
}
$('#confirmed_time_end').timepicker('setTime', newTime);
}
});
Related
Kendotooltip is not working on kendoMultiSelect?
multiSelectParticipant = $("#select_multi_participant").kendoMultiSelect({
autoBind: true,
dataTextField: "details",
dataValueField: "resource_id",
filter: "contains",
dataSource: resources,
itemTemplate: '#= details #',
tagTemplate: '#= resource_name #',
select: onSelect,
change: function (e) {
multiParticipants = this.value();
isMultiParticipantsChange = true;
},
}).data("kendoMultiSelect");
$("#txtGroupCapicity").change(function () {
groupCapicity = $("#txtGroupCapicity").val();
$("#select_multi").data("kendoMultiSelect").options.maxSelectedItems = (groupCapicity - 1);
});
function onSelect(e) {
resourceTooltip = e.sender.wrapper.kendoTooltip({
position: "top",
content: e.item.text(),
autoHide: true,
width: 250,
height: 20,
animation: {
duration: 0
}
}
);
}
I've got a week picker that is working great, but I'd like for the picker to open by clicking on the Glyphicons PRO icon for a calendar.
Anyone know how to use a Glyphicons PRO calendar icon instead of the input field to open the date picker's calendar?
I'd also like the calendar to correctly highlight rows as I hover over any date in that row. Now, the rows are highlighted only if my chosen date is within that week's range.
$(function () {
var startDate;
var endDate;
var selectCurrentWeek = function () {
window.setTimeout(function () {
$('.ui-weekpicker').find('.ui-datepicker-current-day a').addClass('ui-state-active').removeClass('ui-state-default');
}, 1);
}
var setDates = function (input) {
var $input = $(input);
var date = $input.datepicker('getDate');
if (date !== null) {
var firstDay = $input.datepicker("option", "firstDay");
var dayAdjustment = date.getDay() - firstDay;
if (dayAdjustment < 0) {
dayAdjustment += 7;
}
startDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment);
endDate = new Date(date.getFullYear(), date.getMonth(), date.getDate() - dayAdjustment + 6);
var inst = $input.data('datepicker');
var dateFormat = inst.settings.dateFormat || $.datepicker._defaults.dateFormat;
$('#startDate').text($.datepicker.formatDate(dateFormat, startDate, inst.settings));
$('#endDate').text($.datepicker.formatDate(dateFormat, endDate, inst.settings));
}
}
$('.week-picker').datepicker({
beforeShow: function () {
$('#ui-datepicker-div').addClass('ui-weekpicker');
selectCurrentWeek();
},
onClose: function () {
$('#ui-datepicker-div').removeClass('ui-weekpicker');
},
showOtherMonths: true,
selectOtherMonths: true,
onSelect: function (dateText, inst) {
setDates(this);
selectCurrentWeek();
$(this).change();
},
beforeShowDay: function (date) {
var cssClass = '';
if (date >= startDate && date <= endDate) cssClass = 'ui-datepicker-current-day';
return [true, cssClass];
},
onChangeMonthYear: function (year, month, inst) {
selectCurrentWeek();
}
});
setDates('.week-picker');
var $calendarTR = $('.ui-weekpicker .ui-datepicker-calendar tr');
$calendarTR.live('mousemove', function () {
$(this).find('td a').addClass('ui-state-hover');
});
$calendarTR.live('mouseleave', function () {
$(this).find('td a').removeClass('ui-state-hover');
});
});
Here's my fiddle.... http://jsfiddle.net/notanothercliche/ke62p/
Instead of Glyphicons pro, jQuery UI datepicker is providing a calendar icons which can used lik
showOn: "button",
buttonImage: "http://jqueryui.com/resources/demos/datepicker/images/calendar.gif",
buttonImageOnly: true
JSFiddle
As per your comments,
I have triggered the datepicker when the icon class is clicked,
$('.glyphicon-calendar').on('click', function () {
$('.week-picker').focus()
});
check this fiddle.
FYI .live is removed in jQuery 1.9.1 so replace .live with .on
You can use a label with "glyphicon" and "for" attribute
<label for="date_control" class="glyphicon glyphicon-calendar"></label>
I want to set the maxDate of jQuery UI to 18/02/2013 but upon trying, it only lets me update it to today's date.
How can I go about doing this?
$("#datepicker'.$row['id'].'").datepicker({
minDate: -0,
dateFormat: \'dd/mm/yy\',
maxDate: 18/02/2013
});
Try this:
$("#datepicker").datepicker({ minDate: -0, maxDate: new Date(2013, 1, 18) });
If you want use hard coded date, use the new Date(2013, 1, 18) pattern.
If you want to use generic pattern, use "+1D +1M +1Y".
Reference link: http://jsfiddle.net/pradkumar_n/wQe8c/
$( "#datepicker" ).datepicker( { minDate: 0, maxDate: 365 });
//365 Days
You can use number of days also.
this worked for me by setting the end date picker range from today to 7 more days.
$endDateCtrl.datepicker("option", "minDate", -0);
$endDateCtrl.datepicker("option", "maxDate", '+7D');
$endDateCtrl.datepicker();
I am setting max date using event functions:
$('#datepicker').datepicker({
changeMonth: true,
changeYear: true,
yearRange: "-9:+1",// you can define range of year here.
dateFormat: 'MM yy',
onClose: function () {
var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
},
beforeShow: function () {
var selDate = $(this).val();
if ((selDate.length) > 0) {
iYear = selDate.substring(selDate.length - 4, selDate.length);
iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
$(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(lastYear, iMonth, 1));
$(this).datepicker('option', 'maxDate', new Date(lastYear, 12, 1));
$(this).datepicker('setDate', new Date(lastYear, iMonth, 1));
}
}
});
$(document).ready(function() {
$( "#dob" ).datepicker({
maxDate: -0,
changeMonth:true,
changeYear:true,
yearRange:"-100:+100",
dateFormat: "yy-mm-dd",
});
});
I've got a view model that looks like this:
var ViewModel = function() {
var self = this;
self.hourOptions = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];
self.minuteOptions = [0, 15, 30, 45];
self.formatTimeOption = function(hour) {
if (hour < 10) return "0" + hour;
return hour.toString();
};
self.startDate = ko.observable(null);
self.startDateHour = ko.computed({
read: function() {
return new Date(self.startDate()).getHours();
},
write: function(value) {
var newDate = new Date(self.startDate());
newDate.setHours(value);
self.startDate(newDate);
}
});
self.startDateMinute = ko.computed({
read: function() {
return new Date(self.startDate()).getMinutes();
},
write: function(value) {
var newDate = new Date(self.startDate());
newDate.setMinutes(value);
self.startDate(newDate);
}
});
};
As you can see, I've got a writeable computed observable that updates the startDate hours / minutes when updated.
This is working, however when it does so, the datepicker input field displays the long form of the date, rather than (for example)
01/03/2013
JSFiddle of this is available here: http://jsfiddle.net/alexjamesbrown/2kSpL/9/
I solved this by adding the following custom binding handler, as taken from this answer
ko.bindingHandlers.datepicker = {
init: function(element, valueAccessor, allBindingsAccessor) {
//initialize datepicker with some optional options
var options = allBindingsAccessor().datepickerOptions || {};
$(element).datepicker(options);
//handle the field changing
ko.utils.registerEventHandler(element, "change", function() {
var observable = valueAccessor();
observable($(element).datepicker("getDate"));
});
//handle disposal (if KO removes by the template binding)
ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
$(element).datepicker("destroy");
});
},
update: function(element, valueAccessor) {
var value = ko.utils.unwrapObservable(valueAccessor()),
current = $(element).datepicker("getDate");
if (value - current !== 0) {
$(element).datepicker("setDate", value);
}
}
};
Here's a working JSFiddle:
http://jsfiddle.net/alexjamesbrown/v6hdS/
I have this code
$("#calendar").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
$('.selected-date').html(dateText);
}
});
I am looking for a way to send the date in 1 format to the database with ajax(not shown) and also update a div with a different date format.
What is the best way to do this?
Update # 1
$("#calendar").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
var fmt2 = $.datepicker.formatDate("mm-dd-yy", dateText);
$(".selected-date").html(fmt2);
}
});
Update # 2
$("#calendar").datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
var d = new Date(dateText);
var fmt2 = $.datepicker.formatDate("DD, d MM, yy", d);
$(".selected-date").html(fmt2);
}
});
You've already got the function that's called when a date is selected, so you can then do something similar to the following:
onSelect: function(dateText, inst) {
$('.selected-date').html(dateText);
var fmt1 = $.datepicker.formatDate("yy-mm-dd", dateText);
$.get("/your/ajax/url/" + fmt1, yourCallbackFunction);
var fmt2 = $.datepicker.formatDate("mm-dd-yy", dateText);
$("#someotherdiv").html(fmt2);
}
Not tested but should work... :-)
Update #1
Looks like the datepicker.formatDate() function needs a Date object to work with. The following works here...
onSelect: function(dateText, inst) {
$('.selected-date').html(dateText);
var d = new Date(dateText);
var fmt1 = $.datepicker.formatDate("dd/mm/y", d);
$.get("/your/ajax/url/" + fmt1, yourCallbackFunction);
var fmt2 = $.datepicker.formatDate("MM o, yy", d);
$("#someotherdiv").html(fmt2);
}