apologies in advance if this question's already been answered. I searched but couldn't find an answer.
I use datepicker on a webpage with the code below.
$(function() {
$("#datepicker").datepicker({
dateFormat:"DD, MM d, yy",
minDate: 0,
});
});
I also have the following form.
<select id="language">
<option value="english">English</option>
<option value="french">French</option>
</select>
<button onclick="showDate()">Submit</button>
I would like to change the datepicker format and dayNames values based on the option selected. I believe I need an if operator for this, but can't seem to get it working properly.
So, if the option "french" were selected, the dateFormat would be "DD d MM yy" and the dayNames would be set as "dayNames: ["dimanche", "lundi", "mardi", "mercredi", "jeudi", "vendredi", "samedi"]".
The date generated would then appear in a paragraph. So if French were selected the date would read "mercredi 25 décembre 2019" and if English were selected the date would read "Wednesday, December 25, 2019" due to the default date format.
I'm fairly new to JavaScript and jQuery and would appreciate any insight with this. I originally thought about changing the localization of the calendar upon selection of "french", but that may overcomplicate things.
Thanks for the clarification! Here's an answer that should help you with what you're looking for. All the major browsers can translate dates with javascript, using .toLocaleDateString(language, options), so I have written you a snippet to run that you can play around with.
Note: I have changed your select to have values that are the locale strings required for the toLocaleDateString function, and you can play around with the formatting with the dateOptions object. (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString)
So the getDate method for the datepicker returns a javascript Date object, which is what is needed for toLocaleDateString. And the currentLanguage variable is set using jquery to get the value of the selected dropdown item.
Hope this helps!
$(function() {
$("#datepicker").datepicker({
dateFormat:"DD, MM d, yy",
minDate: 0,
});
});
function showDate() {
var dateOptions = { weekday: "long", year: "numeric", month: "long", day: "numeric" };
var selectedDate = $("#datepicker").datepicker("getDate");
var currentLanguage = $("#language option:selected").val();
alert(selectedDate.toLocaleDateString(currentLanguage, dateOptions));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input id="datepicker">
<select id="language">
<option value="en-US">English</option>
<option value="fr-FR">French</option>
</select>
<button onclick="showDate()">Submit</button>
Related
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>
This code below is suppose to show an alert box if an incorrect date and/or time is selected.
The problem I'm having is, If I selected 25/11/2015 and choose 11:00 It shows "Please change date or Time". If I then select 25/11/2015 and choose 21:00 it shows "That's Fine".
The function is ignoring the date and just checking the time.
It should show a message saying "Please change date or time" if the user selects a time that is gone already or a date that is before today.
I hope I can get help with this issue. Thanks in advance.
function myFunction() {
var today = new Date();
var select_text = document.getElementById("datepicker-leave").value;
var select_date = new Date(select_text);
var select_time = document.getElementById("leavedrop").value;
var curr_time = today.getHours() + 1;
if ((select_date.getTime() <= today.getTime()) && select_time < curr_time) {
alert("Please change Date or Time")
} else {
alert("That's Fine")
}
}
<script>
$(function() { //datepickers
$( "#datepicker-leave).datepicker({
dateFormat: 'd-M-yy'});
});
</script>
<input type="text" id="datepicker-leave">
<select id="leavedrop">
<option value="0">00:00</option>
<option value="1">01:00</option>
<option value="2">02:00</option>
<option value="3">03:00</option>
<option value="4">04:00</option>
<option value="5">05:00</option>
<option value="6">06:00</option>
<option value="7">07:00</option>
<option value="8">08:00</option>
<option value="9">09:00</option>
<option value="10">10:00</option>
<option value="11">11:00</option>
<option value="12">12:00</option>
<option value="13">13:00</option>
<option value="14">14:00</option>
<option value="15">15:00</option>
<option value="16">16:00</option>
<option value="17">17:00</option>
<option value="18">18:00</option>
<option value="19">19:00</option>
<option value="20">20:00</option>
<option value="21">21:00</option>
<option value="22">22:00</option>
<option value="24">23:00</option>
</select>
<input type="button" value="Submit" onClick="myFunction()" />
try the below structure for the date
**$( "#date" ).datepicker({ dateFormat: 'dd/mm/yy' });**
Then try this
$(function() {
$( "#date" ).datepicker({
dateFormat: 'd MM, yy',
onSelect: function(dateText, inst) {
var stop = dateText.indexOf(',');
alert( dateText.substring(0, stop));
}
});
});
In side on select you trigger the alert.
I hope this should help
Thanks
Its not working because you are not entering date in proper format
You need to use (YYYY-MM-DD) format to make it work
for your example put date as 2015-11-25
It seems like date object in JavaScript is pretty weak without any additions.
I found the pretty useful library DateJS which gives you some powerful methods to solve your problem.
Here is also a little guide from Datejs.
For example you could use the equals method: Date.equals(Date.today(), pickedDate());
You have to read a little bit through the documentation to reach your goal.
I need to populate dropdown/ select list with calender dates in DD-MM-YYYY format, I have to do this in JavaScript and script should automatically fill Dropdown with dates for next 3 months.
I tried to look for such script but could not find. I would appreciate any help. i am open to use any jQuery if it works.
I have to fill dropdown with date in the format mentioned i cant use popup Calenders etc..
Example:
<select class="ddDates" id="Dates" name="Dates">
<option value="10-01-2012" selected>10-01-2012</option>
<option value="11-01-2012">11-01-2012</option>
<option value="12-01-2012">12-01-2012</option>
<option value="13-01-2012">13-01-2012</option>
</select>
I have searched google and i cant even find the logic how i can read system calender and populate the dropdown/ select list
This code generates the markup in question using JavaScript (and jQuery)
function pad(n){return n<10 ? '0'+n : n}
var date = new Date();
var selectElement = $('<select>'), optionElement;
for (var count =0; count < 90; count++){
date.setDate(date.getDate() + 1);
formattedDate = pad(date.getUTCDate()) + '-' + pad(date.getUTCMonth()+1) + '-' + date.getUTCFullYear();
optionElement = $('<option>')
optionElement.attr('value',formattedDate);
optionElement.text(formattedDate);
selectElement.append(optionElement);
}
You can change the value of count according to your logic.
jQuery UI's Datepicker:
http://jqueryui.com/demos/datepicker/
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);
});
});