I want a datepicker like the one on booking.com.
It automatically changes the day+date of the month when a month+year in another select box is changed. I have had a look at the API of jQuery datepicker but I couldn't find anything that would help me.
See i Created One Fiddle Where you Select Date From DatePicker then it will change in Day/Month/year on Another Field . : Demo
$(function() {
$("#fullDate").datepicker({
onClose: function(dateText, inst) {
$('#year').val(dateText.split('/')[2]);
$('#month').val(dateText.split('/')[0]);
$('#day').val(dateText.split('/')[1]);
}
});
});
Thanks for your input. I finally figured how to get it working.
So here is the answer for anyone else who wants this kind of functionality.
HTML
<select name="day" id="day">
<option value="">Select Day</option>
</select>
<select name="month" id="month">
<option value="">Select Month</option>
</select>
JS
function getMonths() {
var months = new Array(12);
months[0] = "Jan";
months[1] = "Feb";
months[2] = "Mar";
months[3] = "Apr";
months[4] = "May";
months[5] = "Jun";
months[6] = "Jul";
months[7] = "Aug";
months[8] = "Sep";
months[9] = "Oct";
months[10] = "Nov";
months[11] = "Dec";
var d = new Date();
var month = d.getMonth();
var year = d.getFullYear();
var monthsArray = new Array(13);
for (var i = 0; i < 13; i++) {
var now = new Date();
if (now.getMonth() == 11) {
var current = new Date(now.getFullYear() + 1, 0, 1);
} else {
var current = new Date(now.getFullYear(), now.getMonth() + i, 1);
}
monthsArray[current.getMonth() + 1 + '_' + current.getFullYear()] = months[current.getMonth()] + ' ' + current.getFullYear();
}
return monthsArray;
}
function getDaysInMonth(month, year, daySelector) {
var names = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
var date = new Date(year, month - 1, 1);
var days = [];
while (date.getMonth() == month - 1) {
days[date.getDate()] = (date.getDate() + " " + names[date.getDay()]);
date.setDate(date.getDate() + 1);
}
daySelector.find('option').remove();
daySelector.append($("<option></option>").attr("value", '').text("Day"));
for (var key in days) {
daySelector.append($("<option></option>").attr("value", key).text(days[key]));
}
}
var months = getMonths();
for (var key in months) {
$('#month')
.append($("<option></option>")
.attr("value", key)
.text(months[key]));
}
$('#month').change(function () {
var monthYear = $('#month').val().split('_');
getDaysInMonth(monthYear[0], monthYear[1], $('#day'));
});
Demo & Code
Related
I'm using Contact Form 7 as a booking tool for a restaurant. The date you can book a table is set on next day by default. Also booking for the present day is not possible.
I want the tool to show the present date until 2pm and after 2pm it automatically switches to the next day's date. Also it makes booking for the present day unpossible after 2pm.
I'm a complete newbie in coding, I hope you guys can help me out.
This is how the Contact Form is currently set up:
<label> Personenanzahl *
[select* res-number "1 Person" "2 Personen" "3 Personen" "4 Personen" "5 Personen" "6 Personen"] </label>
<label> Datum *
[date* res-date id:datepicker min:today] </label>
<div class="vc_col-sm-6 padding-column"><label> Start *
[select* res-start id:start-time "17:00" "17:15" "17:30" "17:45" "18:00" "18:15" "18:30" "18:45"
"19:00" "19:15" "19:30" "19:45" "20:00" "20:15" "20:30" "20:45" "21:00" "21:15" "21:30" "21:45"
"22:00" "22:15" "22:30" "22:45" "23:00" "23:15" "23:30" "23:45" "00:00" "00:15" "00:30" "00:45"
"01:00"] </label></div>
<div class="vc_col-sm-6 padding-column"><label> Ende *
[select* res-end id:end-time "17:00" "17:15" "17:30" "17:45" "18:00" "18:15" "18:30" "18:45"
"19:00" "19:15" "19:30" "19:45" "20:00" "20:15" "20:30" "20:45" "21:00" "21:15" "21:30" "21:45"
"22:00" "22:15" "22:30" "22:45" "23:00" "23:15" "23:30" "23:45" "00:00" "00:15" "00:30" "00:45"
"01:00"] </label></div>
<label> Name *
[text* res-name] </label>
<label> Telefon *
[tel* res-tel] </label>
<label> E-Mail Adresse *
[email* res-email] </label>
[submit "Senden"]
And this is additional code which is implemented on the website:
<script type="text/javascript">
// initialize datepicker
var datepicker = jQuery('#datepicker');
var today = new Date();
var tomorrow = new Date(new Date().getTime() + 24 * 60 * 60 * 1000);
var dd = today.getDate();
var mm = today.getMonth()+1; // January is 0!
var yyyy = today.getFullYear();
var tomday = tomorrow.getDate();
var tommonth = tomorrow.getMonth() + 1;
var tomyear = tomorrow.getFullYear();
if(tomday<10){tomday='0'+tomday} if(tommonth<10){tommonth='0'+tommonth} tomorrow = tomyear+'-'+tommonth+'-'+tomday;
jQuery(datepicker).attr('value', tomorrow);
// initialize time boxes
var startTimeBox = jQuery('#start-time')[0];
var endTimeBox = jQuery('#end-time')[0];
jQuery(startTimeBox).val("17:00");
jQuery(endTimeBox).val("18:45");
// handling of time changes
jQuery(startTimeBox).change(function (event) {
var startTimeValue = event.currentTarget.value;
var startHour = Number(startTimeValue.slice(0,2));
var startMinute = Number(startTimeValue.slice(3,5));
var endHour = 0;
var endMinute = 0;
if ((startHour == 23) || (startHour == 0) || (startHour == 1)) {
if ((startHour == 23) && (startMinute == 0)) {
endHour = 0;
endMinute = 45;
} else {
endHour = 1;
endMinute == 0;
}
} else {
if (startMinute == 0) {
endHour = startHour + 1;
endMinute = 45;
} else if (startMinute == 15) {
endHour = startHour + 2;
endMinute = 0;
} else if (startMinute == 30) {
endHour = startHour + 2;
endMinute = 15;
} else if (startMinute == 45) {
endHour = startHour + 2;
endMinute = 30;
}
if (endHour == 24) {
endHour = 0;
}
}
if (endHour == 24) {
endHour = 0;
}
var endHourString = endHour.toString();
var endMinuteString = endMinute.toString();
if (endHourString.length == 1) {
endHourString = "0" + endHourString;
}
if (endMinuteString.length == 1) {
endMinuteString = "0" + endMinuteString;
}
var endTimeString = endHourString + ":" + endMinuteString;
jQuery(endTimeBox).val(endTimeString);
});
</script>
Thank you very much!
You can use contact form7 date picker plugin its easy and usefull for time and date with curent tim
I'm making a calendar app where I'm trying to validate if the date entered is during the current semester, and then see if it is a holiday that we don't have class. I have an index of all of the dates that we are out with the names of the respective holidays, but when I tried to use indexOf, the code broke.
this is the html:
<form onsubmit="holiday()" method="post">
<fieldset>
Enter Date: <input type='date' id="dat"><p>
<input class="ubmit" type=submit >
</fieldset>
</form>
<p id="output"></p>
this is the js:
var dvalue = document.getElementById("dat").value;
function holiday(){
var txt ="boo";
dvalue=Date.parse(dvalue);
console.log(dvalue);
if (dvalue<1473033600000 || dvalue>1494979200000 || dvalue=="NaN"){
txt="This is not a valid date for this calendar app";
}
else function validate(dvalue){
var holidayz=new Array();
holidayz[0]=["Columbus Day",1473033600000];
holidayz[1]=["Fall Recess",1476057600000];
holidayz[2]=["Thanksgiving Recess",1479859200000];
holidayz[3]=["Thanksgiving Recess",1479945600000];
holidayz[4]=["Thanksgiving Recess",1480032000000];
holidayz[5]=["Thanksgiving Recess",1480118400000];
holidayz[6]=["President's Day",1487548800000];
holidayz[7]=["Spring Recess",1489363200000];
holidayz[8]=["Spring Recess",1489449600000];
holidayz[9]=["Spring Recess",1458000000000];
holidayz[10]=["Spring Recess",1489622400000];
holidayz[11]=["Spring Recess",1489708800000];
holidayz[12]=["Reading Day",1494288000000];
holidayz[13]=["Memorial Day",1496016000000];
holidayz[14]=["Independence Day",1499126400000];
if (holidayz.includes(dvalue)){
var mydate = new Date(dvalue);
console.log("<p>" + mydate + "<p>");
var day = mydate.getUTCDate();
var month = mydate.getMonth()+1;
var year = mydate.getFullYear();
console.log (month + "/" + day +"/" + year);
var holival= asList(holidayz).indexOf(dvalue);
console.log(holival)
}
}
console.log(txt)
document.getElementById("output").innerHTML = txt;
}
Try this,
var dvalue = document.getElementById("dat").value;
function holiday(){
var txt ="boo";
dvalue=Date.parse(dvalue);
console.log(dvalue);
if (dvalue<1473033600000 || dvalue>1494979200000 || dvalue=="NaN"){
txt="This is not a valid date for this calendar app";
} else {
var holidayz=new Array();
holidayz[0]=["Columbus Day",1473033600000];
holidayz[1]=["Fall Recess",1476057600000];
holidayz[2]=["Thanksgiving Recess",1479859200000];
holidayz[3]=["Thanksgiving Recess",1479945600000];
holidayz[4]=["Thanksgiving Recess",1480032000000];
holidayz[5]=["Thanksgiving Recess",1480118400000];
holidayz[6]=["President's Day",1487548800000];
holidayz[7]=["Spring Recess",1489363200000];
holidayz[8]=["Spring Recess",1489449600000];
holidayz[9]=["Spring Recess",1458000000000];
holidayz[10]=["Spring Recess",1489622400000];
holidayz[11]=["Spring Recess",1489708800000];
holidayz[12]=["Reading Day",1494288000000];
holidayz[13]=["Memorial Day",1496016000000];
holidayz[14]=["Independence Day",1499126400000];
holidayz[15]=["Test Day",1476921600000];
for(var i=0; i<holidayz.length; i++){
if ((holidayz[i][1])==dvalue){
var mydate = new Date(dvalue);
console.log("<p>" + mydate + "<p>");
var day = mydate.getUTCDate();
var month = mydate.getMonth()+1;
var year = mydate.getFullYear();
console.log (month + "/" + day +"/" + year);
var holival= i; //asList(holidayz).indexOf(dvalue);
console.log(holival);
break;
}
}
}
console.log(txt);
}
I want new date range in each box, but it return only last text-box date range. I also made text boxes id's dynamic but still I am facing this issues. I have start date and end date for each text box and I calculated date range in PHP for start date and end date and disabled all those dates which is selected by user in their start date and date all is working fine but it returns last textbox dates disabled in datepicker.
Here is the screenshot-
Sample Image
Javascript function for datepicker to disbaled dates for each box -
$(function () {
var count = $('#count').val();
var uid = $('#usersId').val();
var pid = $('#projectsId').val();
for (i = 1; i <= count; i++) {
$('#projectAssStartDate' + i).datepicker({
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
minDate: 0;
alert(dateRange);
console.log(dateString);
return [dateRange.indexOf(dateString) == -1];
}
});
var date_range = $('#calendarDateString' + i).val();
var newdate = date_range.replace(/,(?=[^,]*$)/, '');
var res = '"' + newdate + '"';
var startDate, endDate, dateRange = res;
$('#projectAssEndDate' + i).datepicker({
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
console.log(dateString);
return [dateRange.indexOf(dateString) == -1];
}
});
}
});
HTML for create boxes id's dynamic and fetch values from it.
<input type="text" class='datepicker' size='11' title='D-MMM-YYYY' name="projectAssStartDate[]" id="projectAssStartDate<?php echo $id;?>" value="" style="padding: 7px 8px 7px 8px;font-weight: bold;" />
<input type="text" class='datepicker' size='11' title='D-MMM-YYYY' name="projectAssEndDate[]" id="projectAssEndDate<?php echo $id;?>" value="" style="padding: 7px 8px 7px 8px;font-weight: bold;" />
<input id="calendarDateString<?php echo $id;?>" name="calendarDateString<?php echo $id;?>" title='D-MMM-YYYY' type="text" value="<?php echo $string;?>" />
<input id="projectsId" name="projectsId[]" type="hidden" value="<?php echo $rows['PROJECT_ID'];?>" />
<input id="usersId" name="usersId[]" type="hidden" value="<?php echo $rows['UM_ID'];?>" />
Please check the answer and reply whether this is the way you needed it to go. If not please comment what change you want with respect to this below code result. And I'm sorry that I have manipulated few of your values to ease my result. Will give details explanation if this is what you are expecting.
$(function () {
var count = 2;//$('#count').val();
var uid = $('#usersId').val();
var pid = $('#projectsId').val();
// populate the array
var startDatearray= ["index 0","2016-06-15","2016-06-20"]; // you dont need to create this array .. just fetch these dates from your database as u need
var endDatearray=["index 0","2016-06-21","2016-06-25"];
var i;
for (i = 1; i <= count; i++) {
$('#projectAssStartDate' + i).datepicker({
beforeShowDay: function (date) {
var i=parseInt($(this).attr('id').replace(/[^0-9\.]/g, ''), 10); // as i wont get here so i took it from the current id
var startDate = startDatearray[i], // some start date
endDate = endDatearray[i]; // some end date
var dateRange = [];
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
}
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
minDate: 0;
//alert(date);
console.log(dateString +"__"+[dateRange.indexOf(dateString) == -1] +"__"+dateRange);
return [dateRange.indexOf(dateString) != -1]; // if u need the opposit then you can use { == -1}
}
});
var date_range = $('#calendarDateString' + i).val();
var newdate = date_range.replace(/,(?=[^,]*$)/, '');
var res = '"' + newdate + '"';
var startDate, endDate, dateRange = res;
$('#projectAssEndDate' + i).datepicker({
beforeShowDay: function (date) {
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
console.log(dateString);
var i=parseInt($(this).attr('id').replace(/[^0-9\.]/g, ''), 10); // as i wont get here so i took it from the current id
var startDate = startDatearray[i], // some start date
endDate = endDatearray[i]; // some end date
var dateRange = [];
for (var d = new Date(startDate); d <= new Date(endDate); d.setDate(d.getDate() + 1)) {
dateRange.push($.datepicker.formatDate('yy-mm-dd', d));
}
var dateString = jQuery.datepicker.formatDate('yy-mm-dd', date);
minDate: 0;
//alert(date);
console.log(dateString +"__"+[dateRange.indexOf(dateString) == -1] +"__"+dateRange);
return [dateRange.indexOf(dateString) != -1]; // if u need the opposit then you can use { == -1}
}
});
}
});
I'm making a calendar in javascript, and i wan't to show the current day, dayname and monthname inside a <div id=taken> it is inside my function Kalender() but for some reason if i execute the function volgende() (Next Month) it changes the month in the <div id=taken> aswell which isn't the current day and month how can i fix this?
var dayNames = ['Zon', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
//Volledige Dagnamen//
var dayNamesFull = ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'];
//Volledige Maandnamen//
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'Oktober', 'November', 'December'];
//Maand lengte van 0 - 11//
var monthLength = [31,28,31,30,31,30,31,31,30,31,30,31];
//Nieuwe datum//
var today = new Date();
//Vandaag//
var day = today.getDay();
//vandaag zoekmaand//
var month = today.getMonth();
//vandaag//
var vandaag = today.getDate();
//volledig jaar//
var year = today.getFullYear();
//Kalender schrijf functie//
function Kalender() {
var buttons = '<button id="vorige" onclick="vorige()">Vorige</button><button id="volgende" onclick="volgende()">Volgende</button>'
var kalender = "";
document.getElementById('Header').innerHTML = monthNames[month]+" "+year+buttons;
kalender += '<table id="cal"><div id="taken"></div>';
for (var j = 1; j <= monthLength[month]; j++) {
if (vandaag == j ) {
kalender +="<td id='tabeldagen' class='dagVandaag'>"+j;
}
else {
kalender += "<td id='tabeldagen'>"+j;
}
if (j % 7 == 0) {
kalender += "<tr>";
}
kalender += '</td>';
}
kalender += '</table>';
document.getElementById('kalen').innerHTML = kalender;
document.getElementById('taken').innerHTML += dayNamesFull[day]+" "+vandaag+" "+monthNames[month];
}
//Leap Year//
if (month == 1) {
if (year % 4 == 0) {
monthLength = 29;
}
}
//Volgende Maand functie//
function volgende() {
month = month + 1;
if(month > 11) {
month = -1;
month = month + 1;
year = year + 1;
}
Kalender();
}
//Vorige maand functie//
function vorige() {
month = month - 1;
if(month < 0) {
month = + 12;
month = month - 1;
year = year - 1;
}
Kalender();
}
HTML:
<!DOCTYPE html>
<head>
<title>Kalender</title>
<link type="text/css" rel="stylesheet" href="kalender.css">
</head>
<body onload="Kalender()">
<div id="kalender">
<div id="Header">
</div>
<div id="kalen">
</div>
</div>
<script type="text/javascript" src="Kalender.js"></script>
</body>
</html>
The problem is that you change day and month variables in functions volgende() and vorige(). Try adding another variables for current day and month:
//Vandaag//
var day = today.getDay();
var currentDay = day;
//vandaag zoekmaand//
var month = today.getMonth();
var currentMonth= month;
and use them in taken element:
document.getElementById('taken').innerHTML += dayNamesFull[currentDay]+" "+vandaag+" "+monthNames[currentMonth];
I got a trivial ask but I can't seem to work it out elegantly. I have an HTML form where I want to display the date (today & next 2 days, dd/mm) using javascript. The page is built on jQueryMobile.
Here's my HTML
<form>
<select name="departure" id="departure">
<option ><script>document.write(today);</script></option>
<option ><script>document.write(tomorrow);</script></option>
<option ><script>document.write(dayaftertomorrow);</script></option>
</select>
</form>
Here's my Javascript
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
if(dd<10) {
dd='0'+dd
}
if(mm<10) {
mm='0'+mm
}
today = dd+'/'+mm;
//----------
var tomorrow = new Date(new Date().getTime() + 86400000);
var day = tomorrow.getDate()
var month = tomorrow.getMonth() + 1
if(day<10) {
day='0'+day
}
if(month<10) {
month='0'+month
}
tomorrow = day+'/'+month
//----------
var aftertomorrow = new Date(new Date().getTime() + 172800000);
var afterday = aftertomorrow.getDate()
var aftermonth = aftertomorrow.getMonth() + 1
if(afterday<10) {
afterday='0'+afterday
}
if(aftermonth<10) {
aftermonth='0'+aftermonth
}
aftertomorrow = afterday+'/'+aftermonth
Here's the JSFiddle
How would you go about this ?
Thanks
Greg
Take a look at this: http://jsfiddle.net/S8HZV/1/
I added an id to the options and I added 3 more lines to the script.
Try using innerHTML instead of document.write.
HTML:
<form>
<select name="departure" id="departure">
<option id="today"></option>
<option id="tomorrow"></option>
<option id="dayaftertomorrow"></option>
</select>
</form>
JavaScript:
document.getElementById('today').innerHTML= today;
document.getElementById('tomorrow').innerHTML= tomorrow;
document.getElementById('dayaftertomorrow').innerHTML= aftertomorrow;
You can create the option elements and insert them into the select with javascript.
For example, this is how you would add today as an option to the departure select
var select = document.getElementById('departure');
var option = document.createElement('option');
option.innerHTML = today;
select.appendChild(option);
For another option, this sets the value, too.
http://jsfiddle.net/isherwood/S8HZV/5/
document.getElementById('departure').options[0].val = today;
document.getElementById('departure').options[0].text = today;
document.getElementById('departure').options[1].val = tomorrow;
document.getElementById('departure').options[1].text = tomorrow;
document.getElementById('departure').options[2].val = aftertomorrow;
document.getElementById('departure').options[2].text = aftertomorrow;