Jquery: How to show date with textbox value? - javascript

I am newbie in jquery and i wrote below code
<h1>Type your comment below </h1>
<h2>TextBox value : <label id="msg"></label>-<label id="date"></label></h2>
<div style="padding:16px;">
TextBox : <input type="text" value="" placeholder="Type Your Comment"></input>
</div>
<button id="Get">Get TextBox Value</button>
var fullDate = new Date();
$("button").click(function(){
$('#msg').html($('input:text').val());
});
How to display the Date when submit button press for the label have id="date"?
When user press submit button i want to display
"User entered Textbox Value - Date with time"

Just use proper css selectors to add the messages and date. Refer code below :
$("button").click(function() {
var msg = $('input:text').val();
var fullDate = new Date();
$('#msg').html(msg);
$('#date').html(toLocal(fullDate));
});
function toJSONLocal (date) {
var local = new Date(date);
local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
return local.toJSON().slice(0, 10);
}
function toLocal (date) {
var local = new Date(date);
local.setMinutes(date.getMinutes() - date.getTimezoneOffset());
return local.toJSON().replace('T', ' ').slice(0, 19);
}
Note: toJSONLocal, toLocal is used to format date.
jsfiddle : https://jsfiddle.net/nikdtu/q8zmLebz/

Just use this :
var fullDate = new Date();
$('#date').text(fullDate);
$(function() {
$("#Get").click(function() {
var fullDate = new Date();
$('#date').text(fullDate);
$('#msg').text($('#comment').val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Type your comment below </h1>
<h2>TextBox value : <label id="msg"></label>-<label id="date"></label></h2>
<div style="padding:16px;">
TextBox :
<input type="text" value="" placeholder="Type Your Comment" id="comment" />
</div>
<button id="Get">Get TextBox Value</button>

Related

Select a date 7 days after current date in javascript

I have input in html like this:
<input class="form-control" placeholder="Date of Collection *" id="m_date" name="m_date" type="date" tabindex="6" required/>
I would like to select a date that is more than 7 days from the current date, if I select a date before 7 days from current, it should prompt saying "Wrong date selected"
How do I do that in javascript?
I tried the following:
var date = new Date();
date.setDate(date.getDate() + 7);
console.log(date);
It gives the date correctly. How do I use this to compare if date is 7 after or not and prompt accordingly?
Thanks!
UPDATE:
<html>
<body>
<input class="form-control" placeholder="Date of Collection *" id="m_date" name="m_date" type="date" tabindex="6" required/>
</body>
</html>
<script>
let cal = document.body.getElementsByClassName('form-control')[0];
cal.onchange = function(e)
{
var selectDate = e.target.value
var startDate = new Date(Date.parse(selectDate));
console.log(startDate);
var dateAfter7Days = new Date(new Date().getTime()+(7*24*60*60*1000))
console.log("7 days " + dateAfter7Days);
if (startDate => dateAfter7Days )
{
console.log("Allow");
}
else
{
console.log("Don't allow");
}
}
</script>
I am getting "Allow" for any date I select.
The point is comparing two date values. If current date - selected date > 7 then it should print prompt. The problem is how to get selected date.
You can get the selected date from the input tag by event value. On changed date, the value get logged.
let cal = document.body.getElementsByClassName('form-control')[0];
cal.onchange = function(e) {
console.log(e.target.value);
}
<input class="form-control" placeholder="Date of Collection *" id="m_date" name="m_date" type="date" tabindex="6" required/>
var date = new Date();
var next_seven_date = d.getDate()+7;
var current_month = d.getMonth();
current_month++; // month start from 0 then we need to +1
var current_year = d.getFullYear();
var weekDate =(next_seven_date + "/" + current_month + "/" + current_year);
date.setDate(weekDate);
Since your problem is to compare dates not creating them I have updated my answer which might hlp you
var currentDate= new Date();
currentDate= new Date(currentDate.getFullYear(),currentDate.getMonth(),currentDate.getDate(),0,0,0)
var idealDifference= (7*24*60*60*1000);
//In your case this date might comes from some date selection user control. Be aware to make the time part of each date to same
var userSelectedDate = new Date(2021, 04, 04,currentDate.getHours(),0,0,0)
if((userSelectedDate.getTime()-currentDate.getTime())>=idealDifference)
{
console.log(userSelectedDate, ' is after 7 days from ',currentDate)
}
else
{
console.log(userSelectedDate, ' is before 7 days from ',currentDate)
}
Note: It is important to unset the time part of both the dates before comparing for this logic to work

Copy the date text to textfield using javascript

I want to copy the date text to textfield. when i click the button to copy, the result in textfield is undefined. Can someone help me about this problem?
function ShowHideDiv() {
var date1 = document.getElementById("datetime");
var text1 = document.getElementById("textfield1");
text1.value = date1.value;
}
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toISOString().substr(0, 10);
<p name="datetime" id="datetime" style="position:absolute;margin-top:80px;font-weight:bold"><span id="datetime" name="datetime" id="date_now"></span></p>
<input type="text" id="textfield1" name="textfield1">
<input type="submit" onclick="ShowHideDiv()" value="copy">
You are setting the date as innerHTML of the paragraph tag. So, instead of date1.value use date1.innerHTML. Check the working snippet:
function ShowHideDiv() {
var date1 = document.getElementById("datetime");
var text1 = document.getElementById("textfield1");
text1.value = date1.innerHTML;
}
var dt = new Date();
document.getElementById("datetime").innerHTML = dt.toISOString().substr(0, 10);
<p name="datetime" id="datetime" style="position:absolute;margin-top:80px;font-weight:bold"><span id="datetime" name="datetime" id="date_now"></span></p>
<input type="text" id="textfield1" name="textfield1">
<input type="submit" onclick="ShowHideDiv()" value="copy">
You need to use innerHTML which will provide the inner content of selected element by id.
function ShowHideDiv() {
var date1 = document.getElementById("datetime");
var text1 = document.getElementById("textfield1");
text1.value = date1.innerHTML;
}
var dt = new Date();document.getElementById("datetime").innerHTML = dt.toISOString().substr(0, 10);
The innerHTML property sets or returns the HTML content (inner HTML) of an element.
Also you need to use button instead of using input with type submit, since you are not submitting the data. This approach will be more fast and better.
<button type="button" onclick="ShowHideDiv()" >Copy</button>

check the date and if it is less than a month from today display some content using Knockout.js

I have an input field that asks user to pick a date and if the date is less than 30 days form today it will display some other contents. I am using jQueryUI datapicker and knockout.js for data binding and here is what I have so far JSFiddle but it's not working. What am I missing?
$(document).ready(function() {
$("#datepicker").datepicker();
});
$(document).ready(function() {
var viewModel = function() {
var self = this;
self.request_due_date = ko.observable();
self.request_due_date_rush = ko.observable(false);
self.request_due_date_rush_reason = ko.observable();
self.request_due_date.subscribe(function(dd) {
var cur = new Date(),
rush_date = cur.setDate(cur.getDate() + 30);
if (dd < rush_date) {
self.request_due_date_rush(true);
}
});
};
ko.applyBindings(new viewModel());
});
<div>Due Date:
<input id="datepicker" data-bind="text: request_due_date" type="text" />
</div>
<div data-bind="visible: request_due_date_rush">Reason For Rush:
<input data-bind="text: request_due_date_rush_reason" />
</div>
it's because when you create the datepicker object, the underlying input element gets moved around in the DOM, breaking the binding. Consider writing your own binding handler, like seen here:
jQuery UI datepicker change event not caught by KnockoutJS
You need to bind value, not text.
<input id="datepicker" data-bind="value: request_due_date" type="text" />
Also the value dd is a string and must be parsed to date, for example using moment.js
var days = moment().diff(moment(dd, "MM/DD/YYYY"), "days");
See updated fiddle
Thanks to #MaxBrodin for the insight (to bind value, not text) and this post I found the following solution to be working. Here is also the updated Fiddle
$(document).ready(function() {
$("#datepicker").datepicker();
});
$(document).ready(function() {
var viewModel = function() {
var self = this;
self.request_due_date = ko.observable();
self.request_due_date_rush = ko.observable(false);
self.request_due_date_rush_reason = ko.observable();
self.request_due_date.subscribe(function(dd) {
var date1 = new Date(dd);
var date2 = new Date();
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var days = Math.ceil(timeDiff / (1000 * 3600 * 24));
self.request_due_date_rush(days < 30);
});
};
ko.applyBindings(new viewModel());
});
<div>Due Date:
<input id="datepicker" data-bind="value: request_due_date" type="text" />
</div>
<div data-bind="visible: request_due_date_rush">Reason For Rush:
<input data-bind="text: request_due_date_rush_reason" />
</div>

Text box entered date should be in dd/MM/yyyy while creating date object using Jscript

enter code hereSuggest me on this..
While creating Date ref(java script), text box value should be treated as dd/MM/yyyy format..
function myFunction1(a)
{
//Here the input format should be dd/MM/yyyy...
//But Date ref taking it as MM/dd/yyyy
var x=new Date(a);
alert(x);
if(x>new Date())
{
alert("Wrong date");
}
else
{
alert("Success");
}
}
----
<input name="textbox1" id="textbox1" type="text" />
<input name="buttonExecute" onClick="myFunction1(document.getElementById('textbox1').value)" type="button" value="Execute" />
Try this:
var dateString = document.getElementById('<textboxid>').value;
var day = parseInt(dateString.substring(0,2));
var month = parseInt(dateString.substring(3,5));
var year = parseInt(dateString.substring(6,10));
alert(new Date(year, month - 1, day));
To Validate Date, Use this code:
alert(/^(0[1-9]|[12][0-9]|3[01]|[1-9])[- /.](0[1-9]|1[012]|[1-9])[- /.](\d{4})$/.test(dateString));
It will return true if the date is valid else return false.

Validation with KendoUI datetime

Hi i have an app where user can select for start datetime and end datetime if they want to create an event.
Now this is an html where i use KendoUI datetime plugin:
<div class="demo-section" style="width: 535px;">
<label for="start">Start date:</label>
<input id="start" value="01/01/2013" />
<label for="end" style="margin-left:3em">End date:</label>
<input id="end" value="01/01/2013"/>
</div>
</li>
<script type="text/javascript">
$(document).ready(function(){
function startChange() {
var startDate = start.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
end.min(startDate);
}
}
function endChange() {
var endDate = end.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
start.max(endDate);
}
}
var start = $("#start").kendoDateTimePicker({
change: startChange,
parseFormats: ["MM/dd/yyyy"]
}).data("kendoDateTimePicker");
var end = $("#end").kendoDateTimePicker({
change: endChange,
parseFormats: ["MM/dd/yyyy"]
}).data("kendoDateTimePicker");
start.max(end.value());
end.min(start.value());
});
Issues is i cant get validation as i want. Suppose user select From date the To date should display date which is greater that currently selected From date.My currrent code seems not works well. Thanks
Are you saying that you want to be able to select a From date greater than To, and that when you do To should automatically update to be greater than From?
If so you're almost there. You just need to update the startChange function to update the To date relative to From.
function startChange() {
var startDate = start.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
end.min(startDate);
var endDate = end.value();
if (endDate && endDate <= startDate) {
endDate.setDate(startDate.getDate() + 1);
end.value(endDate);
}
}
}
Check this jsFiddle for a full working example.

Categories