JavaScript get UTC from local midnight - javascript

I have a date that comes from a Bootstrap DateTimePicker $('#datetimepicker').find("input").val() that has the format "mm/dd/yyyy".
<div class='input-group date' id='datetimepicker'>
<form autocomplete="off" onkeydown="return event.key != 'Enter';">
<input type='text' autofill="off" readonly class="form-control" />
</form>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I'm trying to get the UTC date and time for the selected date, at midnight, using Moment js:
moment.utc($('#datetimepicker').find("input").val()).tz(timezone).format('YYYY-MM-DD HH:mm:ss')
For example, starting date from the picker is 01/21/2022 and the timezone is America/Phoenix which is UTC-7.
I should have 2022-01-21 07:00:00 but my code returns 2022-01-20 17:00:00.
What am I doing wrong? Is there a way to get the UTC time for a day at 00:00 time, just by knowing the timezone?

You have to create the timestamp in your local timezone first, and then convert it to UTC. You are doing it the other way around. Ie if I split up your code snippet, you are doing the following
let thedate = $('#datetimepicker').find("input").val();
let utcdate = moment.utc(thedate);
let localdate = utcdate.tz(timezone);
Thus, the timezone offset is, of course, added in the wrong direction ...
Try the following
function getTime() {
let thedate = $('#thedate').val();
console.log(thedate)
// create a timestamp in the respective timezone
let localdate = moment.tz(thedate, "America/Phoenix");
// convert it to utc
let utcdate = localdate.utc();
// format the timestamp
console.log(utcdate.format("YYYY-MM-DD HH:mm:ss"));
}
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="thedate" type="date">
<input type="button" onClick="getTime()" value="Get Time">

Related

How can I set the date from one date input to another date input?

