Reading an HTML5 date in JavaScript - javascript

I have an input field in my project that uses the HTML5 date input type. This is saved to my database in the format YYYY-MM-DD. In another page, I access this date from a Twig and print it in a table. This prints in the format YYYY-MM-DD. So far so good. However, when I try to use an alert box to print the same date, JavaScript parses the date incorrectly to just show the year (and the wrong year at that).
Input field (as part of a bigger "make plan" input form):
<input type="date" id="start" name="startdate" class="form-control" required="required"/>
Output:
<td>{{plan.startdate}}</td> <!-- This prints correctly YYYY-MM-DD -->
<td>
<script>
alert({{plan.startdate}}); <!-- This alerts incorrectly YYYY -->
</script>
</td>
I can't really see the correlation between the dates either.
2014-03-27 gives '1984' in the alert box
2014-03-20 gives '1991' in the alert box
2014-04-01 gives '2009' in the alert box
I've tried to parse the date using the JavaScript, but I'm not really sure how to parse an incorrect year.

It is being evaluated as an expression instead of a date string. If you put the date in quotation marks then it should be fine. See the following
<td>{{plan.startdate}}</td> <!-- This prints correctly YYYY-MM-DD -->
<td>
<script>
alert("{{plan.startdate}}"); <!-- This alerts incorrectly YYYY -->
</script>
</td>

Related

When edit date bootstrap datepicker start date from previous years not current year

I have an edit page that wants to edit the date using bootstraps-datepicker. It works nicely. But the problem is that when I fetch data from back-end by value tag in the input field the edit date starts from the year 1931 instead of 2020 (current year). I am using two script
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="{{asset('/admin/js/formpickers.js')}}"></script>
input field
<div id="datepicker-popup" class="input-group date datepicker">
<input type="text" name="date" class="form-control" value="{{$coupon->expiry_date}}">
<div class="input-group-addon input-group-text">
<span class="mdi mdi-calendar"></span>
</div>
</div>
if I remove value tag then it starts from 2020 but by use that I have to fetch previous given date from back-end. Can any one help me?
In value tag you need to give a Date object instead of a standard date e.g 10/12/2020
So, to convert your string value to Date object, you should try splitting your $coupon->expiry_date value to Date obj like this:
new Date(year,month,date)

JavaScript tCal date format

I'm using tcal JS calendar on my website. I included tcal.css and tcal.js.
<INPUT TYPE="text" Name="DOB" class="tcal" required="yes">
The calendar displays correct, but it doesn't format the date. If I type 08031985, I would like that it automatically format to 08/03/1985. I don't want to have to enter the "/". Is it possible?
Thanks
If I am getting you correctly, you are not supposed to type the date but just pick it from the drop down pop up with the calendar.

Changing input date data-type to DD/MM/YYYY instead of MM/DD/YYYY with require [duplicate]

This question already has answers here:
Is there any way to change input type="date" format?
(21 answers)
Closed 5 years ago.
Hi guys I'm creating an application for a region where date format is only in DD/MM/YYYY while the default input type date format in MM/DD/YYYY
Jquery CDN added
Bootstrap CDN added
<form>
<input type='date' id='date' name='date' required>
<input type='submit'>
</form>
I can do this by placing a placeholder of 'dd/mm/yyyy' in input because value is in format of yyyy-mm-dd that don't bother me but that require is creating problem. When a user gives wrong input in mm/dd/yyyy format it gives an error that date is incorrect so placing a placeholder will not work in this required case.
how can i change it to dd/mm/yyyy so it can work with required.
According to Mozilla's article on the <input type="date"> element, the user's operating system locale will affect how the date is parsed. So if you got a hold of a computer with an operating system set to your target region, it should behave as expected.
On the other hand, browser support isn't that great for <input type="date">, so I wouldn't depend on it. Better to use a date library that supports localization to validate.
If you're just looking for valid dates (and don't care about mixing up Feb 1 and Jan 2, for example), you could use the pattern attribute, put a localized regex in there.
Or, another alternative, render the full date next to the field (January 5, 2017) as they type it.
Mozilla's article: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
Instead of this use jquery's Datepicker.IN Jquery's Datepicker You can set any date Format You want.
Add this code in script tags at the end of body
<script>$('#date').datepicker({ dateFormat: 'dd-mm-yy' }).val();</script>
Just Add These Cdn's in head section in your code
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Datetime range selection javascript

I need to create a datetime range selector at the top of my dashboard such that, every chart and all text elements below gets filtered for the selected time period range.
So I was looking at this great solution by keith.
https://github.com/keithhackbarth/jquery-datetime-picker
I am a beginner in JS and there is nothing in the index.html for the above datetime picker.
There are only 4 JS libraries, which is too much code for a beginner.
I basically want to load the datetime as is there in my data only, so which part of code snippet do I start modifying?
Eg: The first column in my data - datetime is from 2014-03-01 to 2014-03-14
So the datetime picker should show exactly that after reading my data(column here)
index.html code :
<input type="text" class="dt_date_start"/>
<input type="text" class="dt_time_start" /> .........TO............
<input type="text" class="dt_date_end" />
<input type="text" class="dt_time_end" />
These are the four date ranges(classes) defined which are in datepair.js.
How do I go about editing datepair.js such that it loads the dates that I only want, which is present in the data.

How to show a date only upto today's date in HTML?

I have a date input box like this:
<input type="date" id="start_date" name="start_date" class="text_search" />
This displays the date box up to anywhere in the past and future date. Past date is fine but I don't want to show the future date. For example if today's date is May 31, 2013, user can only choose the date upto May 31, 2013. How can I do that?
Use the max attribute as in <input type="date" name="bday" max="1979-12-31">. You can use javascript to set this attribute to today or set it on the server side
are you using any jquery ui plugin ? if yes then use following code,
$(function() {
$("#start_date").datepicker({maxDate: '+0d'});
});

Categories