I'm using AngularJS and I want to divide a datetime-picker in two parts. By default, where you open the calender, you have to choose the day and then the time (hours and minutes). I want to make two datetime-picker, one for the day and one for the hours/minutes. I tried to change this, in the first form:
datetime-picker="dd/MM/yyyy HH:mm"
into
datetime-picker="HH:mm"
but it doesn't work.
The problem is that if you click on the first calendar to open the first datetime, it makes you choose the date before the time. Instead, I would like to choose only hours and minutes.
This is the plunker:
https://plnkr.co/edit/BLPsNszpUWjXuHXaj7hO?p=preview
You are using the datetimepicker component from this repo: https://github.com/Gillardo/bootstrap-ui-datetime-picker. It is mentioned in the documentation that you can use the following attributes:
enableDate - Whether you would like the user to be able to select a date. Defaults to true.
enableTime - Whether you would like the user to be able to select a time. Defaults to true.
So if you want to hide date picker part in the component, add enable-date="false" to your input field. Like this:
<input type="text" class="form-control" datetime-picker="HH:mm" enable-date="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>
Similarly, to hide the timepicker part in the component, add enable-time="false" to your input field. Like this:
<input type="text" class="form-control" datetime-picker="dd/MM/yyyy" enable-time="false" ng-model="ctrl.date.value" is-open="ctrl.date.showFlag"/>
Here is the update plunker: https://plnkr.co/edit/luMPl8aOFkzBuW4BeNkx?p=preview. Hope this helps.
Related
i am using boostrap timepicker : https://bootstrap-vue.org/docs/components/form-timepicker#form-timepicker
I entered this code:
<b-form-timepicker
v-model="timeSlot.timeStart"
minutes-step="15"
#input="getCurrentTime(timeSlot)"
></b-form-timepicker>
I can't find a method that can make me change the time via the pc keyboard
You could use button-only mode and add an input where you type time :
<b-input-group class="mb-3">
<b-form-input
id="example-input"
v-model="timeSlot.timeStart"
type="text"
placeholder="HH:mm:ss"
></b-form-input>
<b-input-group-append>
<b-form-timepicker
v-model="timeSlot.timeStart"
button-only
right
show-seconds
locale="en"
aria-controls="example-input"
></b-form-timepicker>
</b-input-group-append">
</b-input-group>
The documentation says the following:
always returns a string in the format of 'HH:mm:ss' which is the same format returned by native browser controls. The value will be in the range of '00:00:00' up to '23:59:59' (24-hour clock using the 'h23' hour cycle syntax). If no time is selected, then returns an empty string ('').
https://bootstrap-vue.org/docs/components/form-timepicker#form-timepicker
So you need to implement something which only edits the value in timeslot.timeStart by keyboard. For an easy example you could add another simple input-field and also give it timeslot.timeStart as v-model.
<input type="text" v-model="timeslot.timeStart" />
You should see your b-form-timepicker change if you change the value in the input-field and other way round. After you have understood this, it should be easy to implement some base event-handlers, which changes your timeSlot.timeStart while having your b-form-timepicker in focus, based on your keyboard input.
You can find an example for that in the documentation:
https://bootstrap-vue.org/docs/components/form-timepicker#button-only-mode
I use the jquery datepicker in an Angular Application and I noticed a behavior that I would like to prevent.
The application consists of an input field for the date and a select box for a month selection.
If the months in the select box are changed, the minDate of the jquery date picker should be adjusted.
I tried the following example:
I set the date in the input field to the 24.04.2018
I chose October
The date of the input field is automatically set to 24.10.2018
I do not want the content of the Inputs field to be automatically adjusted.
Here is my git-hub project: https://github.com/annalen/jquery-datepicker
Many thanks for the help
Solution
I use the beforeShow and onClose date-picker functions
jQuery(yourElement).datepicker('option', 'beforeShow', function (date) {
return {
'minDate': yourMinDate,
'maxDate': yourMaxDate
};
});
jQuery(yourElement).datepicker('option', 'onClose', function (date) {
jQuery(this).datepicker('option', {
'minDate': null,
'maxDate': null
});
});
The datepicker updates the date only if the selected one is out of the range.
For example, if the current selected date is 24.04.2018 and you set the minDate to 20.04.2018, nothing will happen.
But if you set it to any date after 24.04.2018, it will get updated. I believe it's normal since its the purpose of setting a minDate.
You can always set yourself manually the input's value: $('#datepicker').val('20.04.2018') but I don't think it's a good idea to have something displayed different than the internal datepicker component state (the calendar that will popup will show a different date than the one in the input)
Regards,
Vincent
Using Jquery Timepicker . Is it possible to do so, that when I select a date, then time is automatically set to 23.59, but if I change the time manually then it keeps the time value?
I dont want the datetime showing until i select a date or time. But currently all the solutions that I have found are about setting a default value that you can see when the element is loaded.
<input size="15" class="timePicker" name="name" id="id" style="width: 100%" />
jQuery('.timePicker').datetimepicker({
dateFormat: 'dd.mm.yy'
});
SOLUTION
Apparently it turns out, that in the timepicker sourcecode options hour and minute are ignored and not used. Solution for that would be to open up the timepicker.js, find the _newInst function and then either change the corresponding lines, or you could just override the prototype method with a method that has the required fixes.
So simple just change the default timepicker values before calling the time picker as below :
$.timepicker._defaults.hour = 23;
$.timepicker._defaults.minute = 59;
var jq = jQuery('.timePicker').datetimepicker({
dateFormat: 'dd.mm.yy'
});
see this working Fiddle .
I had a html5 input field of type="datetime" which shows a date picker.Now on click of any date in the date picker,I want to call a function.
If Iam using ng-click ,it is getting called once i click in textfield.Even ng-change is not working.But I want to call the function after selecting the date in datepicker..Which event can be used to achieve this.Can someone help.
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-date="{{today}}" min-view="date" maxlength="10" format="dd/MM/yyyy"
ng-model="$ctrl.DateInput" required="true" ng-change="$ctrl.checkdate()">
js
$scope.today= new Date().toISOString().split('T')[0];
this.checkdate=function(){
alert("hi");
Notification.error('Please select proper date');
};
You could watch the variable and than take action on change:
$scope.$watch("DateInput", function(newValue, oldValue) {
//..do something
});
First, you should use the datetime-local input type, this is supported by AngularJS, not datetime.
Second, the problem comes from the input\[datetime-local\] API of AngularJS. The ngModel value must be a valid Date object, this is what prevents the ng-change directive from firing.
You could set the DateInput property to a new date using this.DateInput = new Date(), however the value displayed will be a complete date string (hours, seconds, ms).
You may try finding a workaroung by applying a kind of filter on ngModel, but it's not natively permitted by Angular and will not be easy.
If you're stuck, you can use the great Angular-UI for Bootstrap library and its datepicker directive.
I need to populate date and time dynamically to JQuery DataBox input field. I teried to do but it is populating the current date in the input fields irrespective of the data I pass.
Here is the date picker which I am cloning to dynamically have in my interface.
Html:-
<input class="time-input day-time-picker day-time-picker-inline-input" type="text" data-role="datebox" data-options='{"mode":"datebox", "useFocus": true}' style="width:8em" />
Javascript:-
var datePicker = $("#date-time-picker-template-container .date-time-picker-template").clone();
Similar way I created a time picker and cloned as did above,
Html :-
var timePicker = $("#time-picker-template-container .time-picker-template").clone();
Javascript :-
<input class="time-input day-time-picker day-time-picker-inline-input" type="text" data-role="datebox" data-options='{"mode":"timebox", "useFocus": true}' />
Inserting Date
$(".time-input", datePicker).datebox();
$(".time-input", datePicker).datebox("refresh");
$(".time-input", datePicker).datebox('setTheDate', dynamicDate);
Inserting Time
$(".time-input", dayTimePicker).datebox();
$(".time-input", dayTimePicker).datebox("refresh");
$(".time-input", dayTimePicker).val('datebox', {'method':'set', 'value':dynamicTime});
I want to set date and time to these DateBox input fields dynamically based on the response I get.
Is there any control to get date and time in a single control using DateBox ?
Thanks.
Clone your templates, add them to a container DOM element and then tell the element to enhanceWithin(). This creates the databox widgets, then set the date and time using the setTheDate method:
$("#btnAdd").on("click", function(){
var dynamicDate = new Date(2014,3,22,10,11,0,0);
var datePicker = $("#templates .date-time-picker-template").clone();
var dayTimePicker = $("#templates .time-picker-template").clone();
$("#time-picker-block").append(datePicker).append(dayTimePicker).enhanceWithin();
$(".date-input", datePicker).datebox('setTheDate', dynamicDate);
$(".time-input", dayTimePicker).datebox('setTheDate', dynamicDate);
});
DEMO
I'm not sure I follow what it is you are trying to accomplish, but yes, there is a mode that allows both date and time operation at the same time - slidebox.
You will need to set (at least) the following options:
{
mode = "slidebox",
overrideSlideFieldOrder = ["y","m","d","h","i"],
overrideDateFormat = "%Y-%m-%d %k:%M
}
For what it's worth, flipbox could probably be altered to work with both, but it's non-trivial. datebox can likely already work (I've never tried), but you'll need to pretty heavily alter the CSS - at least making the control a good deal wider first.