Output ASP.NET model in JavaScript - javascript

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);

Related

min Attribute for date input type not accepting variable value in javascript

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

JS date format in dynamic field CF7

This time I have question how to convert date into dynamic field by "m-d-Y".
CF7 code
<label>Date of Birth</label>
[date* date-dob class:form-control placeholder id:idate "mm/dd/yyyy"]
[dynamictext xxx id:pdfdate "date-dob format='m/d/Y'"]
output result :
The result in dynamic field is not "m/d/Y" there is come by default "Y-m-d".
Thank you for any help.
This script will instantly read values typed into your fields and will update the full address dynamic field.
You also need to add id to your dynamictext [dynamictext xxx id:pdfdate]
<script>
var pdfdate = document.getElementById("pdfdate");
var fullDate = document.getElementById("idate");
fullDate.addEventListener("input", (e) => {
var dates = e.target.value.split("-");
var dateformats = ""
if (dates.length == 3) {
var dateformats = dates[1] + "/" + dates[2] + "/" + dates[0];
}
pdfdate.value = dateformats
});
</script>

Inserting a script in a query string

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}")
?

javascript date format into dd/mm/yyyy

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

iPhone Date Field - Change Date Format

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

Categories

Resources