I am trying to implement a multidate input with Tempus Dominus. I set the picker to display a month or so in advance. I have useCurrent set to false.
When I select a date from the picker a month or so in advance the current date is inserted also and the picker pane jumps back to current dates month pane.
I am wondering if there is a work around or do I have to modify the code.
Please see the jsfiddle
$(function() {
var minDate = moment().add(2, 'months').startOf('month');
$('#datetimepicker1').datetimepicker({
allowMultidate: true,
useCurrent: false,
viewDate: minDate,
format: 'DD/MM/YYYY',
multidateSeparator: ','
});
});
Tempus Dominus Incorrectly Inserted Date
JSFiddle Tempus Dominus
Related
In my chart I'm displaying revenue data on a date axis by day. I would like to show the date in the tooltip formatted by locale setting, i.e.
* en-us: 2019-03-19
* de DE: 19.03.2019
I created a codepen inspired by the amcharts example here: https://codepen.io/Me12345678/pen/vPorre
When I specify a locale, the tooltip is still showing the en-US format:
chart.language.locale = am4lang_de_DE;
I can format the date in the tooltip text, but then the format is static and won't change with the locale:
series.tooltipText = `{dateX.formatDate("dd MMM yyyy")}: [b]{valueY}[/]`;
Is there any way to specify an abstract format like "date without time" or "date with time" or "month only", so that amcharts displays it according to the locale setting?
Thanks for reading :-)
try this formatDate(\"dd.MM.YYYY\")
series.tooltipText = "[bold]{date.formatDate(\"dd.MM.YYYY\")}[/] \n + [bold]{valueY}[/]";
I'm using the date picker to allow a user to select start and end dates.
When the page first loads, both date pickers will display the current month the first time the calendar is opened.
However, I want the start datepicker to open up a view from one year in the past.
I've looked through the api (options and methods) and haven't found anything to specify a month.
Has anybody tried this?
I don't quite get what view means. Just shooting in the dark - if you want to limit the start to 1 year in the past or on certain month in the past, there is a configuration option min.
From the Kendo examples:
<input id="datepicker" />
<script>
$("#datepicker").kendoDatePicker({
min: new Date(2011, 0, 1) // sets min date to Jan 1st, 2011
});
</script>
Update:
var datepicker = $("#datepicker").data("kendoDatePicker");
var d = new Date ();
$("#datepicker").kendoDatePicker({
value: new Date (d.setFullYear(d.getFullYear() - 1))
});
So this should open the "view" at this day 1 year ago. Live at the Dojo
There is a property called dateView that can have the value set.
Dojo Demo
var datepicker = $("#datepicker").data("kendoDatePicker");
datepicker.bind('open', function() {
if (this.value() !== this.dateView.value()) {
this.dateView.value(null);
}
});
datepicker.dateView.value(dt);
This will update the value in the popup calendar without updating the value of the widget itself.
Edit: This actually causes a bug where clicking the selected dateView value doesn't update the actual picker value. I've added a handler for the open event to take care of the mismatch and clear the selected dateView value.
I have one kind of scenario using date picker. I have date picker with max date=current date + 10 days,on page load only i want to show date more than the max date,but I'm allowing user to enter only up to max date. Is it possible. Without looking maxing date i want to display only the date what ever i want.code:-
var datepicker = $("#date" + uid).data("kendoDatePicker");
var addDays = new Date();
if (arr[1] == "") {
var d = new Date();
datepicker.min(new Date());
datepicker.max(new Date(d.getDate() , d.getMonth(), d.getDate()+ parseInt(arr[1]) - parseInt(1)));
}
I don't know if this is achievable. But what if you try to add two date pickers instead? One that display only the text, and the other only the calendar button. You need to play a bit the CSS, but I think it could spare you a lot of time.
I want highlight the week on mouse hover in kendo datepicker and on select of any date in that week i want to get week start date and end date. I am not getting any idea how to do it.
Can anyone one help me Pl.
Thanks in advance
After having done just done this myself, I'll leave traces here for future readers.
The first thing to do is to have the selection look like it's picking a week instead of a day. To achieve that, use a bit of CSS :
.k-calendar table.k-content tr:hover td { background-color: #E3F2FD; }
.k-calendar table.k-content tr td.k-state-selected,
.k-calendar table.k-content tr td.k-state-selected ~ td { background-color: #2196F3; }
This will light up all the week when the mouse hovers a row, yet still display the selected day AND any following day that week in a different color. The trick to make this work is to make sure the selected day is actually always the first day of the week.
To do so (and to extract the week start and week end dates), use the change event :
onChange: function (e, callback) {
// Set the culture, since the first day of a week might be different
moment.locale(GetCulture());
// Get the selected date and calculate the start and end of week
var weekStart = moment(e.sender.value()).startOf('week').toDate();
var weekEnd = moment(weekStart).add(6, 'day').toDate();
// Always reset the date to the start of the week (the style needs it)
e.sender.value(weekStart);
// Do whatever else you want here
}
This solution requires the use of moment.js, a library that was already in use in my project. There are potentially other ways to do the same, but this one is simple enough.
All that's left should be minor details, like changing the text of the "Current Day" footer to read "Current Week", which is trivial to do via the open event :
widget.one("open", function (e) {
$('.k-footer a.k-nav-today', e.sender.dateView.popup.element).text("Current Week");
});
I would like to have a time-only field on my CRM form. As it is apparently not possible, I plan to use a DateTime field and hide the date part (circled in red on the following image).
How can I hide the date part on a DateTime field using Javascript ?
Found it:
// Set the date in order to be able to modify the time
document.getElementById("field_name").DataValue = new Date(2000, 1, 1);
// Hide the date part
document.getElementById("field_name").childNodes[0].childNodes[0].style.display =
"none";
document.getElementById("field_name").childNodes[0].childNodes[1].style.display =
"none";