How can I disable a select option field if day is a Saturday?
I have one input and one select.
<input type="text" name="date">11/15/2016
<select>
<option value="car">Car</option>
<option value="boat">Boat</option>
</select>
Here is my javascript:
if(???) {
$("option[value='boat']").attr("disabled", "disabled");
}
What should i put in the if statement if the input date is a Saturday?
var today = new Date('2016-11-15');
if(today.getDay() == 6) {//6 is saturday
...// disable the option value
}
Convert it to a date object using selected value.
var selectedDate = new Date("11/15/2016");
// Use the get day method that will give you the day of the week.
if(selecteddate.getDay() === 6) {
// your code
}
You can use:
Date.prototype.getUTCDay()
The getUTCDay() method returns the day of the week in the specified
date according to universal time, where 0 represents Sunday.
Date Instance new Date(dateString)
Creates a JavaScript Date instance that represents a single moment
in time. Date objects are based on a time value that is the number of
milliseconds since 1 January, 1970 UTC.
prop() instead of attr() when dealing with boolean properties.
var $dateInput = $("#dateInput"),
$option = $("option[value='boat']");
$dateInput.on("change", function() {
var date = new Date($dateInput.val());
if (date.getUTCDay() === 6) {
$option.prop("disabled", true);
} else {
$option.prop("disabled", false);
}
console.log(date);
console.log(date.getUTCDay());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<input type="date" name="date" id="dateInput">
<select>
<option value="car">Car</option>
<option value="boat">Boat</option>
</select>
Related
I'm using moment + jquery to list year calendar weeks and items, but I've hardcoded this year, so now Current code for hardcoded calendar year works, so now I'm trying to make select list for the years, so user can change 2020, 2021, 2022 years and this showCalendar(2020); is going to update, (I just need a three next years so..), but I'm not quite sure how I can change this showCalendar(); parameter with dropdown select list? Thanks for the help, if someone have any time to check this :)
This is what print calendar based on year that we have hardcoded
function setup(){
showCalendar(2020); // When change this in 2021 it works.
}
function showCalendar(year){
// all (week numbers, days etc...)
In web-view:
<select id="Year" class="">
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
</select>
You wanna get the <select> option, so something like this would work
let sel = document.getElementById('Year');
let lastValue = sel.value
function setup(){
showCalendar(sel.value); // 2020, 2021, or whatever is selected
}
setInterval(() => {
if(sel.value !== lastValue) setup();
//you wanna call setUp everytime the value change
}, 1000)
I have two fields a drop down for years and a textbox to enter a VIN number. I have the regEx working exactly how I want it but the problem I am having is if a year is not chosen it still validates because the VIN is waiting on the year. How can I enter either date not existing yet or the "Select Year" to also apply with the RegEx?
When I do console.log(date) it returns 0 and the validation is hitting the second regEx because it is 0 which is less than 1981.
Somehow I have to write less than 1981 but greater than 0 I have tried so many different combinations and just seem to not be able to find the correct answer.
var date = Number($("#vehicleyear").val());
var re;
if (date >= 1981) {
re = new RegExp("^[A-HJ-NPR-Za-hj-npr-z\\d]{8}[\\dX][A-HJ-NPR-Za-hj-npr-z\\d]{2}\\d{6}$");
} else if (date < 1981) {
re = new RegExp("^[A-Za-z\\d]{2,17}$");
} else {}
return vin.match(re);
}, 'Please enter valid VIN.');
I tried applying the regEx in the else statement and that did not work either. (Saying if its anything else but that still apply the RegEx)
HTML
<label for="vehicleyear">Year:</label>
<select name="vehicleyear" id="vehicleyear" required>
<option value="" selected="selected">Select Year</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
<!-- And so on -->
</select>
Okay, an empty string transformed to a number is 0, so what you want to do is always fail if the value is zero, so in other words, something like this:
if(date <= 0)
{
return false;
}
// other if() after
var re;
if (date >= 1981)
{
...
I want to have two select tags in html, one for hour and one for minutes. I want the default value of hour to be set on current hour and the value of minute to be set on current minute. I think with default time to be set for example on 3, i should have some thing like this:
<select name="hour">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3" selected="selected">3</option>
<option value="4">4</option>
...
<option value="23">23</option>
</select>
now my question is how can i use javascript to show the current hour and minutes by default?
There are JavaScript Date methods called .getHours() and .getMinutes(). So given:
<select id="hour" name="hour">...</select>
<select id="minute" name="minute">...</select>
You can do something like the following in a script block that appears after the selects (or is called onload or on DOM ready):
var currentDateTime = new Date();
document.getElementById("hour").value = currentDateTime.getHours();
document.getElementById("minute").value = currentDateTime.getMinutes();
Depending on how you're creating the option elements, one approach is to use:
var now = new Date(),
// we're adding one because JavaScript returns zero-based hours, 0-23
hour = now.getUTCHours() + 1,
sel = document.getElementById('hours'),
opt;
for (var i=0; i<24; i++){
opt = document.createElement('option');
opt.value = i;
opt.textContent = i;
sel.appendChild(opt);
if (i == hour) {
opt.selected = true;
}
}
JS Fiddle demo.
This uses the JavaScript Date() methods, getUTCHours()
If your option elements are already set in the HTML, and you're simply changing which is selected by default:
var now = new Date(),
hour = now.getUTCHours() + 1,
sel = document.getElementById('hours'),
curHour = sel.getElementsByTagName('option')[hour];
curHour.selected = true;
JS Fiddle demo.
References:
Date().
How to do this using jQuery
i have a select like
<select id="Plan_Id" name="Plan_Id">
<option value="30">Month</option>
<option value="365">Annual</option>
</select>
then i have a input
<input name="date" id="date_picker" type="text" class="text date_picker" />
so based on the option i select i want to get the date today + value and show on the input was
m-d-Y.
so if today is january 07 and i select 30 -> month
my input will be populated with 02-06-2012
Rather than general googling, you want to look specifically at a JavaScript reference about the Date object and at the jQuery UI datepicker reference. Between the two you'll have all the information you'll need to work this out. But since I already happen to know the answer (or an answer)...
Given a JavaScript date object:
var today = new Date(); // current date returned by constructor with no params
You can add n days to it by setting the day-of-the-month to the current value plus n - the month and/or year will be automatically adjusted as appropriate. So:
today.setDate(today.getDate() + 30);
today.setDate(today.getDate() + 365);
Put together with the jQuery datepicker "setDate" method:
var theDate = new Date();
theDate.setDate(theDate.getDate() + 365);
$("#date_picker").datepicker("setDate", theDate);
Demo: http://jsfiddle.net/WUdWs/1/
Here is my way http://jsfiddle.net/gurkavcu/bRXmK/
$(function() {
$("#date_picker").datepicker({
onSelect: function(dateText, inst) {
// Create selectedDay
var selectedDay = new Date(inst.currentYear,inst.currentMonth,inst.currentDay);
// Add day amount according to select box
selectedDay.setDate(selectedDay.getDate()+parseInt($("#Plan_Id").val(),10));
// Show new day with your own style
$(this).val((selectedDay.getMonth()+1)+"-"+
selectedDay.getDate()+"-"+
selectedDay.getFullYear());
}
});
});
I'm using the JQuery DatePicker to have the user pick a date and have that show up in a textbox. Easy enough. However a restriction I'm working on is that the date range is restricted based on the month that's currently picked out in a user dropdown menu to the month beginning and end dates.
So for example if someone selects "Aug/2010" in the dropdown then the Datepicker for the textbox must be between August 1st and August 31st - the beginning and end of the month. This
Textbox outputted HTML:
<select id="ctl00_contentlocalnav_Menu_selectmonth">
<option value="NA">-- Select Month --</option>
<option value="Jun/2010">Jun/2010</option>
<option selected="selected" value="May/2010">May/2010</option>
<option value="Aug/2009">Aug/2009</option>
<option value="Jul/2009">Jul/2009</option>
</select>
JQuery:
jQuery(document).ready(function() {
$("#ctl00_contentactual_txtDate").datepicker({ minDate: new Date(2010, 8 - 1, 1), maxDate: new Date(2010, 8 - 1, 31) });
});
As you see the JQuery range is hard coded. What's the best way to solve this?
Here's what I would do.
Change the drop down values to contain a min/max date range that is able to be parsed by JavaScript.
For example:
<select id="ctl00_contentlocalnav_Menu_selectmonth">
<option value="NA">-- Select Month --</option>
<option value="06/01/2010-06/30/2010">Jun/2010</option>
<option selected="selected" value="05/01/2010-05/31/2010">May/2010</option>
<option value="08/01/2009-08/31/2009">Aug/2009</option>
<option value="07/01/2009-07/31/2009">Jul/2009</option>
</select>
You can then bind to the change event of the drop down, and alter the date picker range.
$(function() {
$('#ctl00_contentlocalnav_Menu_selectmonth').change(function() {
var ranges = $(this).val().split('-');
var minDate = new Date();
minDate.setTime(Date.parse(ranges[0]));
var maxDate = new Date();
maxDate.setTime(Date.parse(ranges[1]));
$("#ctl00_contentactual_txtDate").datepicker('option', 'minDate', minDate);
$("#ctl00_contentactual_txtDate").datepicker('option', 'maxDate', maxDate);
});
});