We Keep Coding

Need only 00:00:00 time format in HTML

I am developing webpage in which i have used text field and set it's type as time. But it is giving me 00:00 AM/PM format.
I want 00:00:00 as time format.

use jquery timepicker
$(function(){
$('#example').timepicker();
});
check this link

Just add the step attribute to the element. Note: You might want to implement your own time type if you need cross-browser support. input<type=time> does not work in Safari.
<input type="time" step="1">
In case you need own implementation, here it is. Requires no third part library. To access the value just get the value of the timepicker div
using document.getElementById("timepicker").getAttribute("data-value");
function updateTime()
{
function getFormattedValue(value)
{
return value>9?value:"0"+value;
}
var hour = document.getElementById("hour").value,
minute = document.getElementById("minute").value || 0,
second = document.getElementById("second").value || 0;
var time = getFormattedValue(hour)+":"+getFormattedValue(minute)+":"+getFormattedValue(second);
var timeelem = document.getElementById("timepicker");
timeelem.setAttribute("data-value", time);
console.log(time);
console.log(timeelem.getAttribute("data-value"));
}
<div id="timepicker" data-value="">
<input id="hour" type="number" max="23" min="0" onchange="updateTime()">
<input id="minute" type="number" max="59" min="0" onchange="updateTime()">
<input id="second" type="number" max="59" min="0" onchange="updateTime()">
</div>

Disable minutes selection in Bootstrap Datetimepicker

I wan't datetimepicker to show only rounded hours and disable minutes selection. So user will be able to pick only hours, like 02:00. However I can't achieve this simple task. Here is my code (in a Laravel view):
$("#date_from").datetimepicker({
format: 'yyyy-mm-dd hh:00',
startDate: "{{date('Y-m-d')}}",
minuteStepping: 60,
autoclose: true }).on('hide', function(e) {
$("#date_to").datetimepicker(
"setStartDate", new Date($('#date_from').val())
)....
I've tried steps: 60, stepping:60, minView: 1 and others.
Still I'm getting this

Here is one example for you, i think it will help you.
jsfiddle.net/tmk0293z/7/
There is changedate event bind with a function and changes the another startdate of other field.
Thanks,
Nishit Zinzuvadiya
Here is the actual code
(HTML):
<div class="input-append date form_datetime" id="first">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime" id="second">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span id="selected"></span>
JS:
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
minView:1,
autoclose:true
});
$("#first").datetimepicker().on("changeDate", function(e){
var first = new Date(e.date.setMinutes(0));
first.setHours(first.getHours()+first.getTimezoneOffset()/60); //timezone correction
$("#second").datetimepicker('setStartDate', first);
//other = $("#first").find("input").val();
//$("#second").datetimepicker('setStartDate', other); //works also
});

see the option viewMode and format
https://eonasdan.github.io/bootstrap-datetimepicker/Options/

try using step: 60 not steps
please check this link also :click here

How to call a function on click of date in html 5 datepicker input type

