I have this bit of code:
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox runat="server" ID="TextBox1" Text="10/20/2013" onchange="javascript:MyFunc();"></asp:TextBox>
<asp:TextBox runat="server" ID="TextBox2" Text=""></asp:TextBox>
</div>
</form>
<script type="text/javascript">
function MyFunc() {
MyTextBox = document.getElementById("<%= TextBox1.ClientID %>");
MyTextBox2 = document.getElementById("<%= TextBox2.ClientID %>");
var date = new Date(MyTextBox.value);
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear() + 1;
MyTextBox2.value = day + "/" + month + "/" + year;
}
</script>
</body>
Which basically is 2 textboxes and when the first textbox date is updated the second textbox value becomes the date from textbox 1 + 1 year.
The code works fine except for one issue. In Textbox1 the date must be in the US format mm/dd/yyyy which is wrong.
For example if I want to change 20/10/2013 into 20/10/2014 I must enter 10/20/2013 in the first textbox.
How can I get it to work for dd/mm/yyyy?
The Date constructor can't directly take the dd/mm/yyyy format, so you will have to parse the date input:
var temp = MyTextBox.value.split('/');
var date = new Date(temp[2], temp[1]-1, temp[0]);
The above parses the day, month and year from the text input, then passes each value to the Date constructor. This works because this is one of the overloads for the constructor. Note that the month is zero based, so you need to decrement it by 1.
From MDN:
new Date(year, month, day [hour, minute, second, millisecond]);
try this
var s1 = [d1.getDate(), d1.getMonth(), d1.getFullYear()].join('/');
it works see this fiddle
Related
I have the following html code to only accept date greater than or equal to the current date in vanilla javascript. However for some reason it does not seem to accept the minDate value in the <script> tag of the html file.
<body>
<form>
<td><label for="Ride_Start_Date">Ride Start Date</label></td>
<td><input type = "date" id="Ride_Start_Date" name="Ride_Start_Date"></td>
<td><button type="submit" class="submit">Submit Query</button></td>
</form>
<script>
var todayDate = new Date();
var month = todayDate.getMonth();
var year = todayDate.getUTCFullYear() - 0;
var tdate = todayDate.getDate();
if(month < 10){
month = "0" + month
}
if(tdate < 10){
tdate = "0" + tdate;
}
var minDate = year + "-" + month + "-" + tdate;
document.getElementById("Ride_Start_Date").setAttribute('min',minDate);
console.log(maxDate);
alert(" minDate="+minDate);
</script>
</body>
this does not work and doesn't limits the date input,
However when I use a hardcoded string while leaving everything else the same such as: document.getElementById("Ride_Start_Date").setAttribute('min',"2022-05-31");
this works perfectly.
I've tried looking at many answers but they all seem to work perfectly with a variable value for the setAttribute but mine does not.
What do I seem to be doing wrong here?
Would appreciate any and all assistance in this
You should use
var month = todayDate.getMonth() //getMonth from 0 to 11
Today is 2022-05-31.
You are trying to set 2022-04-31 as the minimum date.
This is the wrong date. That's why it doesn't work
So my code is as below:
var date = new Date();
var active_dates = [<?php
$i=0;
for($i=0;$i<=count($booked_dates);$i++) {
echo "'".$booked_dates[$i]."',";
}
?>];
date.setDate(date.getDate()+1);
$('#single_datepicker_1').datepicker({
rtl: KTUtil.isRTL(),
todayHighlight: true,
templates: arrows,
startDate: date, //disable all old dates
setDate: date, //tomorrow's date allowed
multidate: true,
format: 'dd/mm/yyyy',
beforeShowDay: function(date){
var d = date;
var curr_date = d.getDate();
var curr_month = d.getMonth() + 1; //Months are zero based
var curr_year = d.getFullYear();
var formattedDate = curr_date + "/" + curr_month + "/" + curr_year
if ($.inArray(formattedDate, active_dates) != -1){
return {
classes: 'bookedDates'
};
}
return;
}
//maxDate: '28/12/2019'
});
Now the code which prevent booked dates clickable and display alert message:
$('.bookedDates').click(function(event) {
console.log('Preventing');
event.preventDefault();
event.stopPropagation();
alert("fdf");
});
Now, based on above code my datepicker looks like below:
However, the issue is when I go to the next month like, April then the alert message is not displaying and the reason is, April month is not initially loaded on datepicker. As current month is March.
So if you click on any below dates alert message won't be display:
can anyone please let me know what I should do so that the alert message will display if I click on April month dates.
Thanks:)
The library provides a way to disable some dates. Simply pass this as part of your options.
datesDisabled: [date_sttings],
Or you can pass a single date string. Note the date strings must follow the date format you already defined.
Alternatively you can have an array of disabled dates. And when users select a date. You first check to see if its in the array of disabled dates. If it is, you then show the alert and perform other actions as you please.
I have created a script as follows:
<script language="JavaScript">
function mdy(todaysdate) {
month = todaysdate.getMonth() + 1
year = todaysdate.getYear() + 1900
date = todaysdate.getDate()
return year + "-" + month + "-" + date
}
</script>
<script language="JavaScript">
sampleDate1 = new Date()
document.write(mdy(sampleDate1))
</script>
This script displays today's date in yyyy-mm-dd format. I want to include this script into a query string. the link in html is as follows:
<a href=https://website.com/orders/213/tickets?membershipCategoryId={membership_level_id}&date=>{member_content_title}</a>
I want to have the yyyy-mm-dd to appear in the link right after "date=".
How do I go about doing that?
What about
document.write("{member_content_title}")
?
I want to get the date from datepicker whenever user choose the date in jQuery UI datepicker and click the button on the form.
well I need to get the day, month and year of the date they choose. How can I get the date form jQuery UI?
Use
var jsDate = $('#your_datepicker_id').datepicker('getDate');
if (jsDate !== null) { // if any date selected in datepicker
jsDate instanceof Date; // -> true
jsDate.getDate();
jsDate.getMonth();
jsDate.getFullYear();
}
You can retrieve the date by using the getDate function:
$("#datepicker").datepicker( 'getDate' );
The value is returned as a JavaScript Date object.
If you want to use this value when the user selects a date, you can use the onSelect event:
$("#datepicker").datepicker({
onSelect: function(dateText, inst) {
var dateAsString = dateText; //the first parameter of this function
var dateAsObject = $(this).datepicker( 'getDate' ); //the getDate method
}
});
The first parameter is in this case the selected Date as String. Use parseDate to convert it to a JS Date Object.
See http://docs.jquery.com/UI/Datepicker for the full jQuery UI DatePicker reference.
Try this, works like charm, gives the date you have selected.
onsubmit form try to get this value:-
var date = $("#scheduleDate").datepicker({ dateFormat: 'dd,MM,yyyy' }).val();
Reference here
the link to getdate: https://api.jqueryui.com/datepicker/#method-getDate
$("#datepicker").datepicker( 'getDate' );
Sometimes a lot of troubles with it. In attribute value of datapicker data is 28-06-2014, but datepicker is show or today or nothing. I decided it in a such way:
<input type="text" class="form-control datepicker" data-value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" value="<?= date('d-m-Y', (!$event->date ? time() : $event->date)) ?>" />
I added to the input of datapicker attribute data-value, because if call jQuery(this).val() OR jQuery(this).attr('value') - nothing works. I decided init in cycle each datapicker and take its value from attribute data-value:
$("form .datepicker").each(function() {
var time = jQuery(this).data('value');
time = time.split('-');
$(this).datepicker('setDate', new Date(time[2], time[1], time[0], 0, 0, 0));
});
and it is works fine =)
NamingException's answer worked for me. Except I used
var date = $("#date").dtpicker({ dateFormat: 'dd,MM,yyyy' }).val()
datepicker didn't work but dtpicker did.
I just made some web scraping to discover the behaviour of JequeryUI datepicker, it was necessary for me because I'm not familiar with JS object so:
var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day = $(".ui-state-active").text();
it just pick the value in relation of the changing of class, so you can implement the onchange event:
$(document).on('change', '#datepicker', function() {
var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day= $(".ui-state-active").text();
$("#chosenday").text( day + " " + month + " " + year ) ;
});
or check if the current day is selected:
if( $("a").hasClass("ui-state-active") ){
var month = $(".ui-datepicker-current-day").attr("data-month");
var year = $(".ui-datepicker-current-day").attr("data-year");
var day= $(".ui-state-active").text();
$("#chosenday").text( day + " " + month + " " + year );
}
I am using the JavaScript-based popup calendar from dynamic drive named
"Xin's Popup Calendar" and it works perfectly. But, I want to be able to
adjust the date of a 2nd textbox based on the selection.
For example, I want to be able to automatically adjust it to +1 month of
whatever date was selected in the popup. How can I do that?
Here is an example:
<input type="text" name="firstinput" size=20>
<small>Select Date</small>
<p>
<input type="text" name="secondinput" size=20>
<small>Select Date</small>
</p>
If the firstinput date is 3/21/10, I want the secondinput to change to 4/21/10 at the same time.
There are two parts to this: (1) a function to add a month to a data and (2) the change event handler to the textbox. This solution is very specific to the Xin Pop Up Calendar.
function addMonth(d,month){
t = new Date (d);
t.setMonth(d.getMonth()+ month) ;
if (t.getDate() < d.getDate())
{
t.setDate(0);
}
return t;
}
$("input[name='firstinput']").change(function(){
var dt = $(this).val();
var yr = dt.substring(0,4);
var mo = dt.substring(5,7);
var dy = dt.substring(8,10);
var firstDate=new Date();
firstDate.setFullYear(yr,mo-1,dy);
var secondDate = addMonth(firstDate,1);
$("input[name='firstinput']").val(secondDate.getFullYear() + "/" + secondDate.getDate() + "/" + secondDate.getMonth()+1);
});