I am trying to initialize a Kendo "datepicker" with the following options:
$("#elementid").kendoDatePicker({
//...
depth: "year"
});
When I change month in the widget I would like to set in my view model the last day of the selected month (not, as by default, the first one).
For instance: by selecting "January" the datepicker is set on "01/01/2013", but I would like it to return "31/01/2013" (the last day).
Does somebody know how can i do it?
Define you kendoDatePicker as:
$("#elementid").kendoDatePicker({
...
depth : "year",
change: function (e) {
var val = this.value();
this.value(new Date(val.setMonth(val.getMonth() + 1, 0)));
}
});
We handle the change event and use JavaScript for calculating the last day of the chosen date.
Related
I want to implement a Date Range picker with DataGrid Pro can anyone help me?
To implement a date range picker on a cell in the data grid (assuming this is what you are meaning), you would implement the below code:
const datePickerColumn: GridColDef[] = [
{
field: 'dates',
headerName: 'Pick Date Range',
editable: true /* this needs to be set to allow editing */
type: 'date' /* needs to be set to get the date picker drop down*/
},
];
<DataGrid
rows={dateData}
columns={myDateColumns}
isCellEditable={(params) => params.row.dates} /* makes the specified column editable */
/>
Once implemented, you should now be able to double click on a cell and get a date picker widget.
For more information you can refer to the documentation here: https://mui.com/components/data-grid/editing/
What do you mean by Date Range picker?
Do you want to have a column containing a date range? If yes, it is better to have two columns. One for start-date the other for end-date
If you want to filter one date column by providing a range, you will have to make a custom filter operator handling multiple value
In line charts, I want to show month names on xAxis and every month shows its data by date.
I've tried multi xAxis and it's not working well, or maybe use formatter?
Did you try the axisLable formatter? You can call a function there to do the formatting.
xAxis: {
axisLabel: {
formatter: (function(value){
return moment(value).format('MMM-YY');
})
}
}
Hope this will help.
I've been using this DateTime picker on a section of my website, I have a schedule per week which has a start and end time depending on the day of the week and I wanted to disable the time that was out of the schedule range and that includes minutes, what was my surprise? I couldn't find any documentation about disabling minutes. I decided to change the DateTime plugin for another one but I would have to change all the code that I already have. so I came back to [eonasdan-datetimepicker] Is there any way to get this done? I'm able of disabling hours successfully but I'm talking about minutes.
You could use the option disabledTimeIntervals but this only work for specific dates (moments), then you must specify the interval for each available day. I did something like this:
var addingColacionInterval = function (disabledTimeIntervals, currDate) {
var intervalsPerDay = {
1: { //1-7 where 1 is Monday and 7 is Sunday
startHour:15,
startMinute: 40,
durationInMinutes: 30
},
2: {
startHour:8,
startMinute: 20,
durationInMinutes: 50
}
// etc
}
var intervalForWeekDay = intervalPerDay[currDate.isoWeekday()]; //.isoWeekday(); // returns 1-7 where 1 is Monday and 7 is Sunday
var initialTime = currDate.clone().set({ hour: intervalForWeekDay.startHour, minute: intervalForWeekDay.startMinute });
disabledTimeIntervals.push([initialTime, initialTime.clone().add(parseInt(intervalForWeekDay.durationInMinutes), 'minutes')]);
}
var minDate = moment("the min selectable date");
var maxDate = moment("the max allowed date");
//for disable colación minutes intervals we can't use disableHours because don't work with minutes disabledTimeIntervals doesn't work for all days (like, but you have to loop trought
var disabledTimeIntervals = [];
var currDate = minDate.clone().startOf('day');
var lastDate = maxDate.clone().endOf('day');
do {
addingColacionInterval(disabledTimeIntervals, currDate);
} while (currDate.add(1, 'days').diff(lastDate) < 0);
var disabledHours = [0, 1, 2, 3, 4, 5, 6, 7, 23];
$scope.disableDays = [];
if ($scope.import.disableSunday) {
$scope.disableDays = [0];
}
//
$scope.dateSecOptions = {
minDate: minDate.format('YYYY-MM-DD'),
maxDate: maxDate.format('YYYY-MM-DD'),
disabledHours: disabledHours,
disabledTimeIntervals: disabledTimeIntervals,
stepping: 10,
};
in contrast with disabledTimeIntervals also exist the option disabledHours which allow you to disable hours for all available (selectable) days in the calendar widget.
what exactly do you want? like for example just allowing users to select specific times like just half hour [30] or whole hour? [00] because if that is the case, you can use the stepping function, what it does is that when users select the up or down arrow, the minutes advance as much as you choose, for example 30 minutes:
$(document).ready(function () {
$('#datetimepicker4').datetimepicker({
stepping:30
});
});
Requirements - End date must be equal and greater then start selected start date in boostrap datepicker and before selected start date disable.
Problem - its possible in jquery date but I want to know how to make in boostrap date.
my boostrap code is
$('#start_date').datepicker({autoclose: true,startDate: new Date()});
$('#end_date').datepicker({autoclose: true,startDate: new Date()});
for reference check jquery code
Fiddle
Note - I want exact implemention of this picker in bootstrap
Can anyone help me?
Please check out this JSFiddle demo. I have placed the code below that uses bootstrap datepicker.
$(".from_date").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
}).on('changeDate', function (selected) {
var startDate = new Date(selected.date.valueOf());
$('.to_date').datepicker('setStartDate', startDate);
}).on('clearDate', function (selected) {
$('.to_date').datepicker('setStartDate', null);
});
$(".to_date").datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
}).on('changeDate', function (selected) {
var endDate = new Date(selected.date.valueOf());
$('.from_date').datepicker('setEndDate', endDate);
}).on('clearDate', function (selected) {
$('.from_date').datepicker('setEndDate', null);
});
I'm really just looking to assign additional information to dates. I am currently setting up datepicker with the following:
beforeShowDay: function(date){
dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear();
if ($.inArray(dmy, ajaxDates) != -1) {
return [true, "","Available"];
} else {
return [false,"","unAvailable"];
}
},
Where ajaxDates is an array containing a list of available dates such as:
var ajaxDates = [ "26-2-2015", "27-2-2015"];
It's for a booking system were I have another array containing the number of seats available for every date. I had seen a post that I can no longer find were someone was attaching additional information to the dates. If someone could point me in the right direction that would be great!
Edit: I have noticed that the a title is attached to each date which on hover shows the tooltip as "Available" or "Unavailable". Is there any easy method to access through the datepicker?
The solution that I was referring to was:
Add custom parameter to jQuery UI Datepicker
An example of how to set additional parameters is as followed:
var input = $("#datepicker");
var result = $("#result");
var courses = {
"02-09-2013" : "history",
"10-09-2013": "physics"
};
input.datepicker({
dateFormat: 'dd-mm-yy',
showWeek: true,
firstDay: 1,
numberOfMonths: 3,
onSelect: function(dateText, pickerObj){
result.attr("data-course-id", courses[dateText]);
course.innerHTML = courses[dateText];
},
altField: "#result"
});
http://jsfiddle.net/Seandeburca/qbLwD/