How to Change a specific value in input using JavaScript

How to Change a specific value in input using JavaScript - 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;
}

Related

How to set a default datetime stamp on an input tag using Javascript?

I have here a script to auto-input the current date on my input tag. However, I cannot add an auto timestamp like date.getHour(); as well. It's not working when I tried doing this.
Please take a look at the script I'm using:
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = year + "-" + month + "-" + day;
document.getElementById('Date').value = today;
<form id="saveNote">
<textarea class="lined" id="textarea1" name="textarea1" spellcheck="true" placeholder="" onpaste="console.log('onpastefromhtml')"></textarea>
<input type="date" id="Date" name="Date"/>
</form>
<button onclick="save()">Submit</button>
All I'm looking for is a simple solution that will add a timestamp at the end of the day like "1/12/2021 - 02:00 PM" or even in 24-hour format.
EDIT: Here's my failed code:
var date = new Date();
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
var hour = date.getHours()
if (month < 10) month = "0" + month;
if (day < 10) day = "0" + day;
var today = year + "-" + month + "-" + day + "-" + hour;
document.getElementById('Date').value = today;
Thanks in advance!

change your input type like this.
<input type="datetime-local" name="Date" id="Date">
then use this js code to set current date.
var now = new Date();
now.setMinutes(now.getMinutes() - now.getTimezoneOffset());
document.getElementById('Date').value = now.toISOString().slice(0,16);

I think you should change your input tag's type to datetime
<input type="datetime" id="Date" name="Date"/>

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>

Date format by JavaScript to dd/MM/YYYY

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

Datepicker on AngularJS error with values

The thing I'm trying to do here is when a user selects a StartDate and an EndDate when he clicks on the previous arrow he should fetch data 7 days before every time in order to see the progress.
JavaScript:
$scope.getDiffPrev = function(startDate, endDate, computeDiff) {
var start = startDate;
var date1 = (start.getDate() -7);
var month1 = (start.getMonth() +1);
var year1 = start.getFullYear();
var end = endDate;
var date2 = (end.getDate() -7);
var month2 = (end.getMonth() +1);
var year2 = end.getFullYear();
$http.get('/admin/api/stats?start=' + date1 +'-'+ month1 +'-'+ year1 + '&end=' + date2 +'-'+ month2 +'-'+ year2 +'&computeDiff=true').success(function(data) {
$scope.stats = data;
});
}
HTML:
<label>From</label>
<input type="text" datepicker-popup="dd-MM-yyyy" ng-model="startDate"/>
<label>To</label>
<input type="text" datepicker-popup="dd-MM-yyyy" ng-model="endDate"/>
<button class="btn btn-success" ng-click="getDiffPrev(startDate, endDate, computeDiff)">←</button>

don't we all love javascript's date? ;)
var start = angular.copy(startDate)
start.setDate(start.getDate() + computeDiff);
var date1 = start.getDate();
var month1 = start.getMonth() + 1; // i hate em for this one -.-
var year1 = start.getFullYear();
and here an example
in the line start.setDate(start.getDate() + computeDiff); we use the Date()'s intern calculation to get the right date.
EDIT:
if you can add other libraries have a look at moment.js
moment().subtract('days', 7).format('yourFormatStringHere')

Set new date 12 months after in a form

I am very new to script and checked many answers but could not find the complete answer.
In a form, I have a start date, number of months and end date - I want to display the end date when the start date is entered - I have created this script but I must be missing something.
Here's my code:
[script type="text/javascript" src=Datejs][/js]
[script type="text/javascript" ]
window.onload = function() {
var startdateEl = document.getElementById("customFields_cf_232");
var leasetermEl = document.getElementById("customFields_cf_34");
var enddateEl = document.getElementById("customFields_cf_38");
function CalculateDate {
var enddateEl=leasetermEl.months().startdateEl;
}
var enddateEl.onblur = CalculateDate;
};
[/script]

I made this. It listens to your keystrokes live. http://jsfiddle.net/4t54J/
<input name="startDate" type="text" value="MM-DD-YYYY" />
<input name="endDate" type="text" />
var SECOND = 1000;
var MINUTE = SECOND * 60;
var HOUR = MINUTE * 60;
var DAY = HOUR * 24;
var YEAR = DAY * 365.25;
var startDateInput = 'input[name="startDate"]';
var endDateInput = 'input[name="endDate"]';
$(startDateInput).live('keypress', function (e) {
var startDate = $(startDateInput).val();
var endDate = setEndDate(startDate);
$(endDateInput).val(endDate);
});
function setEndDate(startDate) {
var date = new Date();
var parts = startDate.split('-');
if (date != '' && parts.length > 2) {
// year, month (0-based), day
date.setFullYear(parts[2], parts[0] - 1, parts[1]);
date.setTime(date.getTime() + YEAR);
var mm = date.getMonth() + 1;
mm = (mm < 10 ? '0' : '') + mm.toString();
var dd = date.getDate();
var yyyy = date.getFullYear();
return mm + "-" + dd + "-" + yyyy;
} else {
return '';
}
}

Develop Reference

JavaScript is the programming language of the Web.

How to Change a specific value in input using JavaScript - javascript

Related

How to set a default datetime stamp on an input tag using Javascript?

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

Date format by JavaScript to dd/MM/YYYY

Datepicker on AngularJS error with values

Set new date 12 months after in a form

Categories

Resources