I am using v4 from https://github.com/Eonasdan/bootstrap-datetimepicker. Now I am trying to disable the minutes-selector on time-selection. I know I could use:
$(this).datetimepicker({
format: 'HH'
});
But with this code, minutes aren't shown at all. I would like to show minutes in the selector, but disable it. Any chance to achieve that?
I've found a solution. Use this time-format:
format: 'HH:00'
set plugin option 'minView' => 1
I tried using dp.show and dp.change events to handle it.
In the show event minutes element are disabled in order to avoid minutes changing and the hour part is taken and followed by :00.
Code:
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker({
format: 'HH:mm'
}).on('dp.show', function () {
$('a.btn[data-action="incrementMinutes"], a.btn[data-action="decrementMinutes"]').removeAttr('data-action').attr('disabled', true);
$('span.timepicker-minute[data-action="showMinutes"]').removeAttr('data-action').attr('disabled', true).text('00');
}).on('dp.change', function () {
$(this).val($(this).val().split(':')[0]+':00')
$('span.timepicker-minute').text('00')
});
Demo: http://jsfiddle.net/mfjvnh9a/
$(this).datetimepicker({ steps: 60 });
If you do this when you loose focus the plugin adjusts your time to :00 for your minutes (if you happen to type the date).
Related
I'm trying to input a date string formatted mm/dd/yyyy into a Kendo React DatePicker control using nightwatch setValue. It seems that no matter what approach I take to select the control it always sets the cursor on the year portion first and typing then only fills in those four characters.
(For example if I provide '05/06/2016', all I see typed into the input is 'mm/dd/0016' and month and day never update.)
The control seems to work fine in a normal scenario if I click with the mouse on the month field, the cursor will display there and if I type 2 characters, a / 2 more characters another / and then the last 4 the control is working properly. It just seems to be an issue with selenium selecting the control and DatePickers default behavior.
I've tried using browser.Key.LEFT_ARROW to see if I could move the cursor left twice first since the accessibility handling allows for it. I also tried calling clearValue() on the input first then typing from scratch but no success on either case.
I would rather not have select the date using the calendar control if I can avoid it.
Here's what my code looks like currently:
const consumerInfo = {
birthMonth: "05",
birthDay: "06",
birthYear: "2016",
birthDate: "05/06/2016",
};
const datePickerSelector = '.myDatePicker';
const datePickerInputSelector = '.myDatePicker .k-input';
browser.waitForElementVisible(datePickerSelector, DEFAULT_WAIT_TIME)
.waitForElementVisible(datePickerInputSelector, DEFAULT_WAIT_TIME)
.setValue('.myDatePicker .k-input, [
consumerInfo.birthYear,
browser.Keys.LEFT_ARROW,
consumerInfo.birthDay,
browser.Keys.LEFT_ARROW,
consumerInfo.birthMonth,
])
.assert.value(
datePickerInputSelector,
consumerInfo.birthDate,
`Birthdate is set to ${consumerInfo.birthDate}`
);
Any suggestions are appreciated.
While not perfect I came up with a solution so hopefully it helps some others should this come up.
The approach ended up being roughly similar to what I proposed above but allowing more time between each operation. I added it into a util function that accepts the selector to target the input control with along with the month/day/year to fill in the control with. It's possible the time intervals can be reduced in places to less than 500ms but without more exhausted testing that was better than 1000ms (which worked) and 100ms (which inconsistently worked).
See below:
const toDatePickerInsertion = (browser, pickerInputSelector) => ({
month,
day,
year,
}) => {
return browser
.click(pickerInputSelector)
.pause(500)
.keys(browser.Keys.LEFT_ARROW)
.pause(500)
.keys(browser.Keys.LEFT_ARROW)
.pause(500)
.keys(month)
.pause(500)
.keys(browser.Keys.RIGHT_ARROW)
.pause(500)
.keys(day)
.pause(500)
.keys(browser.Keys.RIGHT_ARROW)
.pause(500)
.keys(year);
};
I'm trying to work with http://xdsoft.net/jqplugins/datetimepicker/ .
I have the following code:
var TIMESETTING = {format:'H:i',datepicker:false,scrollMonth: false,scrollInput: false,minTime:'07:00',maxTime:'09:00',formatTime:'H:i'};
$('#date').datetimepicker(TIMESETTING);
But when I run it, ALL the time slots of the text field are greyed out and not clickable.
What am I doing wrong?
var TIMESETTING = {format:'H:i',datepicker:false,scrollMonth:false,scrollInput: false,minTime:'07:00',maxTime:'09:00',formatTime:'H:i'};
$('#date').datetimepicker(TIMESETTING);
In your options object you are setting format as well as formatTime, is this of a specific reason? Does it work if you utilize allowTimes instead?
I'm setting the value of a bootstrap datepicker by making use of the setValue method provided.
For example
tripToDatePicker.setValue(tripFromDatePicker.date);
But for some reason the calendar is not updated
'setValue' is replaced by 'setDate'.
Using a string as input for setDate can be tricky. It has to match with the dateformat, else you can get unexpected results. It is more safe to create a 'new Date(y,m,d)' from your input, e.g. new Date(2015,3,10) for '10 Apr 2015'. This will always work.
When using a date representation in seconds, e.g. 1428659901, then use 'new Date(value*1000)'. Note that datepicker will eat any value here, but only show the selected date in the calendar if hours, minutes and seconds are equal to 0. Took me a while to figure that out....
Edit:
http://www.eyecon.ro/bootstrap-datepicker/ is not much documented, you should try http://eternicode.github.io/bootstrap-datepicker/.
anyway the code below will work for you
$("#dp1").datepicker("update", "02-16-2012");
or
$("#dp1").datepicker("setValue", "02-17-2012");
where "#dpi" is the id of the text field on whcih datepicker is used.
After trying many things, I ended up using "update" method. The $("#dp1").datepicker("update", "02-02-2012") or $("#dp1").datepicker("update", "02/02/2012") works for me. Surprisingly no document about this method at author website. Thanks.
I am using bootstrap-datepicker and getting an issue.
When I click a day, it works well，but when I click the same day again. The selection gets cancelled
The boostrap datepicker demo works well.
I had found the example for bootstrap date picker from the above link.
It's a known issue. Here is a workaround for this issue.
https://github.com/eternicode/bootstrap-datepicker/issues/816
jsfiddle the issue: http://jsfiddle.net/antonkruger/fpgseobz/
Once I've tried it, I'll post an update.
Update:
Yes it works.
In the defaults # line 1394, add a new option, allowDeselection
var defaults = $.fn.datepicker.defaults = {
allowDeselection: false,
...
};
In the _toggle_multidate function # line 1015, modify the "else if (ix !== -1)" statement to:
else if (ix !== -1 && this.o.allowDeselection){
this.dates.remove(ix);
}
I came across this issue myself so if you still need this. trick is to store the current date in a variable each time a new date is created. If the new date is undefined (empty) update date with the temporary variable. I know its a dirty solution, but hey atleast its working.
I wrote a little fiddle enter code herehttp://jsfiddle.net/d86msex1/
Goodluck!
There's now an official way to accomplish this:
$element.datepicker('remove');
source: http://bootstrap-datepicker.readthedocs.org/en/release/methods.html#remove
I'm using the Bootstrap 3 DateTimePicker. When the user tabs into a field using this component, the current date and time is automatically entered. In some cases this is what I want. However, there are other times I want the component to completely ignore the time portion and not entered by default in a field. I can't seem to find a way to do this.
This will only display the date by default, try and see
$('.future');.datetimepicker({
pickTime: false,
format: 'DD/MM/YYYY'
});