Bootstrap date and time separately getting conflict

Bootstrap date and time separately getting conflict - javascript

I had used the date picker and datetimepicker separately in my form. If I work only on time or date they are working. But when I put both the time is not working. Instead of time it's displaying the date.
My code is as follows :
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width:140px;">
<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: 'LT'
});
});
</script>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
<br />
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var bindDatePicker = function () {
$(".date").datetimepicker({
format: 'YYYY-MM-DD',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
}).find('input:first').on("blur", function () {
// check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
// update the format if it's yyyy-mm-dd
var date = parseDate($(this).val());
if (!isValidDate(date)) {
//create date based on momentjs (we have that)
date = moment().format('YYYY-MM-DD');
}
$(this).val(date);
});
}
var isValidDate = function (value, format) {
format = format || false;
// lets parse the date to the best of our knowledge
if (format) {
value = parseDate(value);
}
var timestamp = Date.parse(value);
return isNaN(timestamp) == false;
}
var parseDate = function (value) {
var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
if (m)
value = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);
return value;
}
bindDatePicker();
});
</script>
</div>
</div>
Image reference for problem.

This will Resolve your problem
<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: 'LT'
});
});
</script>
</div>
Just copy and paste I think this is what you need :)

I think you get date in both fields ?

You can now just copy and past
Just change the return variable names for Date Picker
From that it will interferer the stored variables of bootstrap time picker
<!DOCTYPE html>
<html>
<head>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js">
</script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/
bootstrap.min.css">
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker3' style="width:140px;">
<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: 'LT'
});
});
</script>
</div>
</div>
</div>
<div class="container">
<div class="row">
</div>
<br />
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var bindDatePicker = function () {
$(".date").datetimepicker({
format: 'YYYY-MM-DD',
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-arrow-up",
down: "fa fa-arrow-down"
}
}).find('input:first').on("blur", function () {
// check if the date is correct. We can accept dd-mm-yyyy and yyyy-mm-dd.
// update the format if it's yyyy-mm-dd
var date = parseDate($(this).val());
if (!isValidDate(date)) {
//create date based on momentjs (we have that)
date = moment().format('YYYY-MM-DD');
}
$(this).val(dates);
});
}
var isValidDate = function (value, format) {
format = format || false;
// lets parse the date to the best of our knowledge
if (format) {
value = parseDate(value);
}
var timestamp = Date.parse(value);
return isNaN(timestamp) == false;
}
var parseDate = function (value) {
var m = value.match(/^(\d{1,2})(\/|-)?(\d{1,2})(\/|-)?(\d{4})$/);
if (m)
values = m[5] + '-' + ("00" + m[3]).slice(-2) + '-' + ("00" + m[1]).slice(-2);
return values;
}
bindDatePicker();
});
</script>
</div>
</div>

Related

Updating minDate with dropdown on a bootstrap DateTimePicker

I have a date time picker in my project and need the min date to update whenever I select a different option on a drop down. Currently I have:
<div id="howManydays"></div>
<select id="ago">
<option value="7">week</option>
<option value="31">month</option>
<option value="365">year</option>
</select>
for my drop down and my date time picker is:
<div class='input-group date' id='startDateTimeDiv'>
<input id="startDateTimeSelection" type='text' class="form-control" name="startDateTimeSelection" style="width: 250px;" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<!-- bootstrap date time pickers -->
<script type="text/javascript">
$(function() {
$('#startDateTimeDiv').datetimepicker({
format : 'YYYY-MM-DD HH:mm:ss',
minDate : moment().subtract(document.getElementById("ago").value, 'd').format( 'YYYY-MM-DD'),
maxDate : moment().add(1, 'd').format('YYYY-MM-DD'),
widgetPositioning :
{
horizontal : 'right',
vertical : 'bottom'
}
});
});
</script>
When I change the value of the drop down then the picker is still locked to the last 7 days. Any help appreciated.

If you are using boostrap 3 you can use .options():
$('#ago').selectpicker().on('change', function(e) {
var x = this.value;
$('#startDateTimeDiv').data("DateTimePicker").options({
minDate : moment().subtract(x, 'd'),
maxDate : moment().add(1, 'd')
});
});
Note: you don't need to use .format('YYYY-MM-DD') because you are using a moment object.
$('#ago').selectpicker().on('change', function(e) {
var x = this.value;
$('#startDateTimeDiv').data("DateTimePicker").options({
minDate : moment().subtract(x, 'd'),
maxDate : moment().add(1, 'd')
});
});
$('#startDateTimeDiv').datetimepicker({
format : 'YYYY-MM-DD HH:mm:ss',
minDate : moment().subtract(document.getElementById("ago").value, 'd'),
maxDate : moment().add(1, 'd'),
widgetPositioning :
{
horizontal : 'right',
vertical : 'bottom'
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
<div class="container">
<div class="row">
<div class='col-sm-3'>
<div class="form-group">
<select id="ago">
<option value="7">week</option>
<option value="31">month</option>
<option value="365">year</option>
</select>
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='startDateTimeDiv'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

Keep value of date to a default one if no date is selected

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>

Bootstrap datetimepicker select time view mode

Hi I'm working with bootstrap datetimepicker. I'm trying to show select time view after choose date (click on date). Is there any events to open select time view or something else?

If you are using eonasdan datetimepicker you may use the following events:
dpchange in order to test if the user changed the date
click in order to reset the datetimepicker to the default condition (no time selection)
The snippet:
$('#datetimepicker1').datetimepicker().on('dp.change', function(e) {
var currDate = e.date.format('DD/MM/YYYY');
var oldDate = (e.oldDate == null) ? currDate : e.oldDate.format('DD/MM/YYYY');
var sideBySide = $('#datetimepicker1').data("DateTimePicker").options().sideBySide;
if (currDate != oldDate && sideBySide == false) {
$('#datetimepicker1').data("DateTimePicker").sideBySide(true);
}
}).on('click', 'span.input-group-addon', function(e) {
$('#datetimepicker1').data("DateTimePicker").sideBySide(false);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.1.1.min.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.17.1/moment.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css">
<script src="https://rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/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='datetimepicker1'>
<input type='text' class="form-control"/>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>

How to do jQuery form Validation of html elements before submit

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

Getting the value from the inline/embedded bootstrap datepicker

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>

Develop Reference

JavaScript is the programming language of the Web.

Bootstrap date and time separately getting conflict - javascript

I think you get date in both fields ?

Related

Updating minDate with dropdown on a bootstrap DateTimePicker

Keep value of date to a default one if no date is selected

Bootstrap datetimepicker select time view mode

How to do jQuery form Validation of html elements before submit

Getting the value from the inline/embedded bootstrap datepicker

Categories

Resources