I am using a jquery datepicker to display available booking dates for a reservation form.
The datepicker has been working fine, but now it now longer displays. Instead I get an error {Uncaught TypeError: $(...).datepicker is not a function}.
The code is contained in the page header, and as far as I'm aware has been working fine until it just randomly wasn't anymore. I noticed the error just before as I was blocking a date on the calendar and it wouldn't appear when I went to test it.
The site is a Weebly site, and the form I'm using collects the entries for me to review. At 10:18pm last night (NZ Time) an entry was submitted with the correct date format, however the next booking (4:50pm NZ Time) was entered as "may 6th" which indicates it was typed by the user.
I am the only one with access to the source code for the site and have not made any changes in the last 2 months (Since I blocked some dates before Easter). I honestly have no idea why it would've stopped working.
CODE
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Javascript -->
<script>
var dateToday = new Date();
var array = ["05/05/2017","06/05/2017"]
$( function() {$( "#input-806171099542486857" ).datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
var day = date.getDay();
return [(day != 1 & day != 2) & array.indexOf(string) == -1 ];
}, minDate: dateToday
});
});
</script>
</head>
Please check this. Your code is not working because of its blocking Http request over Https. I have modified it and it's working properly now.
var dateToday = new Date();
var array = ["05/05/2017","06/05/2017"]
$( function() {$( "#input" ).datepicker({
dateFormat: 'dd/mm/yy',
beforeShowDay: function(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
var day = date.getDay();
return [(day != 1 & day != 2) & array.indexOf(string) == -1 ];
}, minDate: dateToday
});
});
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel = "stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<input id="input" type="text" />
</body>
</html>
Here you have one working for multiple dates
$(document).ready(function (){
var array_names = ["John", "Joseph", "Luis"];
var dbDate;
var date2;
var num = array_names.length;
var array_dates =["1974-05-30", "1978-11-12", "1980-12-11"];
for(var i = 0; i<num; i++){
$("#share").append('<form id = "form_'+array_names[i]+'">');
$("#form_"+array_names[i]).append('<input type="text" placeholder="Name" name="routename" value = "'+array_names[i]+'" id="name_'+array_names[i]+'">');
$("#form_"+array_names[i]).append('<input type="date" placeholder="Date of birth" name="date_birth" value = "'+array_dates[i]+'" id="datepiker_'+array_names[i]+'" class = "datepiker">');
dbDate = array_dates[i];
date2 = new Date(dbDate);
$("#datepiker_"+array_names[i]).datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker('setDate', date2)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id = "share">
</div>
Here you have one working for a fixed number of dates
$(document).ready(function (){
var dbDate;
var date2;
var array_dates =["1974-05-30", "1978-11-12", "1980-12-11"];
var num = array_dates.length;
for(var i = 0; i<num; i++){
dbDate = array_dates[i];
date2 = new Date(dbDate);
$("#datepiker_"+i).datepicker({
dateFormat: 'dd-mm-yy'
}).datepicker('setDate', date2)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type ="datepicker" id = "datepiker_0" value = "" class = "datepicker">
<input type ="datepicker" id = "datepiker_1" value = "" class = "datepicker">
<input type ="datepicker" id = "datepiker_2" value = "" class = "datepicker">
Related
With this code, I able to get selected date as unix.
jsfiddle
function getValue() {
var date = $('#example').data("DateTimePicker").date();
if( date ){
alert(date.unix());
}
}
How about PersianDate, I want to get selected date as unix.
jsfiddle
You can do it by using getState method on persianDatepicker instance, like this:
var pd = $('#example').persianDatepicker({
autoClose: true,
// other options
});
function showUnix() {
const state = pd.getState();
alert(state.selected.unixDate);
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://babakhani.github.io/PersianWebToolkit/doc/lib/persian-date/dist/persian-date.js"></script>
<script src="https://babakhani.github.io/PersianWebToolkit/doc/lib/persian-datepicker/dist/js/persian-datepicker.js"></script>
<link href="https://unpkg.com/persian-datepicker#latest/dist/css/persian-datepicker.min.css" rel="stylesheet" />
<input type="text" id="example" class="initial-value-type-example inline-example leapyear-algorithmic">
<button onclick="showUnix()">show unix</button>
I am quite new to WebApp/HTML/JS and would like to make a basic tool where a user can enter two dates and times, and the tool will tell them the difference (so for example difference= 220 hours 40 minutes).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Date and Time Pickers</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.620/styles/kendo.bootstrap-v4.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
<style>
body {font-family: helvetica;}
</style>
</head>
<body>
<div>
<script>
// still need to figure out how to do this
// $(document).ready(function() { //maybe don't need this
function calculateTime() {
//create date format
var valuestart = $("select[name='timePicker1']"1).val();
var valuestop = $("select[name='timePicker1']"1).val();
//create date format
var timeStart = new Date($("select[name='datePicker1']"1).val() + valuestart);
var timeEnd = new Date($("select[name='datePicker2']"1).val() + valuestart);
var difference = timeEnd - timeStart;
var diff_result = new Date(difference);
var hourDiff = diff_result.getHours();
$("p").html("<b>Hour Difference:</b> " + hourDiff )
}
$("select").change(calculateTime);
calculateTime();
});
</script>
</div>
<div>
<p>Einweisungsdatum</p>
<!---datepicker first date--->
<input id="datePicker1">
<script>
$(document).ready(function(){
$('#datePicker1').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker1">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker1').kendoTimePicker();
});
</script>
</div>
<div>
<p>Reinigungsdatum</p>
<!---datepicker first date--->
<input id="datePicker2">
<script>
$(document).ready(function(){
$('#datePicker2').kendoDatePicker({
start: 'decade',
depth: 'year'
});
});
</script>
<input id="timePicker2">
<!---timepicker first date--->
<script>
$(document).ready(function(){
$('#timePicker2').kendoTimePicker();
});
</script>
</div>
<p>start</p>
<div>
<p>end</p>
</div>
</body>
</html>
The UI looks good, but somehow the calculation won't work. I thought that datePicker and timePicker would give me date objects, which I could use for a simple calculation. Is this not the case ?
Thanks for the help!
So i'm having the following code of a jquery datepicker
$(".dateInput").datepicker({
language:"el",
format: " dd/mm/yyyy",
startView: "+0d",
todayHighlight: true,
autoclose: true,
onClose: function() {
.........
}
})
and i would like to do a check on the onClose, where, if the date that the user selects is one month before the today date or one year after, an alert message would appear.
Any suggestions are really appreciated.
Thank you in advance.
Welcome to StackOverflow,
here is possible solution for your request:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(function() {
$(".dateInput").datepicker({
language: "el",
format: "dd/mm/yyyy",
startView: "+0d",
todayHighlight: true,
autoclose: true,
onClose: function(dateText, inst) {
var date = new Date(dateText);
var dateMin = new Date();
dateMin.setMonth(dateMin.getMonth() - 1);
dateMin.setHours(0, 0, 0, 0); // Set time to the beginning of the day
var dateMax = new Date();
dateMax.setFullYear(dateMax.getFullYear() + 1);
dateMax.setHours(23, 59, 59, 999); // Set time to the end of the day
if (date >= dateMin && date <= dateMax) {
alert("Date is in range.");
} else {
alert("Date is NOT in range.");
}
}
});
});
</script>
</head>
<body>
<p>Date: <input type="text" class="dateInput"></p>
</body>
</html>
You can find more info about Date object on MDN.
I'm trying to use Countdown.js. I found this guide and copied the code and pasted it to try to tweak and understand the code, but when i run it in my web i cant make it work, in the console i get "Uncaught ReferenceError: countdown is not defined(anonymous function) # countdown..html:46".
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="countdown.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="stylesheet" href="http://monopolo11.ninja/tests/css/main.css">
<link rel="stylesheet" type="text/css" href="flip/flipclock.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
</head>
<body>
<div id="countdown-holder"></div>
<script>
var clock = document.getElementById("countdown-holder")
, targetDate = new Date(2050, 00, 01); // Jan 1, 2050;
clock.innerHTML = countdown(targetDate).toString();
setInterval(function(){
clock.innerHTML = countdown(targetDate).toString();
}, 1000);
</script>
<br/>
<br/>
You will be logged out in <span id="logout-timer"></span>
<script>
var timer = document.getElementById("logout-timer")
, now = new Date()
, deadline = new Date(now.getFullYear, now.getMonth, now.getDate, now.getHours, now.getMinutes + 15);
timer.innerHTML = countdown(deadline).toString();
setInterval(function(){
timer.innerHTML = countdown(deadline ).toString();
}, 1000);
</script>
</body>
</html>
The sample in guide use countdown is actually should be Countdown.
// Declare the countdown object
// Constructor. target_date and current_date are Javascript Date objects
function Countdown(target_date, current_date) {
this.target_date = target_date;
this.current_date = current_date;
}
This is my page.
#model JNCloud.Web.UI.Models.AppointmentModel
#{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UB-04-081A</title>
<link href="~/Content/agency_media.css" type="text/css" media="all" rel="stylesheet" />
<link href="~/Content/agency_style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="~/Scripts/Common/js/jquery.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.naviDropDown.1.0.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-mask.js"></script>
<script type="text/javascript" src="../../Scripts/telerik.all.min.js"></script>
<script type="text/javascript" src="../../Scripts/scriptbreaker-multiple-accordion-1.js"></script>
<script src="#Url.Content("~/Scripts/jquery.poshytip.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/form.section.validator.js")" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
<!--local fallback for JQuery-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="~/Scripts/Common/js/qyb8ood.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
<script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var arr = new Array();
$(document).ready(function () {
SelectedScheduleEvents('#Model.PrintAgencyUserID', '#Model.PrintFiltervisittypeID', '#Model.PrintPatientID', '#Model.PrinttypeSchedule', '#Model.PrintDate');
});
function SelectedScheduleEvents(agencyuserid, FiltervisittypeID, PatientID, typeSchedule, date) {
console.log('manoj');
$("#calendar").empty();
$("#LocationId").attr('data-val-number', 'Patient Name does not Exists');
var cdate = date.replace('-', ' ');
var d = new Date(cdate);
var m;
var y;
if (isNaN(d.valueOf())) {
d = new Date();
m = d.getMonth();
y = d.getFullYear();
}
else {
m = d.getMonth();
y = d.getFullYear();
}
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
year: y,
month: m,
agenda: 'h:mm{ - h:mm}',
editable: false,
disableResizing: true,
selectable: true,
selectHelper: true,
select: function (start, end, allDay, Id) {
var Selectedtdate = start;
//alert('start'+start);
var todate = new Date();
//alert('todate'+todate.getMonth()+3);
//if (Selectedtdate > todate && Selectedtdate.getDate() != todate.getDate()) {
//if (Selectedtdate > todate.getMonth()+3 ) {
// alert('Please select less than 90 days later from todate.');
// return;
//}
AddEvent(start);
calendar.fullCalendar('unselect');
},
events: { url: '#Url.Action("SelectedScheduleEvents", "Schedule")' + '?AgencyUsersID=' + agencyuserid + '&FiltervisittypeID=' + 0 + '&PatientID=' + PatientID + '&typeSchedule=' + typeSchedule },
eventClick: function (calEvent, jsEvent, view) {
var eventTime = $.fullCalendar.formatDate(calEvent.start, "h:sstt");
var Id = calEvent.id;
var apptype = calEvent.appointmenttype;
var clinicianId = calEvent.clinicianId;
var startdate = calEvent.start;
var enddate = calEvent.end;
var comment = calEvent.comment;
var meetduration = calEvent.duration;
var backcolor = calEvent.backgroundColor;
var patientIds = calEvent.patientIds;
var locationid = calEvent.locationId;
var lname = calEvent.locationName;
var visittypeid = calEvent.VisitTypeID;
EditEvent(Id, calEvent.title, patientIds, clinicianId, startdate, enddate, eventTime, meetduration, comment, backcolor, apptype, locationid, lname, visittypeid);
},
eventMouseout: function (calEvent, domEvent) {
if (!$("#events-layer").hasClass('mouse_in')) {
$("#events-layer").remove();
}
}
});
$("#divLoading").hide();
$("#hdnCurrentDate").val(0);
}
</script>
</head>
<body style="padding: 0; font-family: Arial, Helvetica, sans-serif;">
<div style="display: none">#Html.TextBoxFor(x => x.SelectedPID)</div>
<div class="widget first">
<div>
<div id="calendar" style="width: 100%;">
</div>
</div>
</div>
#* End Confirm Assessment form *#
</body>
</html>
And in controller when I use this
return View(objappointmentmodel);
then it's look like this
And when in controller I use this
return new ViewAsPdf("PrintCalendar", objappointmentmodel)
{
PageSize = Rotativa.Options.Size.A4,
PageOrientation = Orientation.Portrait,
PageMargins = { Left = 0, Right = 0 }
};
then it's look like this. This isn't loading properly.
What should I do?
I have researched also about this. But I can't find a proper solution.
Please suggest me.
i got similiar problem-
the rotativa didnt manage to handle the font-family.
when i use ARIAL the PDF looks good.
try also to change path to js and css file to a full path.
good luck
I've been using Rototiva recently to make customer print outs on the fly and I've ran into issues regarding relative paths as opposed to fully qualified paths. My strategy was to create a partial view and view model for the parts of my page that required jquery and images (rendered using the #Html.Action() helper) and then make the pdf with two different action results in my controller:
public ActionResult CustPrintOut() {
// doing stuff
return View("CustPrintOut"); // return a view that renders your partials
}
public ActionResult printout() {
return new ActionAsPdf("CustPrintOut") {
FileName = "printout.pdf"
};
}