When selecting a date from Materialize datepicker, a user sometimes may not select a day for many unknown reasons, but the "OK" button remains active, promoting them to click and of course no date value is selected.
So far, after they click "ok", I can be able to check that the date value is empty prompting them to select a day.
However, my question is about deactivating the "OK" button all together so that they have to select a day to make it active. May be there is Materialize option which I've not found from the guide
Code:
var currYear = (new Date()).getFullYear();
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: new Date(currYear-5,1,31),
// setDefaultDate: new Date(2000,01,31),
maxDate: new Date(currYear-5,12,31),
yearRange: [1928, currYear-5],
format: "yyyy/mm/dd"
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="container">
<br><br><br><br><br><br><br>
<div class="col s12 m10 offset-m1 l6 offset-l3">
<div class="row">
<form action="" class="col s12 m8 offset-m2 l6 offset-l3">
<div class="row">
<div class="input-field">
<input type=text name="bdate" id="bdate" class="datepicker" required>
<label for="bdate">Birthday</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input name="email" id="email" type="text" class="validate">
<label for="email">Email</label>
</div>
</div>
</form>
</div>
</div>
You can implement onOpen and onSelect method of datepicker. There no such feature inbuilt in materialise css I guess so Try below updated code..
var currYear = (new Date()).getFullYear();
$(document).ready(function() {
$(".datepicker").datepicker({
defaultDate: new Date(currYear-5,1,31),
// setDefaultDate: new Date(2000,01,31),
maxDate: new Date(currYear-5,12,31),
yearRange: [1928, currYear-5],
format: "yyyy/mm/dd",
onOpen:function(){
$('.datepicker-done').prop("disabled", true);
},
onSelect:function(){
$('.datepicker-done').prop("disabled", false);
}
});
});
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
<div class="container">
<br><br><br><br><br><br><br>
<div class="col s12 m10 offset-m1 l6 offset-l3">
<div class="row">
<form action="" class="col s12 m8 offset-m2 l6 offset-l3">
<div class="row">
<div class="input-field">
<input type=text name="bdate" id="bdate" class="datepicker" required>
<label for="bdate">Birthday</label>
</div>
</div>
<div class="row">
<div class="input-field">
<input name="email" id="email" type="text" class="validate">
<label for="email">Email</label>
</div>
</div>
</form>
</div>
</div>
Related
I have a form with 5 fields connected to a Google Spreadsheet. When my user input data in the first 2 fields the 3 other fields update according to the data of the Spreadsheet.
My script is working perfectly with one criteria but I need second criteria in order to update the 3 other fields.
My HTML :
<!DOCTYPE HTML>
<HTML>
<head>
<base target="_top">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<?!=include("page-css"); ?>
</head>
<body>
<div class="container">
<div class="row">
<div class="input-field col s12">
<input id="ds" type="text" class="validate">
<label for="ds">Contract Number</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="pn" type="text" class="validate">
<label for="pn">Number</label>
</div>
</div>
<h5> RESULTS </h5>
<div class="row">
<div class="input-field col s12">
<input disabled id="est" type="text" class="validate">
<label for="est" class="active">Validity date from</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled id="est1" type="text" class="validate">
<label for="est1" class="active">Expiry Date</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input disabled id="est2" type="text" class="validate">
<label for="est2" class="active">Type</label>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<?!=include("page-js"); ?>
</body>
</html>
My script have to do : Search value of "est", "est1", "est2" for "ds" AND "pn"
The script is :
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('select');
var instances = M.FormSelect.init(elems);
});
document.getElementById("ds").addEventListener("input",getEstimate)
function getEstimate(){
var contractNumber = document.getElementById("ds").value;
if(contractNumber.length === 8){
google.script.run.withSuccessHandler(upadteEstimate).getDateStart(contractNumber);
google.script.run.withSuccessHandler(upadteEstimate1).getDateExpiry(contractNumber);
google.script.run.withSuccessHandler(upadteEstimate2).getInsurancePlan(contractNumber);
}
}
function upadteEstimate(DateStart){
document.getElementById("est").value = DateStart;
M.updateTextFields();
}
function upadteEstimate1(DateExpiry){
document.getElementById("est1").value = DateExpiry;
M.updateTextFields();
}
function upadteEstimate2(InsurancePlan){
document.getElementById("est2").value = InsurancePlan;
M.updateTextFields();
}
</script>
I have tried a lot of things without success. If someone could give me some tips or advise, It will help a lot...
Thank you
J
In this image you can see date is showing
but in 2nd image(Date picker) it shows the today date not the selected date.
my code is below
< input name="period" id="period" type="text" value="{{$item->period}}" class="validate date-picker" >
JavaScript code is:
$('.datepicker').datepicker({
format: 'yyyy-mm-dd'
});
Thanks in advance
faisal
use setDate( date ):
It set the date for the datepicker.
eg:
$( ".datepicker" ).datepicker( "setDate", "yourdate" );
You are setting the input value format of date wrong that why it is not working
For example, you are setting the value of input field "10-29-2012" and you have specified the format "yyyy-mm-dd" your both format should be same the below is the working sample
The documentation link can be also helpful for you of date picker
Date picker set date `
$(document).ready(function() {
$('#js-date').datepicker({
format: 'yyyy-mm-dd'
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-sm-6">
With data provide attribute
</div>
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="data-date">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="bg-info">
Uses the data-provide attribute in HTML
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6">
With JavaScript
</div>
<div class="col-sm-6">
<div class="input-group date">
<input type="text" class="form-control" id="js-date" value="2018-12-19">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="bg-info">
No data-provide attribute in HTML. Initialized using JavaScript
</p>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<p class="bg-primary" style="margin-top: 10px;">
Plugin Used: https://github.com/uxsolutions/bootstrap-datepicker
</p>
</div>
</div>
</div>
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Solicitud De Vacaciones</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso
form{
font-family: Arial, Helvetica, sans-serif; color: black
}
.bootstrap-iso form button, .bootstrap-iso form button:hover{
color: white !important;
}
.asteriskField{
color: red;
}
</style>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-2 col-xs-12">
<form action="MovimientoBancario" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Desde
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="from" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Hasta
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="date" name="to" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="_honey" style="display:none" type="text"/>
<button class="btn btn-primary " name="submit" type="submit">
Buscar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script>
$(document).ready(function(){
var date_input=$('input[id="date"]');
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
date_input.datepicker({
format: 'yyyy-mm-dd',
container: container,
todayHighlight: true,
autoclose: true,
})
})
</script>
</body>
Here's my code, I've searched all over stackoverflow but none of the solutions I find works for me, I need to do two things.
date two has to be bigger than date one
date one has to give you the option to start from the current date.
I've tried these
Jquery datepicker restrict dates in second date field based on selected date in first date field
https://jqueryui.com/datepicker/#min-max
You can use startDate for restrict to start from current date.
Try below code I hope it will resolve your problem.
<html lang="es">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Solicitud De Vacaciones</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://formden.com/static/cdn/font-awesome/4.4.0/css/font-awesome.min.css" />
<style>
.bootstrap-iso .formden_header h2,
.bootstrap-iso .formden_header p,
.bootstrap-iso form {
font-family: Arial, Helvetica, sans-serif;
color: black
}
.bootstrap-iso form button,
.bootstrap-iso form button:hover {
color: white !important;
}
.asteriskField {
color: red;
}
</style>
</head>
<body>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-2 col-xs-12">
<form action="MovimientoBancario" class="form-horizontal" method="post">
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Desde
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" class="from_date" id="dpd1" name="from" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2 requiredField" for="date">
Hasta
<span class="asteriskField">
*
</span>
</label>
<div class="col-sm-10">
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar">
</i>
</div>
<input class="form-control" id="dpd2" name="to" placeholder="YYYY/MM/DD" type="text" required/>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-10 col-sm-offset-2">
<input name="_honey" style="display:none" type="text" />
<button class="btn btn-primary " name="submit" type="submit">
Buscar
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Include Date Range Picker -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css" />
<script>
$(document).ready(function() {
var date_input = $('input[id="date"]');
var container = $('.bootstrap-iso form').length > 0 ? $('.bootstrap-iso form').parent() : "body";
var currDate = new Date();
var date = new Date();
date.setDate(date.getDate());
$('#dpd1').datepicker({
format: 'yyyy-mm-dd',
startDate: date,
container: container,
todayHighlight: true,
autoclose: true,
})
$('#dpd1').datepicker().on('changeDate', function() {
$('#dpd2').val('')
})
$('#dpd2')
.datepicker()
.on('show', function(ev) {
var toDate = $('#dpd1').datepicker("getDate");
toDate.setDate(toDate.getDate() + 1);
$('#dpd2').datepicker("setStartDate", toDate);
})
.on('changeDate', function(ev) {
var date1 = $('#dpd1').datepicker("getDate").valueOf();
var date11 = $('#dpd1').datepicker("getDate");
date11.setDate(date11.getDate() + 1);
var date2 = ev.date.valueOf();
if (date2 <= date1) {
alert("Second date bigger than first!");
$('#dpd2').datepicker("setDate", date11);
}
});
})
</script>
</body>
DEMO
I noticed you have used same id on both textboxes with different name attributes. It is good practice to use different ids for all controls.
Regardless of that, here's the change you need to make in your jquery
$(document).ready(function() {
var date_input = $('input[name="from"]');
var date1_input = $('input[name="to"]');
var container =
$(".bootstrap-iso form").length > 0
? $(".bootstrap-iso form").parent()
: "body";
date_input
.datepicker({
format: "yyyy-mm-dd",
container: container,
todayHighlight: true,
autoclose: true,
startDate: new Date()
})
.on("changeDate", function(e) {
var desdeDate = e.date;
desdeDate.setDate(desdeDate.getDate() + 1);
date1_input.datepicker({
format: "yyyy-mm-dd",
autoclose: true
});
date1_input.datepicker("setStartDate", desdeDate);
date1_input.focus();
});
});
Note that I used name attributes to select the textboxes and changeDate event is to calculate the new start date value for the second textbox which is then initialized with setStartDate method of the datepicker plugin.
You can find many other options to tweak at their website.
I would like to disable a datepicker when a checkbox is checked. But I can't disable the input-group-addon. Even if the text input is disabled, the user can click on the span and choose a date.
How can I disable it ?
Here's my html code :
<div class="col-md-4">
<div class="control-group">
<div class="input-group date" id="deb">
<div class="input-group-addon">Du</div>
<input id="dateDebut" type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-4">
<div class="control-group">
<div class="input-group date" id="end">
<div class="input-group-addon">Au</div>
<input id="dateFin" type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-3 checkbox">
<label> <input id='toutVisu' type="checkbox">Visu</label>
</div>
And here's my js code :
$('input#toutVisu').on('change', function(){
if($(this).is(':checked')){
$("div.date input").prop("disabled",true)
$("div.date input").val("")
msg = $('#messToutVisu').val()
msgAlert = afficheAlert("danger",msg)
$("div#histoRapport").append(msgAlert)
deleteAlert()
}else{
$("div.date input").prop("disabled",false)
}
})
I tried a lot of things to disable this input but nothing worked. So I let what was already made.
Thank you
$('input#toutVisu').on('change', function(e) {
var isDisabled = $(this).is(':checked');
$("#toDisable").prop("disabled", isDisabled)
if(isDisabled){
$('#end, #deb').datepicker('remove');
}else{
$('#end, #deb').datepicker();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<fieldset id="toDisable">
<div class="col-md-4">
<div class="control-group">
<div class="input-group date" id="deb">
<div class="input-group-addon">Du</div>
<input id="dateDebut" type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-4">
<div class="control-group">
<div class="input-group date" id="end">
<div class="input-group-addon">Au</div>
<input id="dateFin" type="text" class="form-control">
</div>
</div>
</div>
</fieldset>
<div class="col-md-3 checkbox">
<label> <input id='toutVisu' type="checkbox">Visu</label>
</div>
.unbind() to remove a previously-attached event handler from the elements.
$('input#toutVisu').on('change', function(){
if($(this).is(':checked')){
$("div.date input").prop("disabled",true)
$("div.date input").val("")
$(".input-group-addon").unbind('click');
msg = $('#messToutVisu').val()
msgAlert = afficheAlert("danger",msg)
$("div#histoRapport").append(msgAlert)
deleteAlert()
}else{
$("div.date input").prop("disabled",false)
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-4">
<div class="control-group">
<div class="input-group date" id="deb">
<div class="input-group-addon">Du</div>
<input id="dateDebut" type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-4">
<div class="control-group">
<div class="input-group date" id="end">
<div class="input-group-addon">Au</div>
<input id="dateFin" type="text" class="form-control">
</div>
</div>
</div>
<div class="col-md-3 checkbox">
<label> <input id='toutVisu' type="checkbox">Visu</label>
</div>
Attaching the event onchange might not work because change has to happen for onchange to fire.Try attaching an event on mousedown and touchend and call event.preventDefault() + event.stopImmediatePropagation() within them if the check box is checked.
Alternatively you can use the focusin event as well which fires before change
PS
based on what you post, I cannot see those spans, but assuming that they are the previousElementSibling of the input (you can simplify the below more but I write for a quick test for you):
$("div.date input").prev()
.on("touchend",function(e){
if($('input#toutVisu').is(':checked')){
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
}).on("mousedown",function(e){
if($('input#toutVisu').is(':checked')){
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
}).on("click",function(e){
if($('input#toutVisu').is(':checked')){
e.preventDefault();
e.stopImmediatePropagation();
return false;
}
})
Add the above before you add any custom event handlers to these elements. YOu might need to call the above on touchstart but then chrome will complain that the event is passive, so you need to set it up before hand.
It is possible to manage an input with type time to display only hours, not minutes.
<div class="form-group">
<label for="heure_seance" class="col-md-4 control-label">Heure : </label>
<div class="col-md-6">
<input id="heure_seance" type="time" step='60' class="form-control" name="heure_seance" required>
</div>
</div>
I need to use Javascript or it is possible with an HTML attribute?
I need to do this because on my database, time stored are entire hours, we don't store minutes.
Thank's for help!
You can either disable the input or set it as read-only to avoid unexpected entered text from the user.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js" ></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js" type="text/javascript" ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker3').datetimepicker({
format: 'HH'
});
});
</script>
</div>
</div>