How can I get bootstrap-datepicker to return UTC timestamps rather than timestamps based on the user's timezone?
I'm using version 1.8.0 of bootstrap-datepicker
Here's an example which displays the timestamp returned by bootstrap-datepicker when a date is selected:
HTML
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="input-group date">
<input type="text" class="form-control" id="js-date">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="row">
<span id="timestamp-output"></span>
</div>
</div>
JavaScript
$(document).ready(function() {
$('#js-date').datepicker();
});
$('#js-date').datepicker().on('changeDate', function (ev) {
$('#timestamp-output').text(ev.date.getTime());
});
Fiddle Example
bootstrap-datepicker example
Output
When you run the example and select the date 11/29/2018, the timestamp displayed is 1543478400000, which corresponds to:
GMT: Thursday, November 29, 2018 8:00:00 AM
What I need is for it to instead return the timestamp 1543449600000, which corresponds to:
GMT: Thursday, November 29, 2018 12:00:00 AM
Summary
Is there a configuration option in bootstrap-datepicker for this? Or perhaps some reliable way to convert the returned localized timestamp into a UTC timestamp?
You may want to look at Moment.js. Updated I convert a local to UTC timestamp.
$(document).ready(function() {
$('#js-date').datepicker();
});
$('#js-date').datepicker().on('changeDate', function (ev) {
var datetime = new Date(ev.date.getTime());
// Convert local timestamp to UTC timestamp
var local = moment(datetime).valueOf();
var utc = (moment(datetime).add(-(moment().utcOffset()), 'm'));
utc = moment.parseZone(utc).utc().valueOf();
$('#timestamp-local').text('Local Timestamp is ' + local);
$('#timestamp-utc').text('UTC Timestamp is ' + utc);
console.log('UTC Offset is ' + moment().utcOffset());
});
<script src="https://rawgit.com/moment/moment/2.22.2/min/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="input-group date">
<input type="text" class="form-control" id="js-date">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="row">
<span id="timestamp-local"></span><br/>
<span id="timestamp-utc"></span>
</div>
</div>
Per this documentation call:
getUTCDate()
Also Via Javascript:
var date = new Date(ev.date.getTime() + (60000 * date.getTimezoneOffset()));
Related
I'm using a jquery datepicker link in that i need to subtract 7 days from the current date. I've tried some code but its not working ie, days are not subtracting still showing current date itself. This is the code that i've tried yet. Any help is appreciable.
Demo fiddle
// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');
$startDate.datepicker({autoHide: true,format: 'yyyy-mm-dd'});
$startDate.datepicker("setDate", moment().subtract(7,'d').format('yyyy-mm-dd'));
$endDate.datepicker({
autoHide: true,
startDate: $startDate.datepicker('getDate'),
format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().format('yyyy-mm-dd'));
$startDate.on('change', function () {
$endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
// datepicker
As per the setDate this datePicker documentation - You are not using momentJS format date function correctly. You need to convert a date from YYYY-MM-DD to a date object like for example: Wed Sep 17 2020 00:00:00 GMT+1000 (Australian Eastern Standard Time)
For that you can use toDate() function of momentJS - Your code is working now as expected.
$startDate.datepicker("setDate", moment().subtract(7, 'd').toDate());
Or you can also use native Javascript new Date method like this below:
$startDate.datepicker("setDate", new Date(moment().subtract(7, 'd')));
You can also do this using just native JavaScript date function like this below instead of using moment library
var sub7Days = new Date();
sub7Days.setDate(sub7Days.getDate() - 7);
$startDate.datepicker("setDate", sub7Days);
Live Working Demo:
$(function() {
// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');
$startDate.datepicker({
autoHide: true,
format: 'yyyy-mm-dd'
});
$startDate.datepicker("setDate", moment().subtract(7, 'd').toDate());
$endDate.datepicker({
autoHide: true,
startDate: $startDate.datepicker('getDate'),
format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().toDate());
$startDate.on('change', function() {
$endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
});
<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<div class="col-md-3">
<input type="text" class="form-control start-date" id="datefrom" placeholder="Date From">
</div>
<div class="col-md-3">
<input type="text" class="form-control end-date" id="dateto" placeholder="Date To">
</div>
$(function() {
// datepicker
var $startDate = $('.start-date');
var $endDate = $('.end-date');
$startDate.datepicker({autoHide: true,format: 'yyyy-mm-dd'});
console.log(moment().subtract(7,'days').format('yyyy-mm-D'));
$startDate.datepicker("setDate", moment().subtract(7,'d').format('yyyy-mm-D'));
$endDate.datepicker({
autoHide: true,
startDate: $startDate.datepicker('getDate'),
format: 'yyyy-mm-dd'
});
$endDate.datepicker('setDate', moment().format('yyyy-mm-D'));
$startDate.on('change', function () {
$endDate.datepicker('setStartDate', $startDate.datepicker('getDate'));
});
// datepicker
});
<link rel="stylesheet" href="https://fengyuanchen.github.io/datepicker/css/datepicker.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script src="https://fengyuanchen.github.io/datepicker/js/datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<div class="col-md-3">
<input type="text" class="form-control start-date" id="datefrom" placeholder="Date From">
</div>
<div class="col-md-3">
<input type="text" class="form-control end-date" id="dateto" placeholder="Date To">
</div>
Changed moment().subtract(7,'d').format('yyyy-mm-dd') to moment().subtract(7,'d').format('yyyy-mm-D')
I want to keep the value of a Date to a default value that I specified. If no date is selected when user click submit button.
what I need the functionality to be. If user select a date and submit the form, after submission the form selected date value must be the value on the date field which works perfectly so. I have the problem ie. when date is not selected and user submit form the date field have the today's date by default Select Date
My code is as follows
HTML
<body onload="CovertDateToString()">
<form action="searchDate" method="post" id="searchDate" class="searchDate" modelAttribute="searchDate">
<!-- Select type selectDateRange-->
<div class="form-group ">
<div class="col-md-3 selectContainer">
<div class="input-group">
<input type="text" class="form-control" name="selectDateRange" id="selectDateRange" value="${newDate}">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<!-- Select type search button with input-->
<div class="form-group">
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="submit">
<div class="up" style="margin-top: -8%; color: white;">Search</div></button>
</span>
</div>
<!-- /input-group -->
</div>
</div>
</form>
</body>
Js code
function CovertDateToString() {
var date = <%=request.getParameter("selectDateRange")%>;
var myDate = new Date();
var selectDate = myDate.toDateString();
var selectDate = "Select Date";
document.getElementsByName('selectDateRange')[0].value = selectDate;
selectDate = date;
document.getElementsById('selectDateRange')[0].value = date;
console.log("Set Date to Select Date ",selectDate);
console.log("Set Date to Selected Date ",date);
}
daterangepicker
$(function() {
$('input[name="selectDateRange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
}
});
});
function CovertDateToString() {
var date = "${newDate}";
var myDate = new Date();
var selectDate = myDate.toDateString();
document.getElementsByName('selectDateRange')[0].value = selectDate;
selectDate = date;
document.getElementById('selectDateRange').value = date;
console.log("Set Date to Select Date ",selectedDate);
console.log("Set Date to Selected Date ",date);
}
$(function() {
$('input[name="selectDateRange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
}
});
});
After more hours on this issue I final got it to work. Removing the request.getParamter was the mean reason date got removed after
Please check the following code i have used static values at the place of dynamic values so manage it and code is working fine at snnipet.
function CovertDateToString() {
var date = "${newDate}";
var arr = date.split(" ");
if(arr != "null"){
$("#selectDateRange").data('daterangepicker').setStartDate(arr[0]);
$("#selectDateRange").data('daterangepicker').setEndDate(arr[2]);
}
}
$(function() {
$('input[name="selectDateRange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
}
});
});
<script src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet"/>
<body onload="CovertDateToString()">
<form action="searchDate" method="post" id="searchDate" class="searchDate" modelAttribute="searchDate">
<!-- Select type selectDateRange-->
<div class="form-group ">
<div class="col-md-3 selectContainer">
<div class="input-group">
<input type="text" class="form-control" name="selectDateRange" id="selectDateRange" >
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<!-- Select type search button with input-->
<div class="form-group">
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="submit">
<div class="up" style="margin-top: -8%; color: white;">Search</div></button>
</span>
</div>
<!-- /input-group -->
</div>
</div>
</form>
</body>
I had used the date picker and datetimepicker separately in my form. If I work only on time or date they are working. But when I put both the time is not working. Instead of time it's displaying the date.
My code is as follows :
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width:140px;">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
<br />
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<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>
</div>
</div>
<script type="text/javascript">
$(function () {
var bindDatePicker = function () {
$(".date").datetimepicker({
format: 'YYYY-MM-DD',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
}).find('input:first').on("blur", function () {
// check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
// update the format if it's yyyy-mm-dd
var date = parseDate($(this).val());
if (!isValidDate(date)) {
//create date based on momentjs (we have that)
date = moment().format('YYYY-MM-DD');
}
$(this).val(date);
});
}
var isValidDate = function (value, format) {
format = format || false;
// lets parse the date to the best of our knowledge
if (format) {
value = parseDate(value);
}
var timestamp = Date.parse(value);
return isNaN(timestamp) == false;
}
var parseDate = function (value) {
var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
if (m)
value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);
return value;
}
bindDatePicker();
});
</script>
</div>
</div>
Image reference for problem.
This will Resolve your problem
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
Just copy and paste I think this is what you need :)
I think you get date in both fields ?
You can now just copy and past
Just change the return variable names for Date Picker
From that it will interferer the stored variables of bootstrap time picker
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width:140px;">
<input type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'LT'
});
});
</script>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
<br />
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<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>
</div>
</div>
<script type="text/javascript">
$(function () {
var bindDatePicker = function () {
$(".date").datetimepicker({
format: 'YYYY-MM-DD',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
}).find('input:first').on("blur", function () {
// check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
// update the format if it's yyyy-mm-dd
var date = parseDate($(this).val());
if (!isValidDate(date)) {
//create date based on momentjs (we have that)
date = moment().format('YYYY-MM-DD');
}
$(this).val(dates);
});
}
var isValidDate = function (value, format) {
format = format || false;
// lets parse the date to the best of our knowledge
if (format) {
value = parseDate(value);
}
var timestamp = Date.parse(value);
return isNaN(timestamp) == false;
}
var parseDate = function (value) {
var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
if (m)
values = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);
return values;
}
bindDatePicker();
});
</script>
</div>
</div>
Hi I'm working with bootstrap datetimepicker. I'm trying to show select time view after choose date (click on date). Is there any events to open select time view or something else?
If you are using eonasdan datetimepicker you may use the following events:
dpchange in order to test if the user changed the date
click in order to reset the datetimepicker to the default condition (no time selection)
The snippet:
$('#datetimepicker1').datetimepicker().on('dp.change', function(e) {
var currDate = e.date.format('DD/MM/YYYY');
var oldDate = (e.oldDate == null) ? currDate : e.oldDate.format('DD/MM/YYYY');
var sideBySide = $('#datetimepicker1').data("DateTimePicker").options().sideBySide;
if (currDate != oldDate && sideBySide == false) {
$('#datetimepicker1').data("DateTimePicker").sideBySide(true);
}
}).on('click', 'span.input-group-addon', function(e) {
$('#datetimepicker1').data("DateTimePicker").sideBySide(false);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<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>
</div>
</div>
</div>
</div>
From the below code if i click on check-in date as june 17th 2014 and calendar will directly popup the check-out calendar as may 18th 2014 but i need that calendar popup to show june 17th 2014. Can anyone help me and below is my code.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="js/bootstrap-datepicker.js" type="text/javascript"></script>
<script>
$(document).ready(function(e) {
var nowTemp = new Date();
var now = (nowTemp.getMonth()+1)+'-'+ nowTemp.getDate()+'-'+ nowTemp.getFullYear();
$('#sandbox-container .input-append.date').datepicker({
orientation: "auto",
autoclose: true,
todayHighlight: true,
startDate:now
}).on('changeDate', function(ev) {
$('#sandbox-container1 span').trigger('click');
$('.input-append.date.span12').css({display:'block'}).show();
});
var nowTemp1 = new Date();
var now1 = (nowTemp1.getMonth()+1)+'-'+ (nowTemp1.getDate()+1)+'-'+ nowTemp1.getFullYear();
$('#sandbox-container1 .input-append.date').datepicker({
orientation: "auto",
autoclose: true,
startDate:now1
});
});
</script>
<div id="sandbox-container" class="book_arriv_input f-left">
<div data-date-format="mm-dd-yyyy" data-date="12-12-2013" id="dp1" class="input-append date" >
<input type="text" id="check_in" name="checkin_date_avail" class="span6"/>
<span>
<div class="add-on calender" style="margin-left: -5px;">
<i class="icon-th"></i>
</div>
</span>
</div>
</div>
<div id="sandbox-container1" class="book_arriv_input f-left">
<div data-date-format="mm-dd-yyyy" data-date="12-13-2013" id="dp2" class="input-append date">
<input type="text" id="check_out" name="checkout_date_avail" class="span6"><span class="add-on calender" style="margin-left: -5px;"><i class="icon-th"></i></span>
</div>
</div>
the second date is disabled on the 17th because now1 starts from one day after.
you can use now instead of now1.
Edit:
you can set the date on the checkout picker based on the checkin picker like this:
picker1 = $('#sandbox-container1 .input-append.date').datepicker()
picker1.data('datepicker').setDate(pickedDate);
fiddle: http://jsfiddle.net/tp2MP/