i need to give user to select a date and a time and get that as an input here i have added the basic code i use and i need to restrict user only to add future date and a time not past dates or time!
$(function () {
var currentDate = new Date();
$('#datetimepicker1').datetimepicker({
//viewMode: 'years',
format: 'DD/MM/YYYY'
});
$('#datetimepicker2').datetimepicker({
format: 'LT'
});
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.7.14/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
<div class="form-group">
<label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px">* </a>Select a date:</label>
<div class="col-sm-8">
<div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;">
<div class='input-group date' id='datetimepicker1'>
<input name="datepicker" id="datepicker" type='text' class="form-control" min="2015-01-01" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<!--Time picker-->
<div class="form-group">
<label class="control-label col-sm-4" for="pwd"><a style="color:red !important; font-size:18px ; font-size:18px">* </a>Select a time:</label>
<div class="col-sm-8">
<div class="form-group" style="margin-right: 0px !important; margin-left: 0px !important;">
<div class='input-group date' id='datetimepicker2'>
<input name="timepicker" id="timepicker" type='text' class="form-control" required />
<span class="input-group-addon">
<span class="glyphicon glyphicon-time"></span>
</span>
</div>
</div>
</div>
</div>
my question is i need to allow user only to put future date not past ones!
Restrict the range of selectable dates with the minDate and maxDate options.
$('#datetimepicker1').datepicker({ minDate: 0});
See the official documentation here.
or you can check this example from the documentation bootstrap datetimepicker
$('.starts_on, .ends_on').datetimepicker({
format: 'YYYY-MM-DD',
useCurrent: false,
minDate: moment()
});
$('.starts_on').datetimepicker()
.on('dp.change', function(v){
var incrementDay = moment(new Date(v.date));
incrementDay.add(1, 'days');
$('.ends_on').data('DateTimePicker').minDate(incrementDay);
$(this).data("DateTimePicker").hide();
});
$('.ends_on').datetimepicker()
.on('dp.change', function(v){
var decrementDay = moment(new Date(v.date));
decrementDay.subtract(1, 'days');
$('.starts_on').data('DateTimePicker').maxDate(decrementDay);
$(this).data("DateTimePicker").hide();
});
Try this
$("#datetimepicker1").datepicker({
minDate: 1,
onSelect: function(theDate) {
$("#datetimepicker1").datepicker('option', 'minDate', new Date(theDate));
},
dateFormat: 'mm/dd/yy'
});
use minDate: 1, this should allow only future date
$('#datetimepicker1').datetimepicker({
minDate:1,
format: 'DD/MM/YYYY'
});
i got issue solved by this thank you everyone for your help they were very helpful!
$('#datetimepicker1').datetimepicker({
//viewMode: 'years',
//minDate:0,
//format: 'DD/MM/YYYY'
format: "MM/DD/YYYY",minDate: new Date()
});
Related
I want to validate within one years months and dates, and i created to allow only one year of dates but its not validated.
For example
Im created with in one year, Current date is 7/11/2019, i can allowed to pick date upto 7/11/2020, thats im created working fine.. but if i enter some date in manually its allowed. example: if i enter (type manually) 1/1/2022 its allowed.. i dont want to allow overthan 1 year dates.. how to validate this??
hope my question is understand..
Example Fiddle here..
FIDDLE HERE..
Example code here..
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "dd/mm/yy",
maxDate: '1y',
minDate: "-10m"
});
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div class="form-group col-4 rfdate">
<label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
<div class="input-group vcdate datepic" id="vocdate">
<input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
I have change in your code, see below answer.
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "dd/mm/yy",
maxDate: '1y',
minDate: "-10m"
});
$(document).on( ' input change', '#vochDate', function(){
$('.err').remove();
const nr_years = 1;
var maxDate = new Date(new Date().setFullYear(new Date().getFullYear() + nr_years));
var curDate = $(this).datepicker("getDate");
if (curDate > maxDate) {
//alert("invalid date");
$('#vochDate').after('<span class="err"> Invalid Date </span>');
$(this).datepicker("setDate", new Date());
}
})
});
.err {
color : red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin=" anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<div class="form-group col-4 rfdate">
<label class="col-sm-5 control-label p-sm-0" for="vouchdt">Voucher Date :</label>
<div class="input-group vcdate datepic" id="vocdate">
<input type="text" class="form-control" id="vochDate" name="vouchdt" th:field="*{strvouchdt}" />
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
Use change event to validate on change. Here you can have a look
$(document).ready(function() {
$('#vochDate, #refdate').datepicker({
dateFormat: "mm/dd/yy",
maxDate: '1y',
minDate: "-10m"
});
$("#vochDate").change(function(){
if((new Date($("#vochDate").val()).getTime()-new Date().getTime())/(1000*3600*24)>365){
alert("invalid")
//
}
})
});
Hello Everyone I'm beginner in Jquery and javascript.In my project I have to use bootstrap.I have tried to execute datepicker to hide past datesDate picker is working even though past dates are not hiding..I have attached the below the code..
<!--html:-->
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="FromDate" class="control-label">FromDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input type="text" name="fromDate" id="fromDate" class="form-control pull-right" data-validation-engine="validate[required]" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-3 control-label">
<label for="ToDate">ToDate:</label>
</div>
<div class="col-sm-4">
<div class="input-group date">
<div class="input-group-addon"> <i class="fa fa-calendar"></i>
</div>
<input type="text" name="toDate" id="toDate" class="form-control pull-right" data-validation-engine="validate[required]"
onchange="report();" />
</div>
</div>
</div>
<!--script:-->
<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
// Date picker
$('#fromDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#toDate').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd-M-yyyy'
});
$('#fromDate').datepicker({ minDate: new Date() });
$('#toDate').datepicker({ minDate: new Date() });
/*]]>*/
</script>
Thanks!!
var dateToday = new Date();
var dates = $("#from, #to").datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
minDate: dateToday,
onSelect: function(selectedDate) {
var option = this.id == "from" ? "minDate" : "maxDate",
instance = $(this).data("datepicker"),
date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});
Try the above piece of code
I replicated your code and it is working fine.
Can be more clear on the versions and packages you use.
For Datepicker which package you use. I used jquery ui
For bootstrap you have used v3 (which is not a consideration here), but the latest version is 4
http://jsfiddle.net/0oL2yh6r/1/
jQuery(document).ready(function(){
$( "#fromDate" ).datepicker({
minDate: new Date(),
autoclose : true,
todayHighlight : true,
format : 'dd-M-yyyy'
});
});
I have update form. And this update form has bootstrap datetime picker and it has html code like as below:
<div class="input-group date" id="startdateandtime" value="Thu Jul 25 1997 00:00:00">
<input required="" type="text" class="form-control">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I want to set any date and time of this picker when edit form is opened.
But my jquery functions doesn't work. And value is not set to this datetime picker. I use jquery like as below:
$('#startdateandtime').datetimepicker({
date: new Date(1434544882775)
});
$("#startdateandtime").datetimepicker("update", new Date(1434544882775));
$("#startdateandtime").datepicker("setValue", "02-17-2012");
$('#startdateandtime').datepicker({
onSelect: function () {
$('#startdateandtime').text(new Date(1434544882775));
}
});
All of the above jquery functions doesn't work. So that I can't set any
datetime to the picker which is in the edit form.
I use bootstrap datetime picker. Bootstrap DateTimePicker css and js source files. And their version is 4.7.14.
How can I set any datetime to the datetime picker when edit form is opened ?
If you are using this bootstrap component: https://github.com/Eonasdan/bootstrap-datetimepicker
you can reference date function this ways:
set value in the picker to current datetime:
$("#startdateandtime").data("DateTimePicker").date(new Date());
set value to timestamp (24/11/2017 11:41:41 ==> timestamp 1511520101020):
$("#startdateandtime").data("DateTimePicker").date(new Date(1511520101020));
set value to date string:
$("#startdateandtime").data("DateTimePicker").date("30/11/2017 11:30");
See http://eonasdan.github.io/bootstrap-datetimepicker/Functions/#date
Here is a working snippet:
$('#datetimepicker1').datetimepicker(
{
format: "DD/MM/YYYY HH:mm:ss",
toolbarPlacement: 'top',
showClear: true,
showClose: true,
sideBySide: true
}
);
$(document).ready(function() {
$("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
})
function setTs() {
$("#datetimepicker1").data("DateTimePicker").date(new Date(1511520101020));
}
function setNow() {
$("#datetimepicker1").data("DateTimePicker").date(new Date());
}
function setDateStr() {
$("#datetimepicker1").data("DateTimePicker").date("30/11/2017 11:30");
}
<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.5/js/bootstrap.min.js?ver=1"></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/5a991bff/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.css">
<div class="row">
<div class="col-md-4">
<div class="panel-body">
<form id="srcForm" data-toggle="validator">
<div class="row">
<div class="form-group col-xs-12">
<label>Date</label>
<div id="datetimepicker1" class="input-group">
<input type="text" class="form-control" name="from">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</form>
<div class="search-footer">
<button type="button" class="btn btn-primary btn-search" onclick="setTs()">Set Date To TS</button>
<button type="button" class="btn btn-primary btn-search" onclick="setNow()">Set Date To Now</button>
<button type="button" class="btn btn-primary btn-search" onclick="setDateStr()">Set Date To Date String</button>
</div>
</div>
</div>
</div>
I am sharing how I made it work with setDate OPTION:
var dateEx = "08/14/2022 01:57:00 AM";
$('#datetimepicker1').data('DateTimePicker').setDate(dateEx);
Hope it helps someone too!
I have two text boxes which take date time value and the date time is setting from Bootstrap DateTimePicker. Now i want to subtract two date time values using JavaScript and save it in database?
Here is my code of date time pickers:
<script type="text/javascript">
$(function () {
$("#<%=datetimeCreated.ClientID %>").datetimepicker({
calendarWeeks: true,
useCurrent: false,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeCreated").on('dp.change', function (e) {
var date = $("#datetimeCreated").val();
});
});
$(function () {
$("#<%=datetimeClosed.ClientID%>").datetimepicker({
calendarWeeks: true,
format: 'YYYY-MM-DD HH:mm:ss',
});
$("#datetimeClosed").on('dp.change', function (e) {
var date = $("#datetimeClosed").val();
});
});
You can calculate the diff using moment.js (which is already required for datetimepicker) like this:
var diff = moment.duration(date1.diff(date2)).asDays();
Read more about .duration() and .diff() in the docs.
Read the code and let me know if something is not clear.
$(function () {
$('#datetimepicker1, #datetimepicker2').datetimepicker();
$('button').click(function(e) {
e.preventDefault();
var date1 = $('#datetimepicker1').data('DateTimePicker').date();
var date2 = $('#datetimepicker2').data('DateTimePicker').date();
var diff = moment.duration(date1.diff(date2)).asDays();
// here is what are you looking for:
console.log(diff);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<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.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/css/bootstrap-datetimepicker-standalone.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.44/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 class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<button class="btn btn-success">Submit</button>
</div>
</div>
</div>
</div>
I implement bootstrap datepicker to my project on Symfony and user can save reservation dates in DB.
Does exist any possibility to disable date rages from database? For example, I have date range from 22.12.2016 to 26.12.2016 and form 31.12.2016 to 03.01.2017 and I want to disable these dates in datepicker.
Thanks.
Hope this will useful to you
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/css/bootstrap-datetimepicker.css" rel="stylesheet" media="screen" />
<style>
.datetimepicker table tr td.disabled, .datetimepicker table tr td.disabled:hover {
color: rgb(255, 0, 0);
cursor: not-allowed;
}
</style>
<div class="form-group required">
<label class="col-sm-2 control-label" for="datestart">Reservation Start date</label>
<div class="col-sm-4">
<div class="start-date">
<div class='input-group date' id="time-start">
<input type='text' class="clearfix form-control col-sm-5" name="datestart" id="datestart" placeholder="Reservation Start date" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
<label class="col-sm-2 control-label" for="dateend">Reservation End date</label>
<div class="col-sm-4">
<div class="end-date">
<div class='input-group date' id="time-end">
<input type='text' class="clearfix form-control col-sm-5" name="dateend" id="dateend" placeholder="Reservation End date" readonly>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
// use this date formate 'MM/dd/yyyy HH:mm'
// start time
var datestart = '<?php echo $reservation_start_date; ?>';
// end time
var dateend = '<?php echo $reservation_end_date; ?>';
jQuery('#datestart').val(datestart);
jQuery('#dateend').val(dateend);
var today = new Date();
jQuery('#time-start').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
autoclose: true,
pickerPosition: datestart,
maxView: 3,
minuteStep: 15,
defaultDate: datestart,
startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
}).on("changeDate", function (e) {
jQuery('#start-time-before').html(e.date);
var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
jQuery('#time-end').datetimepicker('setStartDate', TimeZoned);
jQuery('#time-start').datetimepicker('setDate', TimeZoned);
jQuery('#start-time-adjusted').html(TimeZoned);
});
jQuery('#time-end').datetimepicker({
format: 'mm/dd/yyyy hh:ii',
pickerPosition: dateend,
autoclose: true,
maxView: 3,
minuteStep: 15,
defaultDate: dateend,
startDate: new Date(today.getFullYear(), today.getMonth(), today.getDate(), today.getHours(), today.getMinutes())
}).on("changeDate", function (e) {
jQuery('#end-time-before').html(e.date);
var TimeZoned = new Date(e.date.setTime(e.date.getTime() + (e.date.getTimezoneOffset() * 60000)));
jQuery('#time-start').datetimepicker('setEndDate', TimeZoned);
jQuery('#time-end').datetimepicker('setDate', TimeZoned);
jQuery('#end-time-adjusted').html(e.date);
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/2.1.30/js/bootstrap-datetimepicker.min.js" type="text/javascript"></script>