I have two date inputs. When I choose start date, I want jquery to automatically generate an end date that's 3 months later.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="container">
<div class="col-md-6">
<label class="text-black" for="dpradzia">Start Date</label>
<input type="date" id="darbo_pradzia" name="darbo_pradzia" class="form-control">
</div>
<div class="col-md-6">
<label class="text-black" for="bandomasis_laikotarpis">End date </label>
<input type="date" id="bandomasis_laikotarpis" name="bandomasis_laikotarpis" class="form-control">
</div>
</div>
You should listen to change events of the first input and create a new Date with its value. After that, you can add 3 months to this object using new Date(date.setMonth(date.getMonth()+3)). The new date with the extra 3 months should be formatted into yyyy-mm-dd and set to the value of the second input. The complete program is:
$(document).ready(function() {
$('#darbo_pradzia').change(function(){
let date = new Date($(this).val());
let newDate = addMonths(date, 3);
var formatted = newDate.toISOString().split('T')[0]; //yyyy-mm-dd
console.log(formatted);
$('#bandomasis_laikotarpis').val(formatted);
});
//add months to date function
function addMonths(date, months) {
var d = date.getDate();
date.setMonth(date.getMonth() + +months);
if (date.getDate() != d) {
date.setDate(0);
}
return date;
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/04b00d367c.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<div class="container">
<div class="col-md-6">
<label class="text-black" for="dpradzia">Start Date</label>
<input type="date" id="darbo_pradzia" name="darbo_pradzia" class="form-control">
</div>
<div class="col-md-6">
<label class="text-black" for="bandomasis_laikotarpis">End date </label>
<input type="date" id="bandomasis_laikotarpis" name="bandomasis_laikotarpis" class="form-control">
</div>
</div>
EDIT :
According to #RobG's comment, adding a number of months to a date object has several unique test cases that need to be taken into consideration. Therefore, I used his answer in this post to achieve this operation.
<script>
$('#darbo_pradzia').on('focusout', function(){
let startDate = new Date($('#darbo_pradzia').val());
let endDate = new Date(startDate);
endDate.setMonth(endDate.getMonth()+3);
let day = ("0" + endDate.getDate()).slice(-2);
let month = ("0" + (endDate.getMonth() + 1)).slice(-2);
let date = endDate.getFullYear()+"-"+(month)+"-"+(day) ;
$('#bandomasis_laikotarpis').val(date);
})
</script>
You can read the value on the onchange event or focusout event. Read the date and you can copy the inserted date from the Date constructor. Increase the month, no problem if you overflow the 12 months because automatically the year is increased and the month value scaled between [0-11]. Now to write the date in the input date field there are two problem:
Date control in HTML 5 accepts in the format of Year - month - day
If the month is 5, it needs to be set as 05 not 5 simply. The same thing for day field also.
Add the script downwards in the page, or add a ready/onload event

How to get Unix timestamp using Bootstrap-datetimepicker

I am using 3rd party date time picker from https://eonasdan.github.io/bootstrap-datetimepicker/
It is working fine, however, I'd like to get the value in Unix timestamp format. How do I do that? There is no formatting option for Unix. https://eonasdan.github.io/bootstrap-datetimepicker/Functions/#format
function getValue() {
var date = $('#datetimepicker1').data('date');
alert(date); // shows 05/25/2017 5:43 PM
}
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
The eonasdan datetimepicker has a good API that you can use to programmatically interact with the picker.
You can use the date() method that:
Returns the component's model current date, a moment object or null if not set.
Since the value return by date() is a moment object you can use unix() to get Unix timestamp (the number of seconds since the Unix Epoch).
Here a working sample:
function getValue() {
var date = $('#datetimepicker1').data("DateTimePicker").date();
if( date ){
alert(date.unix());
}
}
$('#datetimepicker1').datetimepicker();
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button onclick="getValue()" class="btn btn-primary">Get value</button>
Remember that, as the docs says:
Note All functions are accessed via the data attribute e.g. $('#datetimepicker').data("DateTimePicker").FUNCTION()
Short Answer: since that plugin work together with moment.js you can use the momentjs method unix(), like in the following way:
moment($('#datetimepicker1').data('date')).unix()
Update(I was testing on Internet Explorer 11)
$('#datetimepicker1').data('DateTimePicker').date().unix()

Compare HTML5 date input with Angular2 date

I wanted compare the date (input type="date" in HTML5) with the date Objekt in Angular2 but there is no way to compare them. I there a easy way to do it ?
<label> Create Date: </label>
<input class="form-control" [ngModel]="chart.createDate"
(ngModelChange)="chart.createDate = $event"
type="date"
data-date="" data-date-format="DD MMMM YYYY"
required #createDate="ngModel" name="createDate"/>
<div *ngIf="Date.parse(chart.createDate).getTime() < dateControll.getTime()">
- date is older than today
</div>
I did it like this:
if (varDate1.valueOf() > varDate2.valueOf()) {
// do this and that...
}
but both needs to be defined as Date in Angular...

Limit(disable days buttons) bootstrap-datepicker calendar date(date_stop can't be < date_start)

How can I limit(disable days buttons) bootstrap-datepicker(not jQuery Datapicker) calendar date in this way:
id_date_stop can't be < id_date_start so
if I select date_start as
06-05-2016, date_stop can't be earlier than 06-05-2016.
It can be
from 06-05-2016 to 10-05-2016(todays date).
my html:
<div class="input-group date" data-provide="datepicker" data-date-end-date="0d">
<input id="id_date_start" name="data_start" type="text">
<div class="input-group-addon"></div>
</div>
<div class="input-group date" data-provide="datepicker" data-date-end-date="0d">
<input id="id_date_stop" name="date_stop" type="text">
<div class="input-group-addon"></div>
</div>
You can use jQuery combined with the methods available from bootstrap-datepicker to set the start and end dates.
Sample code would look like this
$('#id_date_start').datepicker({autoClose: true}).on('changeDate',function(e) {
$('#id_date_stop').datepicker({autoClose: true}).datepicker('setStartDate', e.date)
.datepicker('setEndDate', new Date());
})
This code will set a start date for the 'date_stop' datepicker based on your start date selected, and will set the end date to today's date.
I am using the line $('#id_date_start').datepicker({autoClose: true}) before the method calls, to ensure that the datepicker object is initialized. This will ensure that the methods will fire correctly.
Here is a sample fiddle.

How to change date format of datepicker value in javascript

I gone to many of the questions already asked in stackoverflow related to my problem, but i still i can't find any solution. I am trying to get the value from datpicker in my javascript function, but not able to change its format. By default its showing in mm/dd/yy format and i want in yyyy-mm-dd format. Can anyone please help.
Below is my html code :
<html xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<script>
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
$.datepicker.formatDate( 'yy-mm-dd' ,date );
alert(date); }
</script>
</h:head>
<body>
<input type="text" id="fromdate" class="form-control dpd1" name="from"placeholder="Select From Date"></input>
<span class="input-group-addon">To</span>
<input type="text" id="todate" class="form-control dpd2" name="to" placeholder="Select To Date" ></input>
<input type="button" onclick="getdate()" value="Change Date"></input>
</body>
</html>
Thanks in advance.
<script>
$(document).ready(function(){
$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
});
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
alert(date);
}
</script>
The format of dates can be a combination of any of the following characters:
d – day of month (single digit where applicable)
dd – day of month (two digits)
m – month of year (single digit where applicable)
mm – month of year (two digits)
y – year (two digits)
yy – year (four digits)
D – short day name
DD – full day name
M – short month name
MM – long month name
'...' – any literal text string
# - UNIX timestamp (milliseconds since 01/01/1970)
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
date = $.datepicker.formatDate( 'yy-mm-dd', date );
alert(date);
}
You need to assign the result of the formatDate call to your date object. Then you can alert it.
HTML
<input type="text" id="fromdate" class="datepicker form-control dpd1" name="from" placeholder="Select From Date"></input> <span class="input-group-addon">To</span>
<input type="text" id="todate" class="datepicker form-control dpd2" name="to" placeholder="Select To Date"></input>
<input type="button" class="getdate" value="Change Date"></input>
JavaScript
//Define fields with class name 'datepicker' as jQueryUI datepicker
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd' //Setting dateformat for the datepicker
});
//Binding 'onclick' function for the button with class name 'getdate'
$('.getdate').on('click', function () {
var date = $('#fromdate').val();
alert(date);
});
JSFiddle
Its works for me
<input type="text" id="fromdate" class="form-control dpd1" name="from"placeholder="Select From Date"></input>
$('#fromdate').datepicker({
format: 'yyyy/mm/dd'
});

Categories

Resources