I have a problem by getting the selected value from the embedded/inline bootstrap datetimepicker.
Here's my code:
<div class="col-lg-8 datepicker_area" style="background: red;">
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div>
<input type="hidden" name="date" id="my_hidden_input" value="">
</div>
</div>
</div>
<script type="text/javascript">
$("#datetimepicker").on("changeDate", function(event) {
$("input[type='hidden'][name='date']").val(
$('#datetimepicker').datepicker('getFormattedDate')
)
});
$(function () {
$('#datetimepicker').datetimepicker({
inline: true,
sideBySide: true
});
$('#datetimepicker').datetimepicker();
$('#datetimepicker').on("changeDate", function() {
$('#my_hidden_input').val(
$('#datetimepicker').datetimepicker('getFormattedDate')
);
});
});
</script>
</div>
</div>
There is nothing happening with my hidden input.
He's not saving the value in it.
I've got the code from the bootstrap docu.
Somebody knows how it works?
Thanks.
According to Bootstrap 3 Datepicker, you need dp.change event.
Reference: http://eonasdan.github.io/bootstrap-datetimepicker/Events/
Replace your changeDate event $('#datetimepicker').on("changeDate", function() {});
to
$('#datetimepicker').on('dp.change', function(event) {});
You can than get the date using event.date or even better, format the date event.date.format('MM/DD/YYYY h:mm a')
Example:
$('#datetimepicker').on('dp.change', function(event) { alert(event.date); });
Please refer below solution:
$(function() {
$('#datetimepicker').datetimepicker({
inline: true,
sideBySide: true
});
$('#datetimepicker').on('dp.change', function(event) {
//console.log(moment(event.date).format('MM/DD/YYYY h:mm a'));
//console.log(event.date.format('MM/DD/YYYY h:mm a'));
$('#selected-date').text(event.date);
var formatted_date = event.date.format('MM/DD/YYYY h:mm a');
$('#my_hidden_input').val(formatted_date);
$('#hidden-val').text($('#my_hidden_input').val());
});
});
#selected-date,
#hidden-val {
font-weight: bold;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div>
Selected Date: <span id="selected-date"></span>
<br/>
<br/>Value of hidden field: <span id="hidden-val"></span>
<br/>
</div>
<div class="col-lg-8 datepicker_area" style="background: red;">
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker" data-date="12/03/2012 12:00 PM"></div>
<input type="hidden" name="date" id="my_hidden_input" value="">
</div>
</div>
</div>
</div>
</div>
Move your hidden input inside the div (container of the inline datetimepicker). And, datetimepicker will automatically use it. Tested on version 4.17.47.
<div class="col-md-8">
<div id="datetimepicker" data-date="12/03/2012 12:00 PM">
<input type="hidden" name="date" id="my_hidden_input" value="">
</div>
</div>
Beloow hidden input worked for me
<input type="hidden" name="date" id="my_hidden_input" value="">
Assigned the datetimepicker directly to hidden element via id
<script>
$(function(){
$('#my_hidden_input').datetimepicker({
inline: true,
sideBySide: true
});
});
</script>
Related
There is an input which is Date Picker.
It is impossible to type in the input, everybody can only pick a date by mouse.
enter image description here
How can I call an event when the user changes Date ?
Here is HTML Code:
<div class="col-lg-3 col-md-3 col-xs-12">
<label for="homeWorkStartDate">From: </label>
<input type="text" id="homeWorkStartDate" class="pdate form-control" />
<input type="hidden" id="txtHomeWorkStartDate" />
<script>
var objCal1 = new AMIB.persianCalendar('homeWorkStartDate', {
extraInputID: 'txtHomeWorkStartDate',
extraInputFormat: 'YYYY-MM-DD'
});
</script>
</div>
<div class="col-lg-3 col-md-3 col-xs-12">
<label for="homeWorkEndDate">To: </label>
<input type="text" id="homeWorkEndDate" class="pdate form-control" />
<input type="hidden" id="txtHomeWorkEndDate" />
<script>
var objCal1 = new AMIB.persianCalendar('homeWorkEndDate', {
extraInputID: 'txtHomeWorkEndDate',
extraInputFormat: 'YYYY-MM-DD'
});
</script>
</div>
Here is what I tried but doesn't work:
$("#homeWorkStartDate,#homeWorkEndDate").on('input propertychange',function(){
alert("hi");
});
Did you try something like this ?
$( "#datepicker" ).datepicker({
onSelect: function () {
alert('hello');
}
})
I've tried to subtract between two dates. Date "a" and Date "b" using this code that I've found here. It works with jsfiddle.net but not with my project.
This is my code :
HTML and JS
$(document).ready(function() {
$("#startdate,#enddate").datepicker({
changeMonth: true,
changeYear: true,
firstDay: 1,
dateFormat: 'dd/mm/yy',
})
$("#startdate").datepicker({
dateFormat: 'dd-mm-yy'
});
$("#enddate").datepicker({
dateFormat: 'dd-mm-yy'
});
$('#enddate').change(function() {
var start = $('#startdate').datepicker('getDate');
var end = $('#enddate').datepicker('getDate');
if (start < end) {
var days = (end - start) / 1000 / 60 / 60 / 24;
$('#days').val(days);
} else {
alert("You cant come back before you have been!");
$('#startdate').val("");
$('#enddate').val("");
$('#days').val("");
}
}); //end change function
}); //end ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datepicker/0.6.5/datepicker.min.css">
<div class="form-group">
<label class="control-label col-md-3">date 1</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="startdate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">date 2</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="enddate">
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">result</label>
<div class="col-md-1 col-xs-11">
<input type="text" class="form-control" id="days">
</div>
</div>
But when I import into the project, it does not work. Like JS file not found the HTML's "id" or else. Can anyone help me ?
This is The JSFIDDLE link to this query.
it's working fine with me did you check in incognito mode? ctrl+shift+N and check in incognito
I want to keep the value of a Date to a default value that I specified. If no date is selected when user click submit button.
what I need the functionality to be. If user select a date and submit the form, after submission the form selected date value must be the value on the date field which works perfectly so. I have the problem ie. when date is not selected and user submit form the date field have the today's date by default Select Date
My code is as follows
HTML
<body onload="CovertDateToString()">
<form action="searchDate" method="post" id="searchDate" class="searchDate" modelAttribute="searchDate">
<!-- Select type selectDateRange-->
<div class="form-group ">
<div class="col-md-3 selectContainer">
<div class="input-group">
<input type="text" class="form-control" name="selectDateRange" id="selectDateRange" value="${newDate}">
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<!-- Select type search button with input-->
<div class="form-group">
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="submit">
<div class="up" style="margin-top: -8%; color: white;">Search</div></button>
</span>
</div>
<!-- /input-group -->
</div>
</div>
</form>
</body>
Js code
function CovertDateToString() {
var date = <%=request.getParameter("selectDateRange")%>;
var myDate = new Date();
var selectDate = myDate.toDateString();
var selectDate = "Select Date";
document.getElementsByName('selectDateRange')[0].value = selectDate;
selectDate = date;
document.getElementsById('selectDateRange')[0].value = date;
console.log("Set Date to Select Date ",selectDate);
console.log("Set Date to Selected Date ",date);
}
daterangepicker
$(function() {
$('input[name="selectDateRange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
}
});
});
function CovertDateToString() {
var date = "${newDate}";
var myDate = new Date();
var selectDate = myDate.toDateString();
document.getElementsByName('selectDateRange')[0].value = selectDate;
selectDate = date;
document.getElementById('selectDateRange').value = date;
console.log("Set Date to Select Date ",selectedDate);
console.log("Set Date to Selected Date ",date);
}
$(function() {
$('input[name="selectDateRange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
}
});
});
After more hours on this issue I final got it to work. Removing the request.getParamter was the mean reason date got removed after
Please check the following code i have used static values at the place of dynamic values so manage it and code is working fine at snnipet.
function CovertDateToString() {
var date = "${newDate}";
var arr = date.split(" ");
if(arr != "null"){
$("#selectDateRange").data('daterangepicker').setStartDate(arr[0]);
$("#selectDateRange").data('daterangepicker').setEndDate(arr[2]);
}
}
$(function() {
$('input[name="selectDateRange"]').daterangepicker({
locale: {
format: 'YYYY-MM-DD'
}
});
});
<script src="https://cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" rel="stylesheet"/>
<body onload="CovertDateToString()">
<form action="searchDate" method="post" id="searchDate" class="searchDate" modelAttribute="searchDate">
<!-- Select type selectDateRange-->
<div class="form-group ">
<div class="col-md-3 selectContainer">
<div class="input-group">
<input type="text" class="form-control" name="selectDateRange" id="selectDateRange" >
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
<!-- Select type search button with input-->
<div class="form-group">
<div class="col-md-3 inputGroupContainer">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-success" type="submit">
<div class="up" style="margin-top: -8%; color: white;">Search</div></button>
</span>
</div>
<!-- /input-group -->
</div>
</div>
</form>
</body>
I want to do form validation for all three tags and after validation, enable the submit button until validation is done not to enable submit button.
<html>
<head>
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/datepicker.css" />
<link rel="stylesheet" href="css/mystyle.css" />
<script src="js/jquery-2.2.2.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/moment.js"></script>
</head>
<body>
<form id="report-form">
<div id="report-pane" class="row">
<div class="col-xs-1">
<label>Report:</label>
</div>
<div class="col-xs-2">
<select class="form-control" id="report">
<option value="" selected>Select Report</option>
<option id="rep1" value="10">Report 1</option>
<option id="rep2" value="20">Report 2</option>
<option id="rep3" value="30">Report 3</option>
</select>
</div>
</div>
<!--Date Section-->
<div id="date-pane" class="row">
<!--Script for datepicker-->
<script type="text/javascript">
$(function() {
var now = new Date();
var yearsold = new Date();
yearsold.setFullYear((now.getFullYear() - 2));
$('.datepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: yearsold,
endDate: now
});
var defaultDate = moment().format('DD/MM/YYYY');
$("#datePicker1").val(defaultDate);
$("#datePicker2").val(defaultDate);
});
</script>
<div class="col-xs-1">
<label>Start Date:</label>
</div>
<div class='col-sm-3'>
<input class="datepicker form-control" type="text" id="datePicker1" />
</div>
<div class="col-xs-1">
<label>End Date:</label>
</div>
<div class='col-sm-3'>
<input class="datepicker form-control" type="text" id="datePicker2" />
</div>
</div>
<div id="button-pane" class="row">
<div class="col-lg-12">
<!-- <button class="btn btn-primary">Generate Report</button>-->
<input type="submit" id="requestBtn" class="btn btn-primary" value="Generate Report"></input>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
// Validation Function Needed
});
</script>
</form>
<script src="js/bootstrap.js"></script>
</body>
</html>
Enable the submit button only if all the form validation is done
Example
$(document).ready(function () {
$('#ccSelectForm').validate({
rules: {
inputEmail: {
required: true,
email: true
},
inputEmailConfirm: {
equalTo: '#inputEmail'
}
}
});
$('#ccSelectForm input').on('keyup blur', function () {
if ($('#ccSelectForm').valid()) {
$('button.btn').prop('disabled', false);
} else {
$('button.btn').prop('disabled', 'disabled');
}
});
});
Check this link
i think you want something like this
$(document).ready(function() {
// before validation
$("#submit").attr("disabled","disabled");
// after validation
$("#submit").removeAttr("disabled");
});
If you insist on Jq custom logic is needed,
var validationCallBk = function(){
var report = $('#report').val();
var startDate = $('#datePicker1').val();
var endDate = $('#datePicker2').val();
if(report != '' && startDate == somevaliddate && endDate == somevaliddate)
//enable btn
else
//disable btn
};
$('#report').on('change',validationCallBk);
//use the datepicker on select event and call validationCallBk
Datepicker is working in below jsp
<script type="text/javascript">
$(document).ready( function() {
$("#datefrom").datepicker({
changeMonth : true, changeYear : true, onSelect :
function(selected) {
$("#dateto").datepicker("option",
"minDate", selected) }
});
<div class="user-form.row">
<div class="form-lable">From Date :</div>
<div class="form-comp">
<input type="text" size="5" id="datefrom"name="datefrom" required="required" />
</div>
BUT datepicker is not working in below jsp I have used same code in both files I have included same .js files in both the files
$(document).ready(function() {
alert("hi doc ready"); //added by Shrikant on 14-12-2015
$("#issuedDate").datepicker({ changeMonth : true, changeYear :
true });
<div class="user-form.row"> <div class="form-lable"> Issued date
: </div> <div class="form-comp"> <input type="text" size
="5" id="issuedDate" name="issuedDate" required="required" />
</div> </div>