Develop Reference

Leave only the choice of time in Datetime-picker in AngularJS

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.

Format returned date in Angular owl-date-time picker

From the below, you can see that I'm using the NEW (1.5.1) owl-date-time picker to return a selected value to the input box. All is well, except that it's returned as M/d/yyyy and I would like it shown to the user as yyyy-MM-dd.
The [attr.value] does it correctly but doesn't alter what is shown on screen (which I'm guessing is overridden by the [(ngModel)] and I can't add the date pipe in to that line without generating an error - Any ideas?
<input
id="tx_date"
type="text"
class="mt-25"
[(ngModel)]="tx_date"
[owlDateTime]="txDate"
[owlDateTimeTrigger]="txDate"
[max]="maxDate"
[placeholder]="'yyyy-mm-dd'"
[attr.value]="tx_date | date: 'yyyy-MM-dd'"
[attr.disabled]="isSelected.date ? null : 'disabled'">
<owl-date-time
pickerType="calendar"
#txDate>
</owl-date-time>

Defaultvalue on date select jquery datetimepicker

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 .

How to call a function on selection of date in html5 and bootstrap picker

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.

Is there anyway to disable the client-side validation for dojo date text box?

In my example below I'm using a dijit.form.DateTextBox:
<input type="text" name="startDate" dojoType="dijit.form.DateTextBox" constraints="{datePattern:'MM/dd/yyyy'}" value='<c:out value="${sessionScope.adminMessageForm.startDate}"/>' />
So for example, if the user starts to enter "asdf" into the date the field turns yellow and a popup error message appears saying The value entered is not valid.. Even if I remove the constraints="{datePattern:'MM/dd/yyyy'}" it still validates.
Without going into details as to why, I would like to be able keep the dojoType and still prevent validation in particular circumstances.

Try overriding the validate method in your markup.
This will work (just tested):
<input type="text" name="startDate" dojoType="dijit.form.DateTextBox"
constraints="{datePattern:'MM/dd/yyyy'}"
value='<c:out value="${sessionScope.adminMessageForm.startDate}"/>'
validate='return true;'
/>

My only suggestion is to programmatically remove the dojoType on the server-side or client-side. It is not possible to keep the dojoType and not have it validate. Unless you create your own type that has you logic in it.

I had a similar problem, where the ValidationTextBox met all my needs but it was necessary to disable the validation routines until after the user had first pressed Submit.
My solution was to clone this into a ValidationConditionalTextBox with a couple new methods:
enableValidator:function() {
this.validatorOn = true;
},
disableValidator: function() {
this.validatorOn = false;
},
Then -- in the validator:function() I added a single check:
if (this.validatorOn)
{ ... }
Fairly straightforward, my default value for validatorOn is false (this appears right at the top of the javascript). When my form submits, simply call enableValidator(). You can view the full JavaScript here:
http://lilawnsprinklers.com/js/dijit/form/ValidationTextBox.js