Display select option text date - javascript

I have a select option drop down that shows only Mondays (to select a particular week).
<select id="monday" name="monday">
<option value="7">
Mon 1/7/2013 (Week 02)
</option><option value="14">
Mon 1/14/2013 (Week 03)
</option>
// etc...
</select>
I would like to grab the option text (i.e. Mon 1/7/2013 (Week 02)) and use it to display that week's dates in a table:
<div id='mondaydate'>Mon 1/7/2013 (Week 02)</div> | <div id='tuesdaydate'>Tue 1/8/2013 (Week 02)</div> | <div id='wednesdaydate'>Wed 1/9/2013 (Week 02)</div>...
When the select option changes I would like the dates in the <div>'s to change as well. Right now the JavaScript I have (which isn't working) is:
<script type='text/javascript'>
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date("text");
document.getElementById("mondaydate").innerHTML = "mon.setDate(mon.getDate()+0)";
document.getElementById("tuesdaydate").innerHTML = "mon.setDate(mon.getDate()+1)";
document.getElementById("wednesdaydate").innerHTML = "mon.setDate(mon.getDate()+2)";
document.getElementById("thursdaydate").innerHTML = "mon.setDate(mon.getDate()+3)";
document.getElementById("fridaydate").innerHTML = "mon.setDate(mon.getDate()+4)";
document.getElementById("saturdaydate").innerHTML = "mon.setDate(mon.getDate()+5)";
document.getElementById("sundaydate").innerHTML = "mon.setDate(mon.getDate()+6)";
</script>
Can this be done, or am I spinning my wheels?
UPDATE - SOLUTION
As was suggested, I got a little quote happy, so I got rid of those. Also as suggested, the dates would need to be formatted as the first attempt only provided timestamps. Using this date format solution I was able to format the dates into something readable by humans.
Full working JavaScript code:
<script type='text/javascript'>
function formatDate(date, fmt) {
function pad(value) {
return (value.toString().length < 2) ? '0' + value : value;
}
return fmt.replace(/%([a-zA-Z])/g, function (_, fmtCode) {
switch (fmtCode) {
case 'Y':
return date.getUTCFullYear();
case 'M':
return pad(date.getUTCMonth() + 1);
case 'd':
return pad(date.getUTCDate());
case 'H':
return pad(date.getUTCHours());
case 'm':
return pad(date.getUTCMinutes());
case 's':
return pad(date.getUTCSeconds());
default:
throw new Error('Unsupported format code: ' + fmtCode);
}
});
}
function changeDate()
{
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon = new Date(text);
document.getElementById("mondaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+0)), '%M/%d/%Y');
document.getElementById("tuesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("wednesdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("thursdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("fridaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("saturdaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
document.getElementById("sundaydate").innerHTML = formatDate(new Date(mon.setDate(mon.getDate()+1)), '%M/%d/%Y');
}
</script>
Also, note that originally I was setting the dates incorrectly with Monday +0, Tuesday +1, Wednesday +2, etc. (didn't notice it as all I got were timestamps). This really seemed to be setting the date, so Monday and Tuesday displayed correctly, but then Wednesday was displaying Thursday's date, Thursday displayed Sunday's date, etc. incrementing each by +1 instead solved that problem.

Remove the quotes around your variables or else it'll just display what's in the quotes and not perform any logic:
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date(text); <--- No quotes around text variable
document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0); <--- No quotes
//Same with everything below, stop with the quotes!
document.getElementById("tuesdaydate").innerHTML = mon.setDate(mon.getDate()+1);
document.getElementById("wednesdaydate").innerHTML = mon.setDate(mon.getDate()+2);
document.getElementById("thursdaydate").innerHTML = mon.setDate(mon.getDate()+3);
document.getElementById("fridaydate").innerHTML = mon.setDate(mon.getDate()+4);
document.getElementById("saturdaydate").innerHTML = mon.setDate(mon.getDate()+5);
document.getElementById("sundaydate").innerHTML = mon.setDate(mon.getDate()+6);

You have a lot of unnecessary quotes, which is screwing up your code.
Have a look at this :
JS :
$("#monday").click(function(){
var sel = document.getElementById("monday");
var text = sel.options[sel.selectedIndex].text;
var mon=new Date(text);
console.log(mon);
document.getElementById("mondaydate").innerHTML = mon.setDate(mon.getDate()+0);
});
Find the working fiddle here : http://jsfiddle.net/bnWRU/1/

tymeJV already answered, but I think you might have some trouble with date format in javascript.
I sugest this post: Javascript get date in format

Related

Disable dates and days of the week in ACF date picker

I have found lots of topics about the (jQuery) Datepicker but not the specific ACF way I am looking for.
The following is a perfectly working code to set max selected dates in the past and in the future within ACF but I need 2 more functions but can't figure out how to implement them.
How do I:
Disable specific future dates?
Disable specific week days (f.i. Sundays)?
within the example code below?
function yl_date_picker_customizations() {
?>
<script type="text/javascript">
(function($) {
// JS here
acf.add_filter('date_picker_args', function( args, $field ){
// do something to args
args['minDate'] = '0'; //For example, "+1m +7d" represents one month and seven days from today.
args['maxDate'] = '30';
return args;
});
})(jQuery);
</script>
<?php
}
add_action('acf/input/admin_footer', 'yl_date_picker_customizations');
Here's the working code :)
// Customization to reservation dates via datepicker
function yl_datepicker_customizations() {
?>
<script type="text/javascript">
(function($) {
var arrDisabledDates = {};
arrDisabledDates[new Date('06/19/2020')] = new Date('06/19/2020');
arrDisabledDates[new Date('06/30/2020')] = new Date('06/30/2020');
acf.add_filter('date_picker_args', function( args, $field ){
// do something to args
args['minDate'] = '0'; //For example, "+1m +7d" represents one month and seven days from today.
args['maxDate'] = '60';
args['beforeShowDay'] = function (date) {
var day = date.getDay(),
bDisable = arrDisabledDates[date];
if (bDisable) return [false, '', '']
else return [(day != 4) && (day != 2)]
}
return args;
});
})(jQuery);
</script>
<?php
}
add_action('acf/input/admin_footer', 'yl_datepicker_customizations');

Pre-populate Form Field With The Internal Millisecond Clock From Javascript

I have a form on my website that I need to pre-populate with the current unix millisecond timestamp.
I do have another form field (in the same form) which successfully pre-populates the Date (Month, Day, Year) with the following code:
<div>DATE<br><input name="date" id="date"></div>
<script>
(function() {
var days = ['','','','','','',''];
var months =
['Jan','Feb','Mar','Apr','May','June','July','Aug','Sept','Oct','Nov','Dec'];
Date.prototype.getMonthName = function() {
return months[ this.getMonth() ]; };
Date.prototype.getDayName = function() {
return days[ this.getDay() ]; }; })();
var now = new Date();
var day = now.getDayName();
var month = now.getMonthName();
document.getElementById('date').value = day + ' ' + month + ' ' +
now.getDate() + ', ' + now.getFullYear();
</script>
However... I'm not having the same luck when attempting to pre-populate a second form field with the Unix Millisecond timestamp using this code:
<div>TIMESTAMP URL<br><input name="timeStampURL" id="timeStampURL"></div>
<script>
var d = new Date();
document.getElementById('timeStampURL').innerHTML = d.getTime();
</script>
I don't understand why the two codes behave differently that way, but any advice as to how to get that script to pre-populate the field would be appreciated.
Input elements don't have any content, so setting their innerHTML property does nothing. Your first function is setting the value attribute, so should your second:
function showTimeValue() {
document.getElementById('timeValue').value = Date.now();
}
window.onload = showTimeValue;
<input id="timeValue">
<button onclick="showTimeValue()">Update time value</button>
Each time you run the code, you'll get an updated value.

hide javascript dates in table

i have a form where the previous dates from today must be hidden in the first date picker and the second date picker must not show dates previous to the first selected date.
Date picker one
Date picker two
The form is working for the first row but i can't get the code to work for the other rows that follow when i "add" a new row.
Can anyone assist me with this Please?
here is my current code :
$(document).ready(function(){
function updateMinimumEndDate ()
{
var minimum = $('.DepartDate input').val();
var minSplit = [];
minSplit = minimum.split("/");
var newMin = (minSplit[2]+"-"+minSplit[0]+"-"+minSplit[1]);
$('.ReturnDate input').attr('min',newMin);
}
$('.DepartDate input').change(updateMinimumEndDate);
});
$(function() {
$(document).ready(function () {
var todaysDate = new Date();
var year = todaysDate.getFullYear();
var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);
var day = ("0" + todaysDate.getDate()).slice(-2);
var minDate = (year +"-"+ month +"-"+ day);
$('.DepartDate input').attr('min',minDate);
});
});
The problem is with the line
$('.DepartDate input').change(updateMinimumEndDate);
This needs to be in docReady. It also needs to use the jQuery function .on so that it will be triggered for new rows as they are added. I haven't checked this:
$('.DepartDate input').on('change', 'AnchorSelector', function() {updateMinimumEndDate())};
where AnchorSelector is a location which contains your form.

JavaScript that prints date and time with a link won't work

I'm currently enrolled in a JavaScript class at my community college, and we're supposed to create a page with the following:
"Today's date is (date)"
"Kids Club"
"The time is (time)"
Then, I don't seem to get this part, the instructions state: "Have a link to the new kidsnew.htm page that contains the text "Go To Kids Club". Use onClick and widow.location to open kidsnew.htm.
Before switching, you should use the navigator object and the method to test for the name and version of the browser. Display the name and version of the browser with an alert box and advise the user to upgrade for better results with the new page if their browser is out of date.
The kidsnew page should contain an HTML form button that will take you back to the "kidsold.htm" page."
So. I assume that I'll need the browser verification, where you can find in the first part of the code. I don't get what else I'm supposed to be using, as we were not told of a "onClick" method in the chapter's were reading. Can anyone help me refine the code and get it to display as stated? I did most of it correctly, I think;
Here's my code:
<html>
<head>
<title>Kids Club</title>
<script type = "text/javascript" src = "brwsniff.js"></script>
<script type = "text/javascript">
<!-- hide me from older browsers>
//==============================Browser Info=================================
var browser_info = getBrowser();
var browser_name = browser_info[0];
var browser_version = browser_info[1];
var this_browser = "unknown";
if (browser_name == "msie")
{
if(browser_version < 5.5)
{
this_browser = "old Microsoft";
}
else
{
this_browser = "modern";
}
}
//end
if (browser_name == "netscape")
{
if (browser_version < 6.0){
this_browser = "old Netscape";
else
{
this_browser = "modern";
}
} //end
</script>
//=========================End Browser Info============================
//==========================Start Date Script============================
var date = new Date();
//new is keyword for object Date
//
//getting info from object Date
//
var month = date.getMonth();
var day = date.getDate();
var year = date.getYear();
var hour = date.getHours();
var minutes = date.getMinutes();
//january is month 0, think of arrays
//
month = month + 1;
//fix y2k
//
year = fixY2k(year);
//fix minutes by adding 0 infrotn if less than 10
//
minutes = fixTime(minutes);
var date_string = month + "/" + day + "/" + year;
var time_string = hour + ":" + minutes;
var date = "Today is " + date_string";
var time = "The time is " + time_string;
//y2k fix
//
function fixY2k(number) {
if (number < 1000){
number = number + 1900;
return number;
}
//time fixer
//
function fixTime(number){
if(number < 10) {
number = "0" + number;
}
return number;
}
//========================End Time Script==================================
// show me -->
</script>
</head>
<body>
<script type = "text/javascript">
<!-- hide me from older browsers
document.write(date);
</script>
//show me -->
<h1>Kids Club</h1>
<script type = "text/javascript">
<!-- hide me from older browsers
document.write(time);
</script>
//show me -->
</body>
</html>
Some comments:
> <script type = "text/javascript">
> <!-- hide me from older browsers>
That's rubbish, HTML comment delimiters were never needed to hide script element content, just remove them.
> var year = date.getYear();
You should use the getFullYear method, it avoids the two digit year issue.
> var date = "Today is " + date_string";
There is no need to declare date a second time. It's not harmful, just unnecessary. date started out as a Date object, now it's a string. That's not good programming style, just modify the existing date_string, e.g.
date_string = "Today is " + date_string";
In the body of the page you have:
> <script type = "text/javascript">
> <!-- hide me from older browsers
> document.write(date);
> </script>
> //show me -->
Note that the comment delimiters start inside the script element, then finish outside it. So the browser is left with invalid HTML and whatever happens next is a result of error correction (the same for the next script element too).
Fix that and you may have solved your problem.

Help with jquery datepicker calendar date disabling

I'm hoping to get some help with my problem i have been having with jquery datepicker.
Please visit this site for information regarding the problem with code samples:
http://codingforums.com/showthread.php?p=929427
Basically, i am trying to get the 1st day and day 31st working and have yet to find a way to do this. They say it may be an error within the jquery calendar.
Here is the code.
//var disabledDays = ['3-31-2010', '3-30-2010', '3-29-2010', '3-28-2010', '3-2-2010', '3-1-2010', '4-1-2010' ];
var checkDays = null;
function noWeekendsOrHolidays(date)
{
// optional: ensure that date is date-only, with no time part:
date = new Date( date.getFullYear(), date.getMonth(), date.getDate() );
// no point in checking if today is past the given data:
if ( (new Date()).getTime() > date.getTime() ) return [false,'inthepast'];
if ( checkDays == null )
{
checkDays = [];
// convert disabledDays to a more reasonable JS form:
for ( var d = 0; d < disabledDays.length; ++d )
{
var p = disabledDays[d].split("-");
checkDays[d] = new Date( parseInt(p[2]), parseInt(p[0])-1, parseInt(p[1]) );
}
}
var datetime = date.getTime();
for ( var i = 0; i < checkDays.length; i++)
{
if ( checkDays[i].getTime() == datetime ) return [false,'holiday'];
}
return [true,'']; // default CSS style when date is selectable
}
jQuery(document).ready(function() {
<%
response.write "var theSelectedDay = $.datepicker.parseDate(""y-m-d"", '" & theDate & "');" & vbcr
%>
jQuery('#datepicker2').datepicker({
dateFormat: 'yy-mm-dd',
constrainInput: true,
firstDay: 1,
defaultDate: theSelectedDay,
beforeShowDay: noWeekendsOrHolidays,
onSelect: function(date) {
endDate = date;
startDate = theSelectedDay;
}
});
});
The theSelectedDay is formatted like ['2010-3-1']
I have set the clock back on my computer in order to test this out. It's set on March 1st.
I have a big calendar on the main page and when the user clicks on a day it pops up this datepicker. Like i said, it all works fine for days 2-30 but not for day 1 and 31.
If they choose day 2 (and it was march 2nd) then Monday would not be selectable of course since its a past day.
Hope that helps.
You mean valueOf(), not getTime().

Categories