Develop Reference

Formatic UI DatePicker is out of screen

Pretty new here, so sorry if the solutions are a bit "obvious":)
I'm using a datepicker/calendar of "formatic UI", dealing with two issues:
When clicking the input, the pop-up picker is out off screen. I've tried to fix it with css positions (also a bit js) but really stack how to do it only to the pop up picker and not to the input. Also, my language is Hebrew so there might be a problem regarding to rtl issues (I've tried a rtl CDN, still was not that helpful=/)
This picker is used to filter my data. The problem is when a user click on the popup picker, the picker is changed, but only when clicking again the input, data is filtered. Filtering function supposed to be on "keyup, click, change" but still, not working when value is changed. (for other inputs- when value is changed - it indeed working. Only this picker has an issue)
my code:
$(document).ready(function () {
$('#start_date_picker,#end_date_picker').on("keyup click change", filterAll);
});
var today = new Date();
$('#rangestart').calendar({
type: 'date',
endCalendar: $('#rangeend'),
text: {
days: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
months: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
monthsShort: ['ינ', 'פב', 'מרץ', 'אפר', 'מאי', 'יונ', 'יול', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
today: 'היום',
now: 'כעת'
},
minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() ),
monthFirst: false,
formatter: {
date: function (date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year= date.getFullYear().toString().substr(-2);
return day + '.' + month + '.' + year;
}
}
});
$('#rangeend').calendar({
type: 'date',
startCalendar: $('#rangestart'),
text: {
days: ['א', 'ב', 'ג', 'ד', 'ה', 'ו', 'ש'],
months: ['ינואר', 'פברואר', 'מרץ', 'אפריל', 'מאי', 'יוני', 'יולי', 'אוגוסט', 'ספטמבר', 'אוקטובר', 'נובמבר', 'דצמבר'],
monthsShort: ['ינ', 'פב', 'מרץ', 'אפר', 'מאי', 'יונ', 'יול', 'אוג', 'ספט', 'אוק', 'נוב', 'דצמ'],
today: 'היום',
now: 'כעת'
},
monthFirst: false,
formatter: {
date: function (date, settings) {
if (!date) return '';
var day = date.getDate();
var month = date.getMonth() + 1;
var year= date.getFullYear().toString().substr(-2);
return day + '.' + month + '.' + year;
}
}
});
var start_date_picker = document.getElementById('start_date_picker');
var end_date_picker = document.getElementById('end_date_picker');
var month_picker_start = today.getMonth()+1;
var year_picker_start= today.getFullYear().toString().substr(-2);
var week_from_today = new Date();
week_from_today.setDate(week_from_today.getDate() + 7);
var month_week_from_today = week_from_today.getMonth()+1;
var year_from_today= week_from_today.getFullYear().toString().substr(-2);
if(start_date_picker) {start_date_picker.value = today.getDate()+ "." + month_picker_start+ "." + year_from_today;}
if(end_date_picker) {end_date_picker.value = week_from_today.getDate()+ "." +month_week_from_today + "." + year_from_today;}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-calendar/0.0.8/calendar.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui-calendar/0.0.8/calendar.min.css" />
<i class="ui calendar" id="rangestart">
<div class="ui transparent input right icon">
<i class="calendar alternate outline icon grey icon"></i>
<input type="text" id="start_date_picker" style="text-align:right;">
</div>
</i>
-
<i class="ui calendar" id="rangeend">
<div class="ui transparent input right icon">
<input type="text" id="end_date_picker" style="text-align:right;">
</div>
</i>

Amsul DatePicker - How do you disable dates on the calendar?

