Date format by JavaScript to dd/MM/YYYY - javascript

I want to change date format to "dd/MM/YYYY" when i change it gives me another wrong date. adddate() function set by default arrival date and departure
date on load .changedDate() change departure date when i change arrival date .
addDate();
function addDate() {
date = new Date();
var month = date.getMonth() + 1;
var day = date.getDate();
var year = date.getFullYear();
if (document.getElementById('startDate').value == '') {
document.getElementById('startDate').value = month + '/' + day + '/' + year;
}
if (document.getElementById('endDate').value == '') {
document.getElementById('endDate').value = month + '/' + (day + 1) + '/' + year;
}
}
function changedDate(){
var arrivalDate = new Date(document.getElementById('startDate').value) ;
var departureDate = new Date(document.getElementById('endDate').value) ;
if(arrivalDate>=departureDate){
var arrDate = new Date();
arrDate.setDate(arrivalDate.getDate()+1);
arrDate.setMonth(arrivalDate.getMonth()+1);
arrDate.setFullYear(arrivalDate.getFullYear());
document.getElementById('endDate').value = arrDate.getMonth() + '/' + arrDate.getDate() + '/' + arrDate.getFullYear();
}
}
<input type="text" id="startDate" style="background-color:#5c677b;height:25px;" name="checkin" placeholder="checkin" onchange="changedDate()">
<input type="text" id="endDate" style="background-color:#5c677b;height:25px;" name="checkout" placeholder="checkout">

You have assigned month + date + year. Change it like below.
addDate();
function addDate() {
date = new Date();
var month = date.getMonth() + 1;
if (month < 10)
month = '0' + month;
var day = date.getDate();
if (day < 10)
day = '0' + day;
var year = date.getFullYear();
if (document.getElementById('startDate').value == '') {
document.getElementById('startDate').value = day + '/' + month + '/' + year;
}
if (document.getElementById('endDate').value == '') {
document.getElementById('endDate').value = (day + 1) + '/' + month + '/' + year;
}
}
function changedDate() {
var startDate = document.getElementById('startDate').value.split("/");
var endDate = document.getElementById('endDate').value.split("/");
var arrivalDate = new Date(startDate[2], startDate[1] - 1, startDate[0]);
var departureDate = new Date(endDate[2], endDate[1] - 1, endDate[0]);
if (arrivalDate >= departureDate) {
var arrDate = arrivalDate;
arrDate.setDate(arrDate.getDate() + 1);
var month = arrDate.getMonth() + 1;
if (month < 10)
month = '0' + month;
var day = arrDate.getDate();
if (day < 10)
day = '0' + day;
var year = arrDate.getFullYear();
document.getElementById('endDate').value = day + '/' + month + '/' + year;
}
}
<input type="text" id="startDate" style="background-color:#5c677b;height:25px;" name="checkin" placeholder="checkin" onchange="changedDate()">
<input type="text" id="endDate" style="background-color:#5c677b;height:25px;" name="checkout" placeholder="checkout">

There is a free library available called moment.js in which you can play with date formatting very easily.
moment().format('dd/MM/YYYY');

Related

How to Change a specific value in input using JavaScript

I have an input containing a date value
example:
<input type="text" name="cel_dafa" value="26/12/2018">
I want a button when pressed it increases the value one month
So that the result after the pressure:
<input type="text" name="cel_dafa" value="26/1/2019">
Note: I do not want to harm the day,
Only the month and year if at the end of the year
Ok, so consider you have a button like;
<button onclick="increase()"> Click Me </button>
And input like;
<input type="text" id="date" name="cel_dafa" value="26/12/2018">
Now code of increase function;
function increase()
{
var currentDate = document.getElementById('date').value;
var parts = currentDate.split("/");
var day = parts[0];
var month = parts[1];
var year = parts[2];
var d = new Date(year, month - 1, day);
d.setMonth(d.getMonth() + 1);
var newDate = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
document.getElementById('date').value = newDate;
}
Html
<input type="text" id="date-input" name="cel_dafa" value="26/12/2018">
<button onclick="increaseDate()">submit</button>
JS
function increaseDate() {
var dateInput = document.querySelector('#date-input').value;
var day = dateInput.split('/')[0];
var month = dateInput.split('/')[1];
var year = dateInput.split('/')[2];
if (month > 11) {
year = parseInt(year) + 1;
month = 1
} else {
month = parseInt(month) + 1;
}
var newDate = day +"/"+ month +"/"+ year;
document.querySelector('#date-input').value = newDate;
}

