I want to modify the jqueryui date picker to work and look like the one in this photo. How to do it?
The JqueryUI Date Picker documentation mentions a setting called yearRange that can be used to do this.
The value is supposed to be the min and max year allowed.
So, for your usecase, only allow current year in the range.
$( ".my-date-selector" ).datepicker({
yearRange: "2021:2021"
});
or a future proof answer will be
let year = new Date().getFullYear();
$( ".my-date-selector" ).datepicker({
yearRange: `${year}:${year}`
});
Related
I have facetwp installed in wordpress and after the search was made, the search widget doesn't show the correct date as per selected before search
how to override this display issue (selected date) by javascript?
To view this problem in action : https://www.sweetpictures.com.my/product-category/photographers/?fwp_photo=2018-01-31%2C2018-01-31%2C1&fwp_productcategory=ampang&fwp_expertise=wedding-reception
Supposed the calendar picker selected date was 31st jan 2018
but instead it shows Aug 20th 2018
Kind help and assistance appreciated
Use the documentation of Flatpickr to set the default date to the one you want : https://chmln.github.io/flatpickr/examples/#supplying-dates-for-flatpickr
That way you can add the following parameters to you flatpickr instance :
//example with jQuery
$('#your-date-element').flatpickr({
minDate: 'today',
dateFormat: 'd/m/Y'
})
If this is not working, try setting the input to the good date with the onReady function in the flatpickr instance :
//example with jQuery
$('#your-date-element').flatpickr({
minDate: 'today',
dateFormat: 'd/m/Y',
onReady: function (selectedDates, dateStr, instance) {
$('#your-date-element input').val(
instance.formatDate(new Date(), 'd/m/Y')
)
},
})
I'm using a date field in which I want to limit the date selection to a maximum of 90 days from the current date. How can i achieve this?
I tried dateField.setMaxvalue(maxDate), but I'm not able to limit the selection
I don't think the GWT datepicker has support for this.
You could use a library like GWT-Bootstrap3 which does have all this (https://gwtbootstrap3.github.io/gwtbootstrap3-demo/#dateTimePicker).
Or you could listen for events and rollback changes made by the user if selection was outside the valid range, and display a message to the user.
I second to the suggestion given by #Knarf. You could use GWT DatePicker class and listen for a ValueChangeEvent and in ValueChangeHandler, you could put your logic to check if the selected date is within your range - if not, you could show a message on your UI for the User to reselect a date within the date range (as per your requirement).
DatePicker datePicker = new DatePicker();
final Label text = new Label();
// Listen for a ValueChangeEvent and implement a ValueChangeHandler on your datePicker element
datePicker.addValueChangeHandler(new ValueChangeHandler<Date>() {
public void onValueChange(ValueChangeEvent<Date> valueChangeEvent) {
Date inputDate = valueChangeEvent.getValue();
// Put your logic to test whether the selected date is within your range
String dateString = DateTimeFormat.getMediumDateFormat().format(inputDate);
text.setText(dateString);
}
});
Hope that this helps!
You can add a ShowRangeHandler to your datePicker. This is an example to restrict the datePicker to dates in the past only, you can adapt it to limit to 90 days:
datePicker.addShowRangeHandler(new ShowRangeHandler<Date>() {
#Override
public void onShowRange(ShowRangeEvent<Date> event) {
Date today = new Date();
Date date = new Date(event.getStart().getTime());
while (date.before(event.getEnd())) {
if (date.after(today) && datePicker.isDateVisible(date)) {
datePicker.setTransientEnabledOnDates(false, date);
}
CalendarUtil.addDaysToDate(date, 1);
}
}
});
The above mentioned solutions worked exactly the way i expected..Thank you.I used the bootstrap datepicker in the link (https://gwtbootstrap3.github.io/gwtbootstrap3-demo/#dateTimePicker).
Is it possible to change the format on the onMouseOver event in Dygraph?
Currently the format is:
YYYY/MM/DD HH:MM:SS
I would like it to display as
MM/DD/YYYY HH:MM:SS
Is it possible to change the current format?
Thanks for your assistance.
Jay
You want to set the valueFormatter option on the x-axis: http://dygraphs.com/options.html#valueFormatter
For example,
new Dygraph(div, data, {
axes: {
x: {
valueFormatter: function(ms) {
return new Date(ms).strftime("%m/%d/%y %H:%M:%S");
}
}
}
});
Live example here: http://jsfiddle.net/eM2Mg/772/
It's worth noting that Date.strftime() is not a standard JavaScript method: it's provided by strftime.js, which is included in the standard dygraphs bundle.
I need to make Data Validation on a range of cells. I want a dropdown list, where the only option is the current date. To get the current date, I can use =TODAY(). The problem is, that the dates don't remain static. When the sheet recalculates, so will all the dates. I need the dates to remain the same.
How can I work around this?
I found a blog where the answer might be, but I can't see how the author has made his spreadsheet.
I will have a dropdown item which says "dags dato". Next i use an eventlistener that checks if the text in a cell is changed to "dags dato".
if so, it puts the current date in the cell, like this:
function onEdit(event)
{
var ss = event.source.getActiveSheet();
var r = event.source.getActiveRange();
var currentValue = r.getValue();
if(currentValue == "dags dato")
{
var dd = Utilities.formatDate(new Date(), "GMT", "yyyy-MM-dd");
r.setValue(dd);
}
}
My page uses a JQuery UI Datepicker and loads with the current day selected and weekends and selected dates restricted.
I would like the current selected day to become unavailable at 2pm and the day move forward.
Can anyone help.
I would just use a variable for the the minDate
var dt = new Date();
if (dt.getHours() > 14) {
dt = dt.setDate(dt + 1); // go one day in the future
}
$(selector).datepicker({minDate: dt});
You'd just need to use the real javascript Date class methods - which I haven't used in a little while.