I have just installed an amsul datepicker, and I'm unable to figure out how do you disable dates? For example, if I want the calendar to show today's date and future dates until 1 year. E.g: 2nd May 2019 -> 2nd May 2020. I want to disable all previous dates.
Also, I'm trying to build a From -> to date picker, so for example if a user selects 3rd May 2019 on the from input he/she should only be allowed to select dates from 3rd May 2019 till 3rd May 2020 in the "to" input.
Thanks.
Amsul: https://amsul.ca/pickadate.js/
// DatePicker
var dPicker;
var initialDateSet = false;
var backup = "";
$('.datepickerCheckin').pickadate({
onSet: function() {
if (!initialDateSet) {
$('.timepickerCheckin').click();
} else {
var tempString = dPicker.get();
var tempString2 = backup.substr(backup.indexOf("at"), backup.length);
$('.datepickerCheckin').val(tempString + " " + tempString2);
backup = $('.datepickerCheckin').val();
}
},
onOpen: function() {
dPicker = this;
if (initialDateSet) {
var index = $('.datepickerCheckin').val().indexOf("at");
if ($('.datepickerCheckin')[0].selectionStart > index) {
dPicker.close(true);
$('.timepickerCheckin').click();
}
}
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});
// TimePicker
$('.timepickerCheckin').pickatime({
onSet: function() {
var tempString;
if (!initialDateSet) {
tempString = $('.datepickerCheckin').val() + " at " +
$('.timepickerCheckin').val();
$('.datepickerCheckin').val(tempString);
backup = tempString;
initialDateSet = true;
} else {
tempString = backup.substr(0, backup.indexOf("at"));
$('.datepickerCheckin').val(tempString + "at " +
$('.timepickerCheckin').val());
backup = $('.datepickerCheckin').val();
}
},
clear: '',
format: 'HH:i'
})
// DatePicker Checkout
$('.datepickerCheckout').pickadate({
onSet: function() {
$('.timepickerCheckout').click();
},
format: 'dd mmm, yyyy',
today: '',
clear: '',
close: '',
});
// TimePicker Checkout
$('.timepickerCheckout').pickatime({
onSet: function() {
var tempString = $('.datepickerCheckout').val() + " at " +
$('.timepickerCheckout').val();
$('.datepickerCheckout').val(tempString);
},
clear: '',
format: 'HH:i'
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://hateable-tests.000webhostapp.com/classic.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.date.css" rel="stylesheet">
<link href="https://hateable-tests.000webhostapp.com/classic.time.css" rel="stylesheet">
<script src="https://hateable-tests.000webhostapp.com/picker.js"></script>
<script src="https://hateable-tests.000webhostapp.com/legacy.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.date.js"></script>
<script src="https://hateable-tests.000webhostapp.com/picker.time.js"></script>
<label>from</label>
<input type="text" class="datepickerCheckin">
<label>to</label>
<input type="text" class="datepickerCheckout">

As per the documentation you provided you can set a date range with min max options. ie.
$('.datepicker').pickadate({
weekdaysShort: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
min: new Date(2015,3,20),
max: new Date(2015,7,14)
})

Repeating time on fullcalendar event

I'm trying to make some repeating events on a certain time with full calendar.
For example i want the events to happen from
1-3-2016
until 1-7-2016.
Here is the code that i take all the events.
<script type="text/javascript">
$(document).ready(function()
{
var events=new Array();
var numberofevents = '<?php echo count ($info); ?>';
<?php
foreach($info as $module => $kati) { ?>
var date = new Date('<?php echo $kati['ModuleSchedule_StartTtime']; ?>');
var day = date.getDate();
var month = date.getMonth();
var year = date.getFullYear();
var time = date.getHours();
var start_date = new Date(year, month, day, time, 0);
var end_date = new Date(year, month, day, time+2, 0);
var ranges = [{ start:"2016/03/01", end:"2016/06/01"}] //range of repeat
var event_name = '<?php echo $kati['ModuleSchedule_Module_Name']; ?>';
var event_description = '<?php echo $kati['ModuleSchedule_Semester_Name'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_Classroom'] ?>' + '<br/>' + '<?php echo $kati['ModuleSchedule_TeacherUserFullName'] ?>';
event = new Object();
event.title = event_name;
event.start = start_date;
event.end = end_date;
event.description = event_description;
event.color = "blue";
event.dow = '<?php echo $kati['ModuleSchedule_DayOfWeek']; ?>';
event.ranges = ranges;
event.allDay = false;
events.push(event);
<?php }
?>
$('#calendar').fullCalendar({
eventRender: function(event, element, view) {
// opens events in a popup window
element.find('.fc-title').append("<br/>" + event.description);
element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});
},
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
weekMode: 'liquid',
weekends: true,
theme: true,
selectable: true,
editable: false,
events: events
});
});
On the line that i take the "ranges" is there any proper way to add then in the event ?
Because for sure what i'm trying to do is wrong here.
Thanks for your time!

Add this to your event object
event.dowend = new Date('2016/7/1');
and on eventRender check if date has reach the dowend and if that's true return false, so the calendar wont create the event
eventRender: function(event, element, view) {
// opens events in a popup window
element.find('.fc-title').append("<br/>" + event.description);
element.qtip({ content: "Στοιχεία μαθήματος: " + event.title + "<br/>" + event.description});
var theDate = event.start
var endDate = event.dowend;
if (theDate >= endDate) {
return false;
}
}