How do I restrict past dates in HTML5 input type Date?

I am trying to restrict past dates in input type="date". I am able to restrict future dates, but how can I restrict past dates?
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var minDate= year + '-' + month + '-' + day;
$('#txtDate').attr('min', minDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />
You can try this
var maxDate = year + '-' + month + '-' + day;
alert(maxDate);
$('#txtDate').attr('min', maxDate);
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var maxDate = year + '-' + month + '-' + day;
// or instead:
// var maxDate = dtToday.toISOString().substr(0, 10);
alert(maxDate);
$('#txtDate').attr('min', maxDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="txtDate" />
Here is a PHP solution that gets today's date and sets it as the minimum.
<input type="date" id="txtDate" min="<?php echo date("Y-m-d"); ?>">
This will put it in the correct double-digit format for the day and month. https://www.php.net/manual/en/function.date.php
Programmatically you can do something like this to disable past dates from being selectable:
<input type='date' min={new Date().toISOString().split('T')[0]} />
The below code may help you. It is normal HTML5 code:
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
See this working example.
In HTML:
<input type="date" id="ExpiryDate" class="form-control" min="9/10/2018"/>
Using Jquery new version:
function SetMinDate() {
var now = new Date();
var day = ("0" + now.getDate()).slice(-2);
var month = ("0" + (now.getMonth() + 1)).slice(-2);
var today = now.getFullYear() + "-" + (month) + "-" + (day);
$('#ExpiryDate').val(today);
$('#ExpiryDate').attr('min', today); }
<input type="date" id="date">
var date = new Date().toISOString().slice(0,10);
//To restrict past date
$('#date').attr('min', date);
//To restrict future date
$('#date').attr('max', date);
$(function() {
$(document).ready(function () {
var todaysDate = new Date();
var year = todaysDate.getFullYear();
var month = ("0" + (todaysDate.getMonth() + 1)).slice(-2);
var day = ("0" + todaysDate.getDate()).slice(-2);
var maxDate = (year +"-"+ month +"-"+ day);
$('.class_of_input_field').attr('min',maxDate);
});
});``
To select To date greater than from date we can use this code
$(document).on("change", "#from", function () {
debugger
var date = $(this).val();
$('#to').attr('min', date);
});
$(function(){
var dtToday = new Date();
var month = dtToday.getMonth() + 1;
var day = dtToday.getDate();
var year = dtToday.getFullYear();
if(month < 10)
month = '0' + month.toString();
if(day < 10)
day = '0' + day.toString();
var minDate= year + '-' + month + '-' + day;
$('#date').attr('min', minDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="date" id="date" />
If you are using laravel then just do it like this
<input type="date" name="start_date" required min="{{date('Y-m-d')}}" />
and for regular HTML just specify the date
<input type="date" name="start_date" required min="2022-07-18" />
in laravel 5.8,
<input type="date" class="form-control" name="from_date" id="from_date"required min="{{date('Y-m-d')}}" value="{{ old('from_date') }}">
here, i used min="{{date('Y-m-d')}}"
I've found this working (HTML) method. (i.e this works with only textbox with date mode, not with calendars or date-time pickers.)
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var today = new Date();
var month = ('0' + (today.getMonth() + 1)).slice(-2);
var day = ('0' + today.getDate()).slice(-2);
var year = today.getFullYear();
var date = year + '-' + month + '-' + day;
$('[id*=txtExpDate]').attr('min', date);
});
</script>
<asp:TextBox ID="txtExpDate" runat="server" TextMode="Date"></asp:TextBox>

How to alert current date in yyyy-mm-dd hrs:min:sec format in javascript?

In my program i need to alert current date with time in specific format(2015-11-18 12:23:00) so i am write like this
var date = new Date();
alert(date);
but the result is Wed Nov 18 2015 12:24:28 GMT+0530 (India Standard Time).
and also i am try like this
<script>
var d = new Date();
var c = new Date();
alert(formatDate(c));
alert(formatDate(d));
function formatDate(d)
{
var month = d.getMonth();
var day = d.getDate();
var hours = d.getHours();
var minutes = d.getMinutes();
month = month + 1;
month = month + "";
if (month.length == 1)
{
month = "0" + month;
}
day = day + "";
if (day.length == 1)
{
day = "0" + day;
}
hour = hour + "";
if (hour.length == 1)
{
hour = "0" + hour;
}
minute = minute + "";
if (minute.length == 1)
{
minute = "0" + minute;
}
return d.getFullYear()+month + '' + day + ''+ hour + '' + minute + '';
}</script>
it is also not working properly.
how can i do this in javascript and also i need to passed the veriable to database in another php file. please help me how can i do this
I think this below code are helpful us.
function getDateTimeFormate () {
now = new Date();
year = "" + now.getFullYear();
month = "" + (now.getMonth() + 1); if (month.length == 1) { month = "0" + month; }
day = "" + now.getDate(); if (day.length == 1) { day = "0" + day; }
hour = "" + now.getHours(); if (hour.length == 1) { hour = "0" + hour; }
minute = "" + now.getMinutes(); if (minute.length == 1) { minute = "0" + minute; }
second = "" + now.getSeconds(); if (second.length == 1) { second = "0" + second; }
return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
}
To get date time formate like.
alert(getDateTimeFormate());
// example alert message: 2011-05-18 15:20:12
Try this..
<script>
var currentdate = new Date();
var datetime = currentdate.getFullYear() + "-"
+ (currentdate.getMonth()+1) + "-"
+ currentdate.getDate() + " "
+ currentdate.getHours() + ":"
+ currentdate.getMinutes() + ":"
+ currentdate.getSeconds();
alert(datetime);
</script>
Output:2015-11-18 12:46:52
Demo:http://js.do/code/73749
Please try the following code:
Number.prototype.padLeft = function(base,chr){
var len = (String(base || 10).length - String(this).length)+1;
return len > 0? new Array(len).join(chr || '0')+this : this;
}
var d = new Date;
function formatDate(d){
dformat = [ (d.getMonth()+1).padLeft(),
d.getDate().padLeft(),
d.getFullYear()].join('-')+
' ' +
[ d.getHours().padLeft(),
d.getMinutes().padLeft(),
d.getSeconds().padLeft()].join(':');
return dformat;
}
alert(formatDate(d));
It will return : 11-18-2015 12:17:02. And to pass the value to a php code check this: How to pass JavaScript variables to PHP?
This might be useful
Date.prototype.yyyy = function() {
var yy = this.getFullYear().toString();
var mm = (this.getMonth()+1).toString();
var dd = this.getDate().toString();
var hh = this.getHours().toString();
var min = this.getMinutes().toString();
var ss = this.getSeconds().toString();
return yy +"-" +(mm[1]?mm:"0"+mm[0]) + "-" +(dd[1]?dd:"0"+dd[0])+" "+(hh[1]?hh:"0"+hh[0])+":"+(min[1]?min:"0"+min[0])+":"+(ss[1]?ss:"0"+ss[0]);
};
d = new Date();
d.yyyy();
From the below function you will get all the details you want to show use it according to your need
getMonth() - Returns a zero-based integer (0-11) representing the month of the year.
getDate() - Returns the day of the month (1-31).
getDay() - Returns the day of the week (0-6). 0 is Sunday, 6 is Saturday.
getHours() - Returns the hour of the day (0-23).
getMinutes() - Returns the minute (0-59).
getSeconds() - Returns the second (0-59).
getMilliseconds() - Returns the milliseconds (0-999).
getTimezoneOffset() - Returns the number of minutes between the machine local time and UTC.
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd
}
if(mm<10){
mm='0'+mm
}
var today = dd+'/'+mm+'/'+yyyy;
document.getElementById("DATE").value = today;
Use this code:
var sec = d.getSeconds();
return d.getFullYear()+'-'+month + '-' + day + ' '+ hour + ':' + minute + ':'+sec;
instead of:
return d.getFullYear()+month + '' + day + ''+ hour + '' + minute + '';

Show current date

I am using the following to get the current date:-
var dateObj = new Date();
var month = dateObj.getUTCMonth() + 1;
var day = dateObj.getUTCDate();
var year = dateObj.getUTCFullYear();
var newdate = day + "/" + month + "/" + year;
If I alert(newdate); it shows:-
3/06/2013
Is there any way I can display this as:-
03/06/2013
With plain Javascript, only manually
if (day < 10) day = "0" + day;
if (month < 10) month = "0" + month;
If you want to avoid using a library, and don't mind an extra line in your JavaScript:
var day = dateObj.getUTCDate(),
dd = parseInt(day, 10) < 10 ? '0' + day : day;
Using JQuery DateFormat:
$.format.date(dateObj.toString(), "dd/MM/yyyy");
var mydate=new Date();
alert(mydate.toString('dd/MM/yyyy'));
function padWithZeroes(number, width)
{
while (number.length < width)
number = '0' + number;
return number;
}
Now call day = padWithZeroes(day, 2) (and likewise for the month) before you use it.
You can split it and create your own format:
var splitTime = newDate.split("/");
var day = splitTime[0];
var month = splitTime[1];
var year = splitTime[2];
if (day < 10){
day = "0" + day;
}
var myDate = day + '/' + month + '/' + year;
Living demo:
http://jsfiddle.net/rtqpp/
Please use the following:
var dateObj = new Date();
var month = ('0' + (dateObj.getUTCMonth() + 1) ).slice( -2 );;
var day = ('0' + (dateObj.getUTCDate() + 1) ).slice( -2 );
var year = dateObj.getUTCFullYear();
var newdate = day + "/" + month + "/" + year;

Ajax get Date in dd/mm/yyyy format

var d = new Date();
var today_date = d.getDate() + '/' + month_name[d.getMonth()] + '/' + d.getFullYear();
This is how I am getting a date. It works with a slight problem. For todays date 7th of June 2011 it returns 7/11/2011, what i want it to return is 07/11/2011?
Anyone know how?
Well, you could simply check the length of d.getDate()and if it's 1 then you add a zero at the beginning. But you would like to take a look at format() to format your dates?
Like so:
("0"+1).slice(-2); // returns 01
("0"+10).slice(-2); // returns 10
Complete example:
var d = new Date(2011,1,1); // 1-Feb-2011
var today_date =
("0" + d.getDate()).slice(-2) + "/" +
("0" + (d.getMonth() + 1)).slice(-2) + "/" +
d.getFullYear();
// 01/02/2011
Try this (http://blog.stevenlevithan.com/archives/date-time-format):
var d = new Date();
d.format("dd/mm/yyyy");
Try this, this is more understandable.:
var currentTime = new Date();
var day = currentTime.getDate();
var month = currentTime.getMonth() + 1;
var year = currentTime.getFullYear();
if (day < 10){
day = "0" + day;
}
if (month < 10){
month = "0" + month;
}
var today_date = day + "/" + month + "/" + year;
document.write(today_date.toString());
And result is :
07/05/2011

Categories

Resources