I had a html5 date-time picker.Now on mouseclick(select) of date from date picker I want to call a function.I wonder how can we do that in angular js ...can
someone help me.
html:
<div class="col-lg-4">
<input class="form-control" type="datetime" date-time auto-close="true" view="date"
min-view="date" format="dd/MM/yyyy" ng-model="$root.Details.date" value = "{{dob}}">
</div>
Js
class CreateCustomerCtrl {
constructor($scope,$rootScope,$http,$state,$reactive,$timeout,Notification)
{
//logic here
}
export default angular.module('createCustomer', [
angularMeteor
])
.component('newCustomer', {
templateUrl: 'client/customer/new-customer.html',
controller:['$scope','$rootScope','$http','$state','$reactive','$timeout','Notification'
,customerCtrl]});
So on select of date I want to call a function.
Thanks

You could use ng-change="yourFunc()" event on input with ng-model="myDate" for binding value and inside function you can put your logic.

You should try <input type="date" onchange="return function(this) />;" and return your function to do whatever you want to.

AngularJs DatePicker - calendar dropdown doesn't react to model change

I'm using AngularJs datepicker and being stuck at this problem for a while now.
In my app, users can use the datepicker's calendar to select date, or they can click "This Month" to automatically set the date to this month.
Clicking on This Month button will activate a model change in the controller, just like this:
if (when == 'this_month') {
$scope.date_from = Date.today().moveToFirstDayOfMonth().toString('dd-MM-yyyy');
$scope.date_to = Date.today().moveToLastDayOfMonth().toString('dd-MM-yyyy');
}
The HTML
<input name="date_from" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
It works just fine for everything: the date gets changed, the text input shows this month's date, etc.
However, the only thing wrong is the calendar itself not being up-to-date with the date change (i.e. still showing the view of whatever the month it was selected before that)
For example, in this screenshot, when clicking on "Last Month", the calendar still shows This Month view.
How should I tap into the DatePicker's calendar then?

HTML
<input name="date_from" ng-change = getDateFrom(date_from) placeholder="Choose Date" class="input-small filter-element datepicker-dmy" data-date-format="dd-mm-yyyy" type="text" ng-model="date_from">
<input name="date_to" placeholder="Choose Date" class="input-small filter-element datepicker-dmy" ng-change=getDateTo(date_to) data-date-format="dd-mm-yyyy" type="text" ng-model="date_to">
Angular JS
$scope.getDateTo = function (date_to) {
$scope.dateTo = date_to;
console.log(date_to);
}
$scope.getDatefrom = function (date_from) {
$scope.dateFrom = date_from;
console.log(date_from);
}
Other way
$scope.$watch('date_form', function (date_form) {
$scope.dateForm = date_form;
});
$scope.$watch('date_to', function (date_to) {
$scope.dateTo = date_to;
});

Why document ready does not work for kendo controls

Please try the following code for example:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<script type="text/javascript">
function DateOfBirth_Change() {
var input = document.getElementById("DateOfBirth").value;
document.getElementById("spanDateOfBirth").innerHTML = input;
}
$(document).ready(function () {
DateOfBirth_Change();
});
</script>
<input data-val="true" data-val-date="The field Date of Birth: must be a date." data-val-required="*" id="DateOfBirth" name="DateOfBirth" type="date" value="24/10/1984" />
<script>
jQuery(function(){jQuery("#DateOfBirth").kendoDatePicker({"change":DateOfBirth_Change,"format":"dd/MM/yyyy","parseFormats":["dd/MM/yyyy"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>
<span id="spanDateOfBirth" style="padding-left: 25px;"></span>
It does not work on page load if the document ready function is defined above kendo control...But if it's below, it works fine... Why is this so?

I can see that you have set value of <input type=date.. as "24/10/1984" and which is in wrong format according to HTML5 input date type. Refer - http://www.w3schools.com/html/html5_form_input_types.asp, http://www.w3.org/TR/html5/single-page.html#dates-and-times
When in document.ready, you have invoked document.getElementById("DateOfBirth").value, it gave you blank, as input type="date" has a value in incorrect format and when that typecasted to date it got blank. See the attached example.
Definitely both way ( if you put document.ready first or last )it will work. You need to use following html markup for this.
<input data-val="true" data-val-date="The field Date of Birth: must be a date." data-val-required="*" id="DateOfBirth" name="DateOfBirth" type="date" value="1984-10-24" />
Why it worked when you put document.ready last - because, kendodatepicker made proper initialization and set correct date, and when doc.ready fired , it is able to get value and set.
Note:- document.ready() and (jQuery(){}) are same as document.ready and they execute serially, that is why it worked when you put document.ready at last code block. - jQuery - multiple $(document).ready ...?
To make sure you understand , why it does not work, i am giving following example.
function getincdate() {
alert($("#incorrect_dt").val());
}
function getcdate() {
alert($("#correct_dt").val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Incorrect date -
<input type="date" id="incorrect_dt" value="24/10/1984" />
<input type="button" value="Get inccorect date" onclick="getincdate()" />
<br />
you can see above, value is not set here, but with .kendodatepicker, it worked, but after you do .kendo...
<br/>
Correct date-
<input type="date" id="correct_dt" value="1984-10-24" />
<input type="button" value="Get correct date" onclick="getcdate()" />