I am doing in accordance with this question and I need to format my resulting time string. I use bootstrap datetimepicker and moment.js and I have this code:
$("#datetimepicker2").on("dp.change", function (e) {
console.log('date2: ' + e.date.format('MM.DD.YYYY HH:mm:ss') );
end_date = e.date;
end_date.toJSON = function(){ return moment(this).format(); };
});
console.log(JSON.stringify(end_date));
My problem is that I receive
"2017-06-20T17:29:05+03:00"
while I need something like this:
"2017-06-20T17:29:05.013Z"
Any ideas how to get it would be welcome. Thank you.
You can convert the moment object to js date and use toISOString() on that.
moment().toDate().toISOString();
You can add .tz() before .format() and pass in the timezone inside .tz("America/New_York"), etc.
$(function() {
$("#datetimepicker2").datepicker();
$("#datetimepicker2").on("change", function(e) {
console.log(moment().utc($(this).val()).format());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.13/moment-timezone-with-data.js"></script>
Date: <input type="text" id="datetimepicker2" />
Related
I dont wanna manual convertion, i have the jquery datepicker v.1.12.1
if i select the date from datepicker it will automatically convert timestamp format.
i want a date format in timestamp like 28/09/2019 3:40 GMT-0400 this format to 1569668513 this format.
Can you please help me?
var dateString = '#referdate',
dateTimeParts = dateString.split(' '),
timeParts = dateTimeParts[1].split(':'),
dateParts = dateTimeParts[0].split('/'),
date;
date = new Date(dateParts[2], parseInt(dateParts[1], 10) - 1, dateParts[0], timeParts[0], timeParts[1]);
console.log(date.getTime()); //1379426880000
console.log(date); //28-09-2019 3:40 GMT-0400
You can try this.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<script>
function getTimeAndDate(){
let today = new Date();
let date = today.getDate()+'/' + (today.getMonth()+1) + '/'+today.getFullYear();
let h = today.getHours();
let m =today.getMinutes();
console.log(h+':'+m);
console.log(date);
}
</script>
<body>
<input type="button" onclick="getTimeAndDate()" value="Button">
</body>
</html>
Are you looking for the dateFormat option?
From the docs:
$( ".selector" ).datepicker({
dateFormat: "yy-mm-dd"
});
$( "#datepicker" ).datepicker({
dateFormat: "#"
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"
integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk="
crossorigin="anonymous"></script>
<input id="datepicker">
If you just want to log the timestamp of the chosen date, you can get the javascript date object directly from the picker on change.
// however you initialize the datepicker does not matter
$("#datepicker").datepicker();
// when a date is picked the change event is fired
$("#datepicker").change(function() {
// get the date object
let theDate = $("#datepicker").datepicker("getDate");
console.log(theDate.getTime())
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js" integrity="sha256-0YPKAwZP7Mp3ALMRVB2i8GXeEndvCq3eSl/WsAl1Ryk=" crossorigin="anonymous"></script>
<input id="datepicker">
I'm using momentjs with Eonasdan plugin and I'm trying to check if the end date is less than the start date, for doing this I'm using the method isAfter:
var start = moment($('#start-datetime').val());
var end = moment($('#end-datetime').val());
console.log((start).isAfter(end));
this will return even false, the values are so defined:
start: 07/02/2019 19:58
end: 31/01/2019 19:58
Try passing a specific format string and locale to moment to make sure the string is parsed correctly:
moment(..., "DD/MM/YYYY HH:mm", "en");
or
moment.locale("en");
...
moment(..., "DD/MM/YYYY HH:mm");
Demonstration:
moment.locale("en");
$("#test-button").click(function() {
var start = moment($('#start-datetime').val(), "DD/MM/YYYY HH:mm");
var end = moment($('#end-datetime').val(), "DD/MM/YYYY HH:mm");
console.log((start).isAfter(end));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<input id="start-datetime" type="text" value="07/02/2019 19:58">
<input id="end-datetime" type="text" value="31/01/2019 19:58">
<button id="test-button">Test</button>
First I have one field with daterangepicker.
I get value using $("#field").val().
I got like
{"start":"2018-03-23","end":"2018-03-29"}
But, I need start date and end date value from
{"start":"2018-03-23","end":"2018-03-29"}
My code is
<input id="field" type="text" value='' /><br/>
$(function() {
'use strict';
$("#field").daterangepicker({
dateFormat:'dd M',
datepickerOptions : {
numberOfMonths : 2
}
});
var curnt = moment().startOf('day').toDate();
var weeks = moment().subtract('days', 6).startOf('day').toDate();
$("#field").daterangepicker("setRange", {start: weeks, end: curnt});
});
function get_graph_data(){
var dates = JSON.parse($("#field").val());
console.log(dates.start);
console.log(dates.end);
var data = {
'action' : 'example_ajax_request',
'wp_graph': $("#field").val()
};
jQuery.post(ajax_url, data, function(response) {
alert('Got this from the server: ' + response);
});
}
What you get from the $("#field").val() is a JSON. You can easily do something like:
var dates = JSON.parse($("#field").val());
dates.start; // "2018-03-23"
dates.end; // "2018-03-29"
A snippet to help you:
$(function () {
var dates = JSON.parse($("#field").val());
console.log(dates.start); // "2018-03-23"
console.log(dates.end); // "2018-03-29"
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="field" type="hidden" value='{"start":"2018-03-23","end":"2018-03-29"}' />
You are using daterangepicker plugin so you should use it's methods instead of jQuery's val(). Select an input field and call data('daterangepicker'). Returned object contains startDate and endDate objects. Keep in mind that they are Date objects (not Strings), so you will need to format if you want to print them.
$('#field').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
},
startDate: '2018-01-01',
endDate: '2018-12-31'
});
$("#getDateRange").click(function() {
var data = $("#field").data('daterangepicker');
var startDate = data.startDate.format('YYYY-MM-DD');
var endDate = data.endDate.format('YYYY-MM-DD');
alert('Start date: ' + startDate + ', end date: ' + endDate);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<input id="field" type="text" value='' />
<button type="button" id="getDateRange">Get start date</button>
It's always a good habit to check out official documentation of a plugin. You can check it out here.
What would be an alternative of postgresql date_trunc() function in javascript?
If I typed in pgsql the following:
select date_trunc('month', now())
I'd get '2015-08-01 00:00:00-07'
How to achieve the same with a javascript function?
function dateTruncate(interval, date) {
return ???;
}
Using MomentJS
$("#result").text(moment().format("YYYY-MM-DD 00:00:00Z"));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<div id="result"></div>
ended up using moment:
function dateTruncate(interval, date) {
return moment(date).startOf(interval).toDate();
}
I have tried to implement the date picker in android. I want it to get the data and show it in the text format
<html>
<head>
<script type="text/javascript" charset="utf-8" src="cordova-2.5.0.js"></script>
<script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script>
<script type="text/javascript" charset="utf-8">
function dateTest() {
var myNewDate = new Date();
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date', // date or time or blank for both
allowOldDates : true
}, function(returnDate) {
var newDate = new Date(returnDate);
currentField.val(newDate.toString("dd/MMM/yyyy"));
// This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
currentField.blur();
});
}
</script>
</head>
<body bgcolor="#ffffff">
<hr>DatePicker Test<hr><br>
<input type="button" onClick ="dateTest()" value ="Today's Date!!" />
<div id="view"></div>
</body>
</html>
I am getting it as an alert...but unable to store it as a string on the same page
Why loose ur head?
A <input type="date"> will allways deppend on device's interpretation of it, in some android devices it doesn't even work,
There is plenty of plugins, addons, whatever, for it,
I personally like, and use mobiscroll: Link
Edit: Mobiscroll is now paid but there are loads of free frontend mobile frameworks and probably all of them have a datepicker, such as jQuery Mobile-datepicker.
It seems that your currentField is undefined. Did you check the chrome console before running it on AVD ? Pls try to post the element in which you are trying to display the date as well.
For now, I am assuming that you are trying to do what the following code does
$('.nativedatepicker').focus(function(event) {
var currentField = $(this);
var myNewDate = new Date(Date.parse(currentField.val())) || new Date();
// Same handling for iPhone and Android
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date', // date or time or blank for both
allowOldDates : true
}, function(returnDate) {
var newDate = new Date(returnDate);
var newString = newDate.toString();
newString = newString.substring(0,15);
currentField.val(newString);
// This fixes the problem you mention at the bottom of this script with it not working a second/third time around, because it is in focus.
currentField.blur();
});
});
The element is as follows
<input type="text" class="nativedatepicker" readonly value = "Fri Jun 21 2013"/>
Works like a charm !! Hope it helps !!
What I want to happen is simple - I just want a datepicker to display when I click a certain field.
However, the same as Aleks, I don't know what to put in my html, how to use it in html, and what should I put in the html to invoke the datepicker on some input.
The documentation from the plugin is incomplete.
I found a solution from this test project.
Steps are as follows:
Pre-requisite: phonegap/cordova-cli installed
Install Cordova's device plugin: $ cordova plugin add org.apache.cordova.device
Install Dirk's datepicker plugin: $ cordova plugin add https://github.com/DURK/cordova-datepicker-plugin
Copy the nativedatepicker.js from the test project and place it on your project's js folder. This file has showDatePicker(), showDateTimePicker() convenience functions.
Add the ff. to index.html code:
Note: The datepicker won't show when you test it in your browser
....
<div class="form-group">
<label>Appointment</label>
<input type="text" class="form-control datepicker" id="appointment">
</div>
....
<script src="js/nativedatepicker.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript">
(function($){
$(document).ready(function () {
$(document).on('click', '.datepicker', function () {
showDatePicker($(this), 'date');
});
$(document).on('click', '.timepicker', function () {
showDatePicker($(this), 'time');
});
$(document).on('click', '.datetimepicker', function () {
if (device.platform === "Android")
showDateTimePicker($(this));
else
showDatePicker($(this), 'datetime');
});
});
})(jQuery);
</script>
This is my working implementation. Input type is text, readonly.
$('.nativedatepicker').focus(function(event) {
var currentField = $(this);
var myNewDate = new Date();
window.plugins.datePicker.show({
date : myNewDate,
mode : 'date',
allowOldDates : true
}, function(returnDate) {
var array = returnDate.split("/");
var day = array[2], month = array[1];
if (day <= 9)
day = "0" + day;
if (month <= 9)
month = "0" + month;
currentField.val(array[0] + "/" + month + "/" + day);
currentField.blur();
});
});
Why would you want to implement a custom date picker if there is an ative one available ?
You can simply use <input type="date"> to create the commonly known iOS date picker.
For more infos on input fields on mobile devices I suggest: http://blog.teamtreehouse.com/using-html5-input-types-to-enhance-the-mobile-browsing-experience