I'm wondering which library is doing this correctly. I think it is Luxon because it outputs what I want, but now I am not sure which is correct. Basically March 17 will be in DST. I establish a time in UTC, I change the timezone to PST, then I convert back. Luxon produces 8am UTC which is 9am with DST, but Dayjs produces 7am UTC which is 8am with DST.
const dj1 = dayjs("2022-03-17T16:00:00Z");
const djtz1 = dj1.tz("America/Los_Angeles");
const lux1 = DateTime.fromJSDate(d).setZone("America/Los_Angeles");
console.log(djtz1.utc().format());
console.log(lux1.setZone("utc").toISO());
The output of the above code is
DayJS
2022-03-17T15:00:00Z
Luxon
2022-03-17T16:00:00.000Z
https://codesandbox.io/s/luxon-playground-forked-k6rfcl?file=/src/index.js
Are you sure that you correctly configured timezone support in Day.js? They produce the same results:
<script src="https://unpkg.com/dayjs#1.11.0/plugin/utc.js"></script>
<script src="https://unpkg.com/dayjs#1.11.0/plugin/timezone.js"></script>
<script src="https://unpkg.com/dayjs#1.11.0/dayjs.min.js"></script>
<script type="module">
import {DateTime} from 'https://unpkg.com/luxon#2.3.1/src/luxon.js';
const {dayjs} = window;
dayjs.extend(window.dayjs_plugin_utc);
dayjs.extend(window.dayjs_plugin_timezone);
const isoString = '2022-03-17T16:00:00Z';
const dj1 = dayjs(isoString);
const djtz1 = dj1.tz('America/Los_Angeles');
const lux1 = DateTime.fromISO(isoString).setZone('America/Los_Angeles');
console.log({dayjs: djtz1.utc().format()});
console.log({luxon: lux1.setZone('utc').toISO()});
</script>
Related
I need to disable the first and third Wednesday in each month. The code I am using is below.This was working but when I added the new dates for 2021 it stopped working. Please help. Thanks
<script>
var dates = ["6-3-2019","20-3-2019","3-4-2019","17-4-2019","1-5-2019","15-5-2019","5-6-2019","19-6-2019","3-7-2019","17-7-2019","7-8-2019","21-8-2019","4-9-2019","18-9-2019","2-10-2019","16-10-2019","6-11-2019","20-11-2019","4-12-2019","18-12-2019","1-1-2020","15-1-2020","5-2-2020","19-2-2020","4-3-2020","18-3-2020","1-4-2020","15-4-2020","6-5-2020","20-5-2020","3-6-2020","17-6-2020","1-7-2020","15-7-2020","5-8-2020","19-8-2020","2-9-2020","16-9-2020","7-10-2020","21-10-2020","4-11-2020","18-11-2020","2-12-2020","16-12-2020","06-01-2021","20-01-2021","03-02-2021","17-02-2021","03-03-2021","17-03-2021","07-04-2021","21-04-2021","05-05-2021","19-05-2021","02-06-2021","16-06-2021","07-07-2021","21-07-2021","04-08-2021","18-08-2021","01-09-2021","15-09-2021","06-10-2021","20-10-2021","03-11-2021","17-11-2021","01-12-2021","15-12-2021"];
function DisableDates(date) {
var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
return [dates.indexOf(string) == -1];
}
$(function() {
$("#datepicker2").datepicker({
beforeShowDay: DisableDates,
minDate: +1
});
});
</script>
I am using Bootstrap 3 DateTimePicker and I am trying to disable some specific hours in some specific dates. For example, I want to disable 08:00 hour option in 06/27/2018 and 17:00 hour option in 06/30/2018.
I tried to use "disabledHours" option. But this option disables the given hour in all days.
So how can I achieve this?
Here are my codes.
$(".datepicker").datetimepicker({
format: 'MM/DD hh:ii',
datesDisabled: ['2016/08/20'],
autoclose: true,
});
There are no in-built functions to disable specific hours in a specific date. But the case can be achieved by using the onRenderHour method. Store the hours to be disabled in specific dates in the array disabledtimes_mapping. Those will be disabled automatically while rendering the picker.
P.S: This date-picker is deprecated. The same is forked and maintained by AuspeXeu in GitHub.
var disabledtimes_mapping = ["06/27/2018:8", "06/30/2018:17", "06/30/2018:15"];
function formatDate(datestr)
{
var date = new Date(datestr);
var day = date.getDate(); day = day>9?day:"0"+day;
var month = date.getMonth()+1; month = month>9?month:"0"+month;
return month+"/"+day+"/"+date.getFullYear();
}
$(".datepicker").datetimepicker({
format: 'MM/DD hh:ii',
datesDisabled: ['2018-06-20'],
autoclose: true,
onRenderHour:function(date){
if(disabledtimes_mapping.indexOf(formatDate(date)+":"+date.getUTCHours())>-1)
{
return ['disabled'];
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<input class="datepicker" type="text">
I came across an error which seems to be a bug in OpenUI5.. but as I am not 100% sure of that I wanted to check if I am missing something.
I'm using a javascript object as the data source of a JSONModel. This object has a "birthday" attribute in a string format yyyymmdd. I already attached the JSONModel to the core object so it can be used in all controls on my app.
obj = { birthday: "19890727" }; // July 27, 1989
var model = new sap.ui.model.json.JSONModel();
model.setData(obj);
sap.ui.getCore().setModel(model);
Then I trying to use data binding so I can display the birthday on a TextView. As I don't want to display this date on the same format from the model, I'm using a type object to format it.
var type_date = new sap.ui.model.type.Date({source: {}});
text_view_birthday.bindProperty("text",{
path: "/birthday",
type: type_date
});
The following Date object also works great:
var type_date = new sap.ui.model.type.Date({
source: {
pattern: "yyyymmdd"
},
pattern: "dd - mm - yy"
});
I was playing around with class sap.ui.model.type.Date and when I try to use it passing the style property with any of its possible values (short/medium/long/full), the displayed date is actually different from the model. Instead of July, UI5 is displaying January!
var type_date =
new sap.ui.model.type.Date({
source: {
pattern: "yyyymmdd"
},
style: "short"
});
// Short: 1/27/89
// Medium: Jan 27, 1989
// Long: January 27, 1989
// Full: Friday, January 27, 1989
I tried to debug sap-ui-core-dbg.. it's beyond me... I had no success
IMO there are two possible situations
I'm using Date class incorrectly (and I created this snippet based on UI5 Developer Guide the documentation of as Model Type classes is quite poor).
It's a bug!
See the full source below.
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons">
</script>
<meta charset="utf-8">
<title>JS Bin</title>
<script>
obj = {
birthday: "19890727"
};
var model = new sap.ui.model.json.JSONModel();
model.setData(obj);
sap.ui.getCore().setModel(model);
// var type_date = new sap.ui.model.type.Date({source: {}}); // Correct: Result is Jul 27, 1989 (in my locale)
// var type_date = new sap.ui.model.type.Date({
// source: {
// pattern: "yyyymmdd"
// },
// pattern: "dd - mm - yy"
// }); // Correct: Result is 27 - 07 - 89 (ignore my locale)
var type_date =
new sap.ui.model.type.Date({
source: {
pattern: "yyyymmdd"
},
style: "full"
});
// Incorrect!
// Short: 1/27/89
// Medium: Jan 27, 1989
// Long: January 27, 1989
// Full: Friday, January 27, 1989
var text_view_birthday = new sap.ui.commons.TextView();
text_view_birthday.bindProperty("text", {
path: "/birthday",
type: type_date
});
text_view_birthday.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Thanks!
I'm not familiar with all the details, but the pattern should be in LDML format. The pattern for month would be M or MM, the lower case m represents minutes. To debug this you can just set a break point in formatValue of sap.ui.model.type.Date.
I'm using two DateTimePickers http://tarruda.github.io/bootstrap-datetimepicker/ in my code: one for choosing a date (pickTime disabled) and the other for the time (pickDate disabled).
I've managed to set a startDate for the date, but how can I set a startTime and an endTime, in such a way that the any time before that startTime is disabled?
<script type="text/javascript">
$(function() {
$('#datetimepicker4').datetimepicker({
pickTime: false,
startDate: new Date(2013,9,8)
});
});
</script>
<script type="text/javascript">
$(function() {
$('#datetimepicker3').datetimepicker({
pickDate: false,
startTime: ???
});
});
</script>
This question is OLD but thought it might help some one.
JS
$('.time').datetimepicker({
format: 'LT'
}).on("dp.change",function(e){
var date = e.date;//e.date is a moment object
var target = $(e.target).attr('name');
console.log(date.format("HH:mm:ss"))//get time by using format
})
e.date is a moment object thus time can derived by using format("HH:mm:ss")
I have a date picker using jquery. However I want to add the 'bounce' animation to it. Please help me adding this animation to the date picker. My code as of now is:
$(function() {
$("#datepicker").datepicker({ dateFormat: "DD, d MM, yy" });
});
Is this what you are trying to accomplish?
$(function() {
$("#datepicker").datepicker({ showAnim: "bounce", dateFormat: "DD, d MM, yy" });
});
http://jsfiddle.net/damyanpetev/VS2hV/
Additionally you can set duration and additional options that correspond to the effect you are using (in this case 'bounce' .