I have this field that asks for a date in an iPhone HTML App:
<input type="date" name="DepartureDate" id="DepartureDate" placeholder="Date" value="" class="bookingField" />
This script:
var ddate1 = $('#DepartureDate').val();
alert(ddate1);
returns this value: 2012-12-01 (when I select this date of course). Now can I can convert "ddate1" to look like 01/12/2012 ?
This should do the job, demo at jsFiddle.
$('#DepartureDate').change(function()
{
var ddate1 = this.value.replace(/([0-9]+)-([0-9]+)-([0-9]+)/, '$3/$2/$1');
});
Try using the date() constructor to initialise your date object :
var mydate = new Date("2012-12-01");
then output the format you require :
var newdate = ("0" + parseInt(mydate.getDate())).slice(-2) + '/' +
("0" + (parseInt(mydate.getMonth())+1)).slice(-2) + '/' +
mydate.getFullYear();
Working example -> http://jsfiddle.net/UaEBU/
Mozilla Docs on Date() are here
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
To achieve greater performance with our Shopify store, we decided to minimize use of jQuery across the site. In cartpage, I added a pure JavaScript datepicker that sometimes displays the calendar just once and never afterwards. I ensured only one version of jQuery loads in the theme, thinking multiple instances from other Shopify apps might be causing this issue. But even with a single jQuery instance being loaded now in the theme, the issue still persists. I don't see any console errors. Please add a product to the cart and go to the cart page to see this issue by clicking the date picker. Below is the link to the preview theme.
Following is the datepicker code for pickaday plugin.
<div class="cart-attribute__field">
<p>
<label for="ship_date">Ordering early? Pick a future ship date here:</label>
<input id="ship_date" type="text" name="attributes[ship_date]" value="{{ cart.attributes.ship_date }}" />
</p>
</div>
<p class="shipping-text">If you are placing an order with <b>a future ship date</b> that <u>also</u> includes multiple addresses please email support#packedwithpurpose.gifts upon placing your order to confirm your preferred ship date.</p>
<!-- Added 11162020 -->
<p class="shipping-text">Please note that specifying a date above ensures your gift is packaged and shipped on that date. <b>This is not a delivery date.</b> As we work with third party shipping agencies, your delivery date is subject to the specific carrier selected as well as your shipping destination. Please find our estimated shipping transit times for all regions of the US <strong>here</strong>.</p>
<script type="text/javascript">
(function() {
var disabledDays = ["2022-12-23","2022-12-24","2022-12-25","2022-12-30","2022-12-31","2023-1-1"];
var minDate = new Date();
var maxDate = new Date();
maxDate.setDate((maxDate.getDate()) + 60);
minDaysToShip = 2; // Default minimum days
if (minDate.getDay() == 5) {
// Friday. Set min day to Tuesday. 4 days from now.
minDaysToShip = 4;
} else if (minDate.getDay() == 6) {
// Saturday. Set min day to Tuesday. 3 days from now.
minDaysToShip = 3;
}
minDate.setDate(minDate.getDate() + minDaysToShip);
var picker = new Pikaday(
{
field: document.getElementById('ship_date'),
format: 'MM/DD/YYYY',
disableWeekends: 'true',
toString(date, format) {
// you should do formatting based on the passed format,
// but we will just return 'D/M/YYYY' for simplicity
const day = ("0" + date.getDate()).slice(-2);
// Get two digit month ("0" + (this.getMonth() + 1)).slice(-2)
const month = ("0" + (date.getMonth() + 1)).slice(-2);
const year = date.getFullYear();
return `${month}/${day}/${year}`;
},
parse(dateString, format) {
// dateString is the result of `toString` method
const parts = dateString.split('/');
const day = parseInt(parts[0], 10);
const month = parseInt(parts[1], 10) - 1;
const year = parseInt(parts[2], 10);
return new Date(year, month, day);
},
firstDay: 0,
minDate: minDate,
maxDate: maxDate,
disableDayFn: function(inputDate) {
// Disable national holidays
var formattedDate = inputDate.getFullYear() + '-' + (inputDate.getMonth() + 1) + '-' + inputDate.getDate();
return ((disabledDays.indexOf(formattedDate) == -1) ? false : true);
}
});
})();
</script>
This was fixed by replacing (function() with window.addEventListener("load", function()
Actually I'm working on an old existing ASP.NET project.
My task is to add an first date of the week output to the calendar week output.
Example:
The data comes from an ASP.NET model.
Actually it works like this:
function SetCalendarWeeks(data) {
$("#calendarWeek1").text("KW "+data.Week1.Number);
$("#calendarWeek2").text("KW "+data.Week2.Number);
$("#calendarWeek3").text("KW "+data.Week3.Number);
$("#calendarWeek4").text("KW "+data.Week4.Number);
$("#calendarWeek5").text("KW "+data.Week5.Number);
if (!data.MonthHas6Weeks) {
$(".collapsable").hide();
$(".dummyColumn").show();
if (data.HideLastInputbox) {
$("#planned10").hide();
} else {
$("#planned10").show();
}
} else {
$("#calendarWeek6").text("KW " + data.Week6.Number);
$(".collapsable").show();
$(".dummyColumn").hide();
$("#planned10").show();
if (data.HideLastInputbox) {
$("#planned12").hide();
} else {
$("#planned12").show();
}
}
What I tried is to add this:
document.getElementById("calendarWeek1").innerHTML = "KW "+data.Week1.Number+" <span class='firstDate'>"+data.Week1.FirstDate+"</span>";
But I got this:
Can someone help me out?
You need to convert your date returned by your model to a JavaScript date.
Date returned by your model is in the following format:
/Date(1475272800000)/
I made a function to convert your date; if the parameter short is true the date is converted to the format DD.MM.YYYY:
function ConvertDate(d, short) {
var regex = /-?\d+/;
var match = regex.exec(d);
var date = new Date(parseInt(match[0]))
if (short) {
date = ("0" + date.getDate()).slice(-2) + "." + ("0" + (date.getMonth() + 1)).slice(-2) + "." + date.getFullYear();
}
return date;
}
So you can use the function like this:
ConvertDate(data.Week1.FirstDate, true)
The full line:
document.getElementById("calendarWeek1").innerHTML = "KW "+data.Week1.Number+" <span class='firstDate'>"+ConvertDate(data.Week1.FirstDate, true)+"</span>";
function ConvertToDate(){
var rawDate = $("#rawDate").val();
var myDate = new Date(Number(rawDate));
$("#myDate").val(myDate);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
input: <input type="text" id="rawDate" value="1482706800000" /> <button onclick="ConvertToDate()">Convert</button>
<br /><br />
output: <input type="text" id="myDate" value="" readonly />
convert your data to date in javascript:
var myDate = new Date(data.Week1.FirstDate);
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 );
}