How to set ng-model and some validate to bootstrap datepicker - javascript

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?

Related

loop available dates, select one of them and fill the input box

I am trying to fill in the input that is normally filled by a js code inside the html:
<input type="text" readonly="" class="form-control-input app_date validate" style="width: 260px;" id="app_date" name="app_date" placeholder="YYYY-MM-DD" onchange="this.form.submit();showLoader();" value="" autocomplete="off">
js code got from html
import re
html = """
<script type="text/javascript">
var dt4 = '2019-03-07';
var blocked_dates = ["20-03-2019","01-01-1970","28-03-2019","29-03-2019","20-03-2019","01-01-1970","28-03-2019","29-03-2019"];
var available_dates = ["07-03-2019","08-03-2019","11-03-2019","12-03-2019","13-03-2019","14-03-2019","15-03-2019","18-03-2019","19-03-2019","21-03-2019","22-03-2019","25-03-2019","26-03-2019","27-03-2019"];
var fullCapicity_dates = [];
var offDates_dates = ["09-03-2019","10-03-2019","16-03-2019","17-03-2019","20-03-2019","23-03-2019","24-03-2019","28-03-2019","29-03-2019","30-03-2019","31-03-2019"];
var allowArray = [1];
</script>
"""
i successfully captured the available dates :
date_list = re.findall(r'var\s*available_dates\s*=\s*\[[^\]]+', html)
if date_list:
for av_date in re.findall(r"\"[0-9\-]+\"",date_list[0]) :
print(av_date.replace('"',''))
Break
else : print("no available dates")
output :
07-03-2019 08-03-2019 11-03-2019 12-03-2019 13-03-2019 14-03-2019
15-03-2019 18-03-2019 19-03-2019 21-03-2019 22-03-2019 25-03-2019
26-03-2019 27-03-2019
I don't know how to loop the availables dates , select one of them and fill the input and continue the py script. if no available dates keep refreshing the current page until available dates are found. i am confused is it a while loop, a while true or if ?
full js code
<script type="text/javascript">
var today = new Date();
var dd = today.getDate()+1;
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd
}
if(mm<10){
mm='0'+mm
}
var today = yyyy+'-'+mm+'-'+dd;
function formatDate(rawDate) {
var day = ("0" + rawDate.getDate()).slice(-2);
var month = ("0" + (rawDate.getMonth() + 1)).slice(-2);
return (day)+ "-" + (month)+ "-" +rawDate.getFullYear() ;
}
$(document).ready(function() {
var dt1 = '2019-03-06';
var checkService = 'Normal';
$('#dateOfBirth').datepicker({
format: "yyyy-mm-dd",
endDate: new Date(dt1),
startDate: '-100y',
autoclose: true,
startView: 2
});
$('#pptIssueDate').datepicker({
format: "yyyy-mm-dd",
endDate: new Date(dt1),
startDate: '-100y',
autoclose: true,
startView: 2
});
$('#pptExpiryDate').datepicker({
format: "yyyy-mm-dd",
startDate: new Date(dt1),
autoclose: true,
startView: 2
});
var dt4 = '2019-03-07';
var blocked_dates = ["20-03-2019","01-01-1970","28-03-2019","29-03-2019","20-03-2019","01-01-1970","28-03-2019","29-03-2019"];
var available_dates = ["07-03-2019","08-03-2019","11-03-2019","12-03-2019","13-03-2019","14-03-2019","15-03-2019","18-03-2019","19-03-2019","21-03-2019","22-03-2019","25-03-2019","26-03-2019","27-03-2019"];
var fullCapicity_dates = [];
var offDates_dates = ["09-03-2019","10-03-2019","16-03-2019","17-03-2019","20-03-2019","23-03-2019","24-03-2019","28-03-2019","29-03-2019","30-03-2019","31-03-2019"];
var allowArray = [1];
if(checkService == 'Normal')
{
/*if((jQuery.inArray(2, allowArray)!='-1') || (jQuery.inArray(3, allowArray)!='-1'))
{
var classFull = 'fullcapspecial';
var tooltipTitle = ' ';
var backDatetitle = 'Not Allowed';
}else{
var classFull = 'fullcap';
var tooltipTitle = 'Slots Full';
var backDatetitle = 'Not Allowed';
}*/
var classFull = 'fullcap';
var tooltipTitle = 'Slots Full';
var backDatetitle = 'Not Allowed';
}else{
var classFull = 'fullcap';
var tooltipTitle = 'Slots Full';
var backDatetitle = 'Not Allowed';
}
$('.app_date').datepicker({
language: "en",
Default: true,
format: "yyyy-mm-dd",
startDate: new Date(dt4),
endDate: '2019-03-31',
autoclose: true,
forceParse:true,
startView: 0,
beforeShowDay: function(date){
var formattedDate = formatDate(date);
if ($.inArray(formattedDate.toString(), blocked_dates) != -1){
return {
enabled : false,
classes: 'inactiveClass',
tooltip: 'Holiday'
};
}
if ($.inArray(formattedDate.toString(), available_dates) != -1){
return {
enabled : true,
classes: 'activeClass',
tooltip: 'Book'
};
}
if ($.inArray(formattedDate.toString(), fullCapicity_dates) != -1){
return {
enabled : false,
classes: classFull,
tooltip: tooltipTitle
};
}
if ($.inArray(formattedDate.toString(), offDates_dates) != -1){
return {
enabled : false,
classes: 'offday',
tooltip: 'Off Day'
};
}
return {
enabled : false,
tooltip: backDatetitle
};
return;
}
});
/*====== CALL POP FOR PL/PT IN NORMAL CASE=======*/
if(checkService == 'Normal')
{
if((jQuery.inArray(2, allowArray)!='-1') || (jQuery.inArray(3, allowArray)!='-1'))
{
/*$(document).on('click', '.fullcap,.fullcapspecial', function () {
$(".datepicker").hide();
$('.popupBG').show();
$('#IDBodyPanel').show();
});
$(".popupCloseIcon").click(function() {
$(".popupBG").hide();
$("#IDBodyPanel").hide();
});
$('input[type=radio][name=serviceChange]').change(function() {
if (this.value == 'Premium') {
$("#premiumService").prop('value', 'GO FOR PREMIUM');
}
else if (this.value == 'Prime') {
$("#premiumService").prop('value', 'GO FOR PRIME TIME');
}
});*/
}
}
/*====== CALL POP FOR PL/PT IN NORMAL CASE=======*/
var eventhandler = function(e) {
e.preventDefault();
}
if (checkService == 'Premium' || checkService == 'Prime') {
$('input[name="vasId[]"]:checked').each(function() {
$("#vasId"+this.value).bind('click', eventhandler);
});
}
if (checkService != 'Premium')
{
$(document).on('click', '.chkbox', function () {
if($(this).val() == 1)
{
if($(this).is(":checked")){
//$("#vasId6").prop('checked', true);
//$("#vasId6").bind('click', eventhandler);
}else{
//$("#vasId6").prop('checked', false);
//$("#vasId6").unbind('click', eventhandler);
}
}
});
}
});
</script>

