I need to add the keyBinds for delete and enter button properties conditionally.
I tried using the Object.assign() method, but not sure how to get hold of datetimepicker object associated with my input control, and how do I enable or disable keyBinds conditionally.
var $inputCtrl = $('.inputCtrl');
$inputCtrl.datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true
});
Object.assign($inputCtrl.data("DateTimePicker"), bConditionalDeleteTest && {keyBinds: {'delete': null}});
if we initialize this object statically, it would be
$('.inputCtrl').datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true,
keyBinds: {'delete': null} /*this would disable the default Delete key behavior of the control.*/
});
You can simply use keyBinds function.
keyBinds()
Returns a string variable with the currently set options.keyBinds option.
keyBinds(object)
Takes an object value.
Allows for several keyBinding functions to be specified for ease of access or accessibility. See the options page for defaults.
You can have something like:
var $inputCtrl = $('.inputCtrl');
$inputCtrl.datetimepicker({
locale: 'en-US',
format: 'DD-MM-YYYY',
useCurrent: false,
keepInvalid: true
});
if( bConditionalDeleteTest ){
$inputCtrl.data("DateTimePicker").keyBinds({'delete': null});
}
Related
I use KeyboardTimePicker material ui, and fetch time of service like "10:20"
How can I set this time ("10:20") as default?
Currently, when I set this time, I get the Invalid Time Format
:
const timeDefaultProps = {
label: props.label,
variant: "inline",
inputVariant: "outlined",
ampm: false,
showTodayButton: true,
format: "HH:mm",
value: props.value , ///->props.value is "10:20"
onChange: (date) => props.onChange(moment(date).format("HH:mm")),
onBlur: (event) => {
setBlured(false);
},
onFocus: () => {
setBlured(true);
},
keyboardIcon: (
<TimeIcon
className={clsx(
classes.calendarIcon,
classes.calendarIconKeyboardPicker
)}
/>
),
};
<KeyboardTimePicker {...timeDefaultProps} />
The documentation (assuming this is the correct link: https://material-ui-pickers.dev/api/KeyboardTimePicker#:~:text=value%20*-,ParsableDate,-Picker%20value) seems to suggest that it requires a ParsableDate. I'd guess a date object will do the trick.
In the examples there also appears to be a placeholder prop, although I couldn't see that in the documentation linked above. This could potentially also be what you're looking for (if you only want to use it as the starting value before a user has chosen anything).
If there is a way with gijgo/datepicker to show and select only year/month?
I found option format: 'mmmm-yyyy', like
$('#expire_date').datepicker({
uiLibrary: 'bootstrap4',
iconsLibrary: 'fontawesome',
showOtherMonths: true,
selectOtherMonths: true,
format: 'mmmm-yyyy',
footer: true,
modal: true, // if to set this parameter to false I have the same problem
change: function (e) {
alert('Change is fired : '+e.target.value);
}
});
But it works only partly I need : result is year-month, but day selection is possible...
If, yes, please example...
Thanks!
Flexible Event Calendar In jQuery - evo-calendar - How to set default selected date instead of current date.
$('#demoEvoCalendar').evoCalendar({
todayHighlight:false,
selectDate:"09/10/2020",
format: "mm/dd/yyyy",
titleFormat: "MM",
sidebarToggler: true,
sidebarDisplayDefault: false,
eventListToggler: false,
eventDisplayDefault: false,
calendarEvents: [ ]
});
use selectDate inside $(document).ready
$(document).ready(function() {
$('#demoEvoCalendar').evoCalendar({
todayHighlight:false,
...
});
$("#evoCalendar").evoCalendar('selectDate', "February/15/2020"); //replace date here
})
Am having issue where if someone enters an invalid date manually such as "%/4/12" into the datepicker it will autoformat it to "04/12/2017" or if you enter "12/123/20258" it formats to ‘12/12/2025 which I don't want. Is there any way to disable this? Here is what I already have:
$(function () {
$('#new-effective-date').datetimepicker({
format: 'MM/DD/YYYY',
defaultDate: false,
useCurrent: false,
keepInvalid: true
});
});
Add:
useStrict
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#usestrict
and Change your codes to this:
$(function () {
$('#new-effective-date').datetimepicker({
format: 'MM/DD/YYYY',
useStrict: true,
keepInvalid: true,
});
});
In my App,we are rendering DatePicker(calender) with the following code.It's coming perfectly.
$('#date2').DatePicker({
flat: true,
date: [],
current: '2008-07-31',
format: 'Y-m-d',
calendars: 1,
mode: 'multiple',
starts: 0
});
After I render,it's coming like this.Still Html guy not yet implemented CSS.From the calendar user can select multiple dates.
we are using Backbone and Marionette in Application.What I want If user select any date from calender, needs to fire an event inside the callback function wants to console selected dates().For This I tried with following code but it's not working.
events:{
"select #date2":"consoleDates"
},
consoleDates:function(event){
console.log($(event.target).val());
}
Also I tried with change event,This is also not firing.
How can I fix this.
Use onselect. Try this:
$('.selector').datepicker({
onSelect: function(date) {
alert(date);
}
});
Update: Looking at the doc, the property for this is onChange:
onChange: function(formated, dates){
console.log(dates);
}
Ok, if you really want to use this plugin, it won't fire any DOM events. Because this plugin is little dated, I think the concept of CustomEvents haven't been introduced yet. Anyway, you would have to actually bind a custom event in the instantiation of the code. So it should look like so:
$('#date2').DatePicker({
flat: true,
date: [],
current: '2008-07-31',
format: 'Y-m-d',
calendars: 1,
mode: 'multiple',
starts: 0,
onChange: function(formatted, dates){
$('#date2').trigger('datePick', arguments);
}
});
Then in Backbone it should look like so:
events:{
"datePick #date2":"consoleDates"
},
consoleDates:function(event, formatted, dates){
console.log(formatted.join(', '));
}