I am using jquery datetimepicker for two textboxes From date To date. I want to update the values mindate and maxdate from the other text box. The first time it is working fine but if I change the values on debug are correct but the datetimepicker doesnt update. My question is how I will make datetimepicker to update. Reading the code I think it is more clear. Thank you
$(".DatePickerFieldOnHire").live('click', function () {
var defaultDateTime = "";
var dateFrom = "";
var dateTo = "";
dateFrom = document.getElementById('WebReportForm1_Value_DeliveryDate').value;
dateTo = document.getElementById('WebReportForm1_Value_ExpectedRedeliveryDate').value;
var now = new Date();
var dateNow=now.format("dd-mm-yy HH:mm z");
dateFrom = document.getElementById('WebReportForm1_Value_DeliveryDate').value;
dateTo = document.getElementById('WebReportForm1_Value_ExpectedRedeliveryDate').value;
var now = new Date();
var dateNow=now.format("dd-mm-yy HH:mm z");
if (dateFrom == null) {
dateFrom = new Date(1999, 10 - 1, 25);
}
if (dateTo == null) {
dateTo = new Date(2055, 10 - 1, 25);
defaultDateTime = dateNow;
} else {
if (dateTo > dateNow) {
defaultDateTime = dateNow;
}
else {
defaultDateTime = dateTo;
}
}
var inputOff = "";
inputOff = $('[id*="OffHireDateField"]').val();
if (inputOff != "") {
dateFrom = inputOff;
}
$(this).datetimepicker({
showOn: 'focus', showTimezone: false, ampm: true, dateFormat: "dd-mm-yy",
timeFormat: "HH:mm z",
minDate: dateFrom,
maxDate: dateTo,
showTimezone: true,
defaultDate: defaultDateTime,
onSelect: function () { }
}).focus();
});
and the From textbox
$(".DatePickerFieldOffHire").live('click', function () {
var dateFrom = "";
var dateTo = "";
dateFrom = document.getElementById('WebReportForm1_Value_DeliveryDate').value;
dateTo = document.getElementById('WebReportForm1_Value_ExpectedRedeliveryDate').value;
if (dateFrom == null) {
dateFrom = new Date(1999, 10 - 1, 25);
}
if (dateTo == null) {
dateTo = new Date(2055, 10 - 1, 25);
defaultDateTime = dateNow;
} else {
if (dateTo > dateNow) {
defaultDateTime = dateNow;
}
else {
defaultDateTime = dateTo;
}
}
var inputOn = "";
inputOn = $('[id*="OnHireDateField"]').val();
if (inputOn != "") {
dateTo = inputOn;
}
$(this).datetimepicker({
showOn: 'focus', showTimezone: false, ampm: true, dateFormat: "dd-mm-yy",
timeFormat: "HH:mm z",
minDate: dateFrom,
maxDate: dateTo,
showTimezone: true,
defaultDate: defaultDateTime,
onSelect: function () { }
}).focus();
});
I have to admit, I did not check the code thoroughly as you have not included a JSFiddle, but from what I can see, it looks like the first time, dateFrom and dateTo are Date objects but from the second time on they are Strings.
This might be an issue.
Your date format dd-mm-yy does not comply with the default format yy-mm-dd.
Related
I hava a problem with use datepicker bootstrap v1.5.0
var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('.checkin').datepicker({
todayHighlight:'TRUE',
autoclose: true,
beforeShowDay: function(date) {
return date.valueOf() >= now.valueOf();
},
datesDisabled :test,
}).on('changeDate', function(ev) {
$(this).datepicker('hide');
if (ev.date.valueOf() > checkout.datepicker("getDate").valueOf()
|| !checkout.datepicker("getDate").valueOf()) {
var newDate = new Date(ev.date);
newDate.setDate(newDate.getDate() + 1);
checkout.datepicker("update", newDate);
}
});
var checkout = $('.checkout').datepicker({
beforeShowDay: function(date) {
if (!checkin.datepicker("getDate").valueOf()) {
return date.valueOf() >= new Date().valueOf();
} else {
return date.valueOf() > checkin.datepicker("getDate").valueOf();
}
},
autoclose: true,
datesDisabled :daylist,
}).on('changeDate', function(ev) {});
when I choose date of my checkin input, my checkout input not display, but when i press tab and click again, it display and with error
enter image description here
It appears you may have syntax errors:
remove comma ","
datesDisabled :test,
datesDisabled :test
and also here:
datesDisabled :daylist,
datesDisabled :daylist
I have a Two datetimepicker on my page. Name as 'SartDate' and 'EndDate'.Select the date on StartDate, this date set as a minDate of 'EndDate'.First time is work Correctly.But the date of 'StartDate' reset, the minDate of 'EndDate' Not
re-initiliaz
var date = null;
$("#jobPublishDate").bind("keyup blur change mouseup", function () {
$('#jobPublishDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true });
var from = $("#jobPublishDate").val().split("/");
var newdate = from[1] + "/" + (from[0]) + "/" +from[2];
var f = new Date(newdate);
date = f;
});
$("#jobCloseDate").focusin(function () {
$('#jobCloseDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true, minDate: date });
});
});
<label>StartDate></label>
<input ng-model="job.StrPublishDate" id="jobPublishDate">
<br/>
<label>EndDate></label>
<input ng-model="job.StrCloseDate" id="jobCloseDate">
You need to hook to the dp.change event (fired when the date has been selected) an use minDate method to set the minimum date on the second picker.
var date = null;
$("#jobPublishDate").bind("keyup blur change mouseup", function () {
$('#jobPublishDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true })
var from = $("#jobPublishDate").val().split("/");
var newdate = from[1] + "/" + (from[0]) + "/" +from[2];
var f = new Date(newdate);
date = f;
});
// Adds the date change event to the first picker
$("#jobPublishDate").on('db.change', function (e) {
// Get the DateTimePicker instance
var dp = $('#jobCloseDate').data('DateTimePicker');
// If the second picker has been initialized
if(typeof dp !== 'undefined') {
// Set the minimum date on the second picker
dp.minDate(e.date);
} else {
// If the close date picker is not initialized, stores the date for later use
date = e.date;
}
});
$("#jobCloseDate").focusin(function () {
$('#jobCloseDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true, minDate: date });
});
You can find out more about DateTimePicker methods here.
var date = null;
$("#jobPublishDate").bind("keyup blur change mouseup", function () {
var from = $("#jobPublishDate").val().split("/");
var newdate = from[1] + "/" + (from[0]) + "/" + from[2];
var f = new Date(newdate);
date = f;
$("#jobPublishDate").on('dp.change', function (e) {
var dp = $('#jobCloseDate').data('DateTimePicker');
if (typeof dp !== 'undefined') {
dp.minDate(e.date);
}
else {
date = e.date;
}
});
$("#jobCloseDate").focusin(function () {
$('#jobCloseDate').datetimepicker({ format: 'DD/MM/YYYY H:mm', showTodayButton: true, showClear: true, showClose: true, minDate: date });
});
Fellow this Code and Solve the Problem.
When I refresh the page, my ng-model cannot be binding on text field, but when I call it on a label, the model can show the value of ng-model?
This is my js file:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
$scope.today = function () {
$scope.dt = new Date();
};
$scope.today();
$scope.clear = function () {
$scope.dt = null;
};
$scope.inlineOptions = {
customClass: getDayClass,
minDate: new Date(),
showWeeks: true
};
$scope.dateOptions = {
//dateDisabled: disabled,
formatYear: 'yyyy',
//maxDate: new Date(2040, 5, 22),
//minDate: new Date(),
//startingDay: 1
};
//max date hari ini
$scope.dateOptions1 = {
//dateDisabled: disabled,
formatYear: 'yyyy',
maxDate: new Date(),
//minDate: new Date(),
startingDay: 1,
};
//min date hari ini
$scope.dateOptions2 = {
//dateDisabled: disabled,
formatYear: 'yyyy',
//maxDate: new Date(),
minDate: new Date(),
//startingDay: 1,
};
$scope.toggleMin = function () {
$scope.inlineOptions.minDate = $scope.inlineOptions.minDate ? null : new Date();
$scope.dateOptions.minDate = $scope.inlineOptions.minDate;
};
$scope.toggleMin();
$scope.open1 = function () {
$scope.popup1.opened = true;
};
$scope.open2 = function () {
$scope.popup2.opened = true;
};
$scope.setDate = function (year, month, day) {
$scope.dt = new Date(year, month, day);
};
//$scope.formats = ['dd-MMMM-yyyy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
//$scope.format = $scope.formats[0];
//$scope.altInputFormats = ['M!/d!/yyyy'];
$scope.popup1 = {
opened: false,
};
$scope.popup2 = {
opened: false,
};
var tomorrow = new Date();
tomorrow.setDate(tomorrow.getDate() + 1);
var afterTomorrow = new Date();
afterTomorrow.setDate(tomorrow.getDate() + 1);
$scope.events = [
{
date: tomorrow,
status: 'full'
},
{
date: afterTomorrow,
status: 'partially'
}
];
function getDayClass(data) {
var date = data.date,
mode = data.mode;
if (mode === 'day') {
var dayToCheck = new Date(date).setHours(0, 0, 0, 0);
for (var i = 0; i < $scope.events.length; i++) {
var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0);
if (dayToCheck === currentDay) {
return $scope.events[i].status;
}
}
}
return '';
}
This is my HTML:
<label>{{eApp.Steps.PersonalDetails.Sections.BeneficialOwner.SubSections.BeneficialOwnerBasic.Dob}}</label>
<input ng-click="open1()" type="text" class="form-control date"
uib-datepicker-popup="dd-MM-yyyy"
is-open="popup1.opened"
ng-required="true"
close-text="Close"
show-button-bar="false"
datepicker-options="dateOptions1"
ng-model="eApp.Steps.PersonalDetails.Sections.BeneficialOwner.SubSections.BeneficialOwnerBasic.Dob"
validate="BeneficialOwnerDobRules"
ng-change="updateBeneficialOwnerAge()"
ng-disabled="eApp.Status=='S'"
/>
The point is when I save and refresh my page the value of datepicker is cannot show in my textfield. But why value still shows on my label?
I am using ui-datepicker and it is working fine on chrome but not on safari. I have also tried by putting CSS file first and then JS file in my main index.html file. It is generating ui-datepicker-div in bottom but it is empty on Safari.
Here is HTML i am using:
<input type="image" src="images/calendar-icon.jpg" ng-model="selectedWeek" weekpicker format="yy-mm-dd" style="margin-left:10px;" />
and here is JavaScript i am using:
myApp.directive('weekpicker', function () {
function link(scope, element, attrs, ngModelCtrl, $rootScope) {
var frmt = "mm/dd/yy";
if (attrs.format != undefined) {
frmt = attrs.format;
} else if (attrs.placeholder != undefined) {
frmt = attrs.placeholder;
}
scope.getSunday = function(fromDate) {
var curr = new Date(fromDate); // get current date
var first = curr.getDate() - curr.getDay(); // First day is the day of the month - the day of the week
var firstday = new Date(curr.setDate(first)).toUTCString();
return firstday;
};
scope.getWeekDaysRange = function (inputDateString) {
return scope.getDates(new Date(inputDateString), (new Date(inputDateString)).addDays(6));
};
scope.getDates = function(startDate, stopDate) {
var dateArray = new Array();
var currentDate = startDate;
while (currentDate <= stopDate) {
var curdate = new Date(currentDate);
var dateElements = {
day : cal_days_labels[curdate.getDay()],
date : curdate.getDate(),
month : cal_months_labels[curdate.getMonth()],
year : curdate.getFullYear(),
datestamp : curdate.getFullYear()+''+scope.padWithZero(curdate.getMonth()+1)+''+scope.padWithZero(curdate.getDate())
};
dateArray.push(dateElements);
currentDate = currentDate.addDays(1);
}
return dateArray;
};
scope.padWithZero = function(number) {
if(number>-10 && number<10) {
number = '0'+number;
}
return number;
};
$(element).datepicker({
showOtherMonths: true,
selectOtherMonths: true,
changeMonth: true,
changeYear: true,
showWeek: true,
beforeShow: function(dateText, inst) {
},
onSelect : function(dateText, inst) {
current = {day: inst.currentDay, month : inst.currentMonth, year : inst.currentYear};
var selectedDateString = new Date(current.year+'-' + (1+current.month) + '-' + current.day);
var weekBoundryDates = selectedDateString.getWeekBoundryDaysFromToday();
var weekBoundries = weekString(weekBoundryDates);
scope.$apply(function() {
scope.selectedWeek = weekBoundries;
});
scope.$digest();
scope.$emit("weekselected", inst);
},
onClose: function(dateText, inst) {
}
});
scope.$watch(function(scope){
return scope.selectedWeek;
}, function(newVal, oldVal){
});
};
return {
restrict: 'A',
require: 'ngModel',
link: link
};
});
the above code is working fine in Chrome, but not in Safari.
Can anyone help me please.
Change input type image to text it will work :)
<input type="text" src="images/calendar-icon.jpg" ng-model="selectedWeek" weekpicker format="yy-mm-dd" style="margin-left:10px;" />
I have a big trouble with android mobile on my web site when I click my calendar datepicker appears and after keyboard hiding my datepicker hides, I couldn't find the problem for months.
On IOS and desktop version I have no problem and I have this trouble only with android devices.
I don't think problem is about with my calendar function but I want to share with you:
var dateFormat = "DD/MM/YY",
from = $("#checkin,.checkin").datepicker({
firstDay: 1,
minDate: 0,
showButtonPanel: true,
closeText: 'Temizle',
onClose: function(dateText, inst) {
},
onSelect: function(selectedDate) {
window.setTimeout($.proxy(function() {
$(this).parents(".book-holiday").find("#checkout,.checkout").focus();
}, this), 10);
var yenitarih = new Date();
var date = $(this).datepicker('getDate');
var checkoutStartDate = new Date(new Date(date).setDate(date.getDate() + 1));
var checkoutEndDate = new Date(new Date(date).setDate(date.getDate() + 500000));
$("#checkout,.checkout").datepicker("option", "minDate", checkoutStartDate);
$("#checkout,.checkout").datepicker("option", "maxDate", checkoutEndDate);
},
isTo1: true,
beforeShowDay: function(date) {
var selectedDate = $(this).datepicker('getDate'),
fromDate = from.datepicker('getDate');
if (!fromDate || !selectedDate) {
return [true]
}
var dateClass = '';
var dateClass = '';
if (date > fromDate && date < selectedDate) {
dateClass = 'start';
} else if (+date == +selectedDate) {
dateClass = 'stop';
}
return [true, dateClass];
},
beforeShow: function(input, inst) {
$(this).datepicker("widget").addClass("main-datepicker");
controlDatepicker(".checkin,#checkin");
}
});
$("#checkout,.checkout").datepicker({
firstDay: 1,
minDate: 0,
showButtonPanel: true,
closeText: 'Temizle',
onClose: function(dateText, inst) {
},
isTo1: true,
onSelect: function(selectedDate) {
$(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
$(this).parents(".book-holiday").find(".popover-wrapper").addClass("open");
},
beforeShowDay: function(date) {
var selectedDate = $(this).datepicker('getDate'),
fromDate = from.datepicker('getDate');
if (!fromDate || !selectedDate) {
return [true]
}
var dateClass = '';
if (date > fromDate && date < selectedDate) {
dateClass = 'start';
} else if (+date == +selectedDate) {
dateClass = 'stop';
}
return [true, dateClass];
},
beforeShow: function(input, inst) {
$(this).datepicker("widget").addClass("main-datepicker");
controlDatepicker(".checkin,#checkin");
}
I set readonly to my datepicker input but when I click it keyboard is showing I don't understand why is it opening ?
and I want to share my web site: click to see - please check it out on android devices and click to datepicker