I have problem with datepicker dateDisnable

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

ui-datepicker-div is empty in angular directive

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;" />

Custom function be called instead of getfullyear() in java script

I want my custom function be called instead of getfullyear() in java script how can I do this ? The point is to change a gregorian calendar to jallali in jomsocial.
for example when I write this
d=new Date(b.year,b.month,b.date+a);c.set("highlight",JalaliDate[d.getFullYear(),d.getMonth(),d.getDate()]
The result will be 2014/16/7, I want it to became 1393/6/25
This is the function that I want to be called
http://www.farsiweb.info/jalali/jalali.js
or
jQuery(function($){
$.datepicker.regional['fa'] = {
calendar: JalaliDate,
closeText: 'بستن',
prevText: 'قبل',
nextText: 'بعد',
currentText: 'امروز',
monthNames: ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'],
monthNamesShort: ['فروردین','اردیبهشت','خرداد','تیر','مرداد','شهریور','مهر','آبان','آذر','دی','بهمن','اسفند'],
dayNames: ['یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه', 'شنبه'],
dayNamesShort: ['یک', 'دو', 'سه', 'چهار', 'پنج', 'جمعه', 'شنبه'],
dayNamesMin: ['ی','د','س','چ','پ','ج','ش'],
weekHeader: 'ه',
dateFormat: 'dd/mm/yy',
firstDay: 6,
isRTL: true,
showMonthAfterYear: false,
yearSuffix: '',
calculateWeek: function(date) {
var checkDate = new JalaliDate(date.getFullYear(), date.getMonth(), date.getDate() + (date.getDay() || 7) - 3);
return Math.floor(Math.round((checkDate.getTime() - new JalaliDate(checkDate.getFullYear(), 0, 1).getTime()) / 86400000) / 7) + 1;
}};
$.datepicker.setDefaults($.datepicker.regional['fa']); });
function JalaliDate(p0, p1, p2) {
var gregorianDate;
var jalaliDate;
if (!isNaN(parseInt(p0)) && !isNaN(parseInt(p1)) && !isNaN(parseInt(p2))) {
var g = jalali_to_gregorian([parseInt(p0, 10), parseInt(p1, 10), parseInt(p2, 10)]);
setFullDate(new Date(g[0], g[1], g[2]));
} else {
setFullDate(p0);
}
function jalali_to_gregorian(d) {
var adjustDay = 0;
if(d[1]<0){
adjustDay = leap_persian(d[0]-1)? 30: 29;
d[1]++;
}
var gregorian = jd_to_gregorian(persian_to_jd(d[0], d[1] + 1, d[2])-adjustDay);
gregorian[1]--;
return gregorian;
}
function gregorian_to_jalali(d) {
var jalali = jd_to_persian(gregorian_to_jd(d[0], d[1] + 1, d[2]));
jalali[1]--;
return jalali;
}
function setFullDate(date) {
if (date && date.getGregorianDate) date = date.getGregorianDate();
gregorianDate = new Date(date);
gregorianDate.setHours(gregorianDate.getHours() > 12 ? gregorianDate.getHours() + 2 : 0)
if (!gregorianDate || gregorianDate == 'Invalid Date' || isNaN(gregorianDate || !gregorianDate.getDate())) {
gregorianDate = new Date();
}
jalaliDate = gregorian_to_jalali([
gregorianDate.getFullYear(),
gregorianDate.getMonth(),
gregorianDate.getDate()]);
return this;
}
this.getGregorianDate = function() { return gregorianDate; }
this.setFullDate = setFullDate;
this.setMonth = function(e) {
jalaliDate[1] = e;
var g = jalali_to_gregorian(jalaliDate);
gregorianDate = new Date(g[0], g[1], g[2]);
jalaliDate = gregorian_to_jalali([g[0], g[1], g[2]]);
}
this.setDate = function(e) {
jalaliDate[2] = e;
var g = jalali_to_gregorian(jalaliDate);
gregorianDate = new Date(g[0], g[1], g[2]);
jalaliDate = gregorian_to_jalali([g[0], g[1], g[2]]);
};
this.getFullYear = function() { return jalaliDate[0]; };
this.getMonth = function() { return jalaliDate[1]; };
this.getDate = function() { return jalaliDate[2]; };
this.toString = function() { return jalaliDate.join(',').toString(); };
this.getDay = function() { return gregorianDate.getDay(); };
this.getHours = function() { return gregorianDate.getHours(); };
this.getMinutes = function() { return gregorianDate.getMinutes(); };
this.getSeconds = function() { return gregorianDate.getSeconds(); };
this.getTime = function() { return gregorianDate.getTime(); };
this.getTimeZoneOffset = function() { return gregorianDate.getTimeZoneOffset(); };
this.getYear = function() { return jalaliDate[0] % 100; };
this.setHours = function(e) { gregorianDate.setHours(e) };
this.setMinutes = function(e) { gregorianDate.setMinutes(e) };
this.setSeconds = function(e) { gregorianDate.setSeconds(e) };
this.setMilliseconds = function(e) { gregorianDate.setMilliseconds(e) }; }
Thanks
If you are using http://www.farsiweb.info/jalali/jalali.js, try
function printJalali(year, month, day) {
var jalali = gregorian_to_jalali([year, month+1, day]);
return jalali[0] + "/" + jalali[1] + "/" + jalali[2];
}
var today = new Date();
alert(printJalali(today.getFullYear(), today.getMonth(), today.getDate()));

datetimepicker update mindate maxdate

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.

Categories

Resources