I extended the solution and created a jsfiddle [
$(document).ready(function() {
$('#scheduler').fullCalendar({
eventRender: function(event, element, view) {
var theDate = event.start
var endDate = event.dowend;
var startDate = event.dowstart;
if (theDate >= endDate) {
return false;
}
if (theDate <= startDate) {
return false;
}
},
defaultView: 'month',
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultDate: '2016-01-15T16:00:00',
events: [{
id: 1,
title:"Front End",
start:'10:00',
end: '13:00',
dow: [0, 1, 2, 3, 4, 5, 6],
dowstart: new Date('2016/01/03'),
dowend: new Date('2016/01/17')
}
]
})
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.css" rel="stylesheet"/>
</script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.1/moment.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.4.0/fullcalendar.min.js"></script>
<div id='scheduler'></div>
]1 to show you the specific solution that display daily concurrent event only between two dates.
The solution relies on add the two custom dates parameters for the event object:
dowstart: new Date('2016/01/03'),
dowend: new Date('2016/01/17')
And then add the condition to the eventRender function:
eventRender: function(event, element, view) {
var theDate = event.start
var endDate = event.dowend;
var startDate = event.dowstart;
if (theDate >= endDate) {
return false;
}
if (theDate <= startDate) {
return false;
}
}

You can also use ranges. Please check the code below
$(document).ready(function() {
$('#calendar').fullCalendar({
defaultDate: moment(),
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
defaultView: 'month',
events: [{
title: "My repeating event",
start: '10:00',
end: '14:00',
dow: [1, 2, 3, 4],
ranges: [{
start: moment().startOf('week'), //next two weeks
end: moment().endOf('week').add(7, 'd'),
}, {
start: moment('2018-06-15', 'YYYY-MM-DD'), //all of february
end: moment('2018-06-15', 'YYYY-MM-DD').endOf('month'),
}, ],
}],
eventRender: function(event) {
return (event.ranges.filter(function(range) {
return (event.start.isBefore(range.end) &&
event.end.isAfter(range.start));
}).length) > 0;
},
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.3.0/fullcalendar.min.js"></script>
<div id='calendar'></div>

Daterangepicker on dynamically created input field

I use daterangerpicker github link. I would llike to create new input fields with javascript, when you press a button.
How can I get the daterangepicker script to work? I'm not a javascript expert, sorry for my dumb script :(
This isn't working:
<script type='text/javascript'>
function add()
{
var randnum = Math.floor((Math.random() * 100) + 1);
var cont_div = document.getElementById('content');
var text = document.createElement('div');
var plus_row = '<p><label>day:';
plus_row += '<input style="width:300px;" name="new_'+randnum+'_date" type="text" id="new_'+randnum+'_date" size="60" value="">';
plus_row += '</label></p>';
plus_row += '<script type="text/javascript">';
plus_row += "$('#new_"+randnum+"_date').dateRangePicker(";
plus_row += "{autoClose: true,separator: ' - ',startOfWeek: 'monday',singleDate : false,timePicker: true,timePickerIncrement: 30,";
plus_row += "startDate: '2016-01-01',language: 'en',format: 'YYYY-MM-DD HH:mm',showShortcuts: false,time: {enabled: true} });";
plus_row += "$('#new_"+randnum+"_date').data().daterangepicker.updateCalendars();";
plus_row += "</scr"+"ipt>";
text.innerHTML = plus_row;
cont_div.appendChild(text);
}
<body>
<p>Please select a date
<div id="content">
<p><label>day:
<input style="width:300px;" name="date1" type="text" id="date1" size="60" value="">
</label></p>
<input type="button" id="more" onclick="add();" value="+">
</div>
</p>
<script type="text/javascript">
$('#date1').dateRangePicker(
{ autoClose: true,
separator: ' - ',
startOfWeek: 'monday',
singleDate : false,
timePicker: true,
timePickerIncrement: 30,
startDate: '2016-01-01',
language: 'en',
format: 'YYYY-MM-DD HH:mm',
showShortcuts: false,
time:
{
enabled: true
}
});
</script>
I tried in other ways:
with class (every input in one class) but not working
$('.date_class').dateRangePicker(
plus_row += '<input style="width:300px;" name="new_'+randnum+'_date" type="text" class="date_class" size="60" value="">';
without the script part:
plus_row += '<script type="text/javascript">'; ... plus_row += "</scr"+"ipt>";
Thank you so much for your help!

your code should be like:
script.js
$(function(){
$('#date1').dateRangePicker(
{ autoClose: true,
separator: ' - ',
startOfWeek: 'monday',
singleDate : false,
timePicker: true,
timePickerIncrement: 30,
startDate: '2016-01-01',
language: 'en',
format: 'YYYY-MM-DD HH:mm',
showShortcuts: false,
time:
{
enabled: true
}
});
add=function()
{
var randnum = Math.floor((Math.random() * 100) + 1);
var cont_div = document.getElementById('content');
var text = document.createElement('div');
var plus_row = '<p><label>day:';
plus_row += '<input style="width:300px;" name="new_'+randnum+'_date" type="text" id="new_'+randnum+'_date" size="60" value="">';
plus_row += '</label></p>';
text.innerHTML = plus_row;
cont_div.appendChild(text);
$('#new_'+randnum+'_date').dateRangePicker(
{ autoClose: true,
separator: ' - ',
startOfWeek: 'monday',
singleDate : false,
timePicker: true,
timePickerIncrement: 30,
startDate: '2016-01-01',
language: 'en',
format: 'YYYY-MM-DD HH:mm',
showShortcuts: false,
time:
{
enabled: true
}
});
}
});
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<link rel="stylesheet" href=" https://longbill.github.io/jquery-date-range-picker/daterangepicker.css" />
<script src="https://longbill.github.io/jquery-date-range-picker/moment.min.js"></script>
<script src="https://longbill.github.io/jquery-date-range-picker/jquery.daterangepicker.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="content">
<p><label>day:
<input style="width:300px;" name="date1" type="text" id="date1" size="60" value="">
</label>
</p>
<input type="button" id="more" onclick="add();" value="+">
</div>
</body>
</html>
this a working demo

a different approach to your function, ithout all this String-concatenation and randomly created id's
//an utility, because i don't like $('<nodeName>'), because of the way it works
//simply creates a jquery wrapped node
function $n(nn){ return $(document.createElement(nn||'div')) }
function add(){
//give it a proper (non randomized) name, so the backend can find the value
//and what do you need a (random) id for? you have a reference.
var $input = $n('input').attr({ size: 60 }).width(300);
//removed the (anonymous) div
$n('p').insertBefore('#more').append(
$n('label').text("day: ").append( $input )
)
$input.dateRangePicker({
autoClose: true,
separator: ' - ',
startOfWeek: 'monday',
singleDate : false,
timePicker: true,
timePickerIncrement: 30,
startDate: '2016-01-01',
language: 'en',
format: 'YYYY-MM-DD HH:mm',
showShortcuts: false,
time: {enabled: true}
});
$input.data().daterangepicker.updateCalendars();
}

datepicker simple event creation

All I want to do is use 5 text-boxes, a calender and a button to create an event on a date-picker calender.
Here is the format
I have read all about the .setDate() and .getDate() but I cannot get them to work. I have no experience with plugins only simple html and javascript. What is the datepicker object called and why does everyones code no have a name for their functions?
Anyone with experience with this plugin should be able to do this is in 5 seconds
Here is my code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery & jQueryUI Base - jsFiddle demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<style type='text/css'>
table.ui-datepicker-calendar tbody td.highlight > a {
background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
color: #363636;
border: 1px solid #FFDE2E;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var equip = document.getElementById('equipment').value;
var size = document.getElementById('size').value;
var surface = document.getElementById('surface').value;
var orderNumber = document.getElementById('orderNumber').value;
var responsible = document.getElementById('responsible').value;
var events = [
{ Title: "Equipment: " + equip + "\nSize: " + size + dated +
"\nRequired on Surface: " + surface + "\nWork Order Number: " + orderNumber + "\nResponsible: " + responsible, Date: new Date("05/13/2013") },
{ Title: "Dinner", Date: new Date("02/25/2011") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
$("div").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
}
}
});
});//]]>
var dated = $( "div.selector" ).datepicker( "getDate" );
function alerter(form) {alert (form.size.value)}
function dog () {div.setDate("+2d");}
function submit(form){
var equip1 = form.equipment.value;
var size1 = form.size.value;
var surface1 = form.surface.value;
var orderNumber1 = form.orderNumber.value;
var responsible1 = form.responsible.value;
var inputDate1 = form.inputDate.value
var events = [
{ Title: "Equipment: " + equip1 + "\nSize: " + size1 +
"\nRequired on Surface: " + surface1 + "\nWork Order Number: " + orderNumber1 + "\nResponsible: " + responsible1, Date: new Date(inputDate1) },
{ Title: "Dinner", Date: new Date("05/25/2013") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
}
</script>
</head>
<body>
<FORM>
Equipment: <input type='text' id='equipment' /> <br />
Size: <input type='text' id='size' /> <br />
Required on Surface: <input type='checkbox' id='surface' /> <br />
Work Order Number: <input type='text' id='orderNumber' /> <br />
Responsible: <input type='text' id='responsible' /> <br />
<div id="datepicker"></div>
<button type="button" onclick="alerter(this.form)">Add Lowering Event</button><br>
</FORM>
</body>
</html>
Edited code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jQuery & jQueryUI Base - jsFiddle demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.5.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<link rel="stylesheet" type="text/css" href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.7/themes/black-tie/jquery-ui.css">
<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.9/jquery-ui.js"></script>
<style type='text/css'>
table.ui-datepicker-calendar tbody td.highlight > a {
background: url("images/ui-bg_inset-hard_55_ffeb80_1x100.png") repeat-x scroll 50% bottom #FFEB80;
color: #363636;
border: 1px solid #FFDE2E;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var equip = document.getElementById('equipment').value;
var size = document.getElementById('size').value;
var surface = document.getElementById('surface').value;
var orderNumber = document.getElementById('orderNumber').value;
var responsible = document.getElementById('responsible').value;
var date = document.getElementById('dateds').value
var events = [
{ Title: "Equipment: " + equip + "\nSize: " + size + date +
"\nRequired on Surface: " + surface + "\nWork Order Number: " + orderNumber + "\nResponsible: " + responsible, Date: new Date(date) },
{ Title: "Dinner", Date: new Date("02/25/2011") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
$("#datepicker").datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
onSelect: function(dateText) {
var date,
selectedDate = new Date(dateText),
i = 0,
event = null;
while (i < events.length && !event) {
date = events[i].Date;
if (selectedDate.valueOf() === date.valueOf()) {
event = events[i];
}
i++;
}
if (event) {
alert(event.Title);
}
}
});
});//]]>
var dated = $("#datepicker").datepicker( "getDate" );
function alerter() {alert (dated)}
function dog () {div.setDate("+2d");}
function submit(form){
var equip1 = form.equipment.value;
var size1 = form.size.value;
var surface1 = form.surface.value;
var orderNumber1 = form.orderNumber.value;
var responsible1 = form.responsible.value;
var inputDate1 = form.inputDate.value
var events = [
{ Title: "Equipment: " + equip1 + "\nSize: " + size1 +
"\nRequired on Surface: " + surface1 + "\nWork Order Number: " + orderNumber1 + "\nResponsible: " + responsible1, Date: new Date(inputDate1) },
{ Title: "Dinner", Date: new Date("05/25/2013") },
{ Title: "Meeting with manager", Date: new Date("03/01/2011") }
];
}
</script>
</head>
<body>
<FORM>
Equipment: <input type='text' id='equipment' /> <br />
Size: <input type='text' id='size' /> <br />
Required on Surface: <input type='checkbox' id='surface' /> <br />
Work Order Number: <input type='text' id='orderNumber' /> <br />
Responsible: <input type='text' id='responsible' /> <br />
Date: <input type="text" id="dateds" /></p>
<div id="datepicker"></div>
<button type="button" onclick="alerter()">Add Lowering Event</button><br>
</FORM>
</body>
</html>

$("div").datepicker and $("div.selector").datepicker should both be $("#datepicker").datepicker. The first would attach a datepicker to every DIV on your page, the second doesn't work because you don't have a DIV with class selector.
Normally a datepicker is attached to an <input> element in the form, so when you submit the form the selected date will be submitted. Since you're putting it in a DIV, you could add an <input type="hidden"> element to the form:
<input type="hidden" name="date" id="date">
and add the following option to the datepicker:
altField: "date",
Using named versus anonymous functions is mainly a stylistic choice. If a short function is only used in one place, such as the onSelect option or an AJAX callback, it's common to put it inline as an anonymous function.