I wanted to disable all past date before current date, not with current date. I am trying by bootstrap datepicker library "bootstrap-datepicker" and using following code:
$('#date').datepicker({
startDate: new Date()
});
It works fine. But it is disabling date till today.
As example if today is 04-20-2013 and i disable past dates by setting startDate: new Date(). but I am able to select date from 04-21-2013.
UPDATED: i can solve it as following for UTC zone:
var d = new Date();
options["startDate"] = new Date(d.setDate(d.getDate() - 1));
or startDate: "+0d"
But these methods don't work when UTC is a day ahead. For my client in California that means at 5:00 pm my client can no longer select his local current date as a valid date. In order to fix this I am temporarily using startDate: "-1d", but of course before 5 that means yesterday is visible.
Has anyone come up with a better method for now as I do not want to tell users to put in a UTC date?
var date = new Date();
date.setDate(date.getDate()-1);
$('#date').datepicker({
startDate: date
});
Use minDate
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('#date').datepicker({
minDate: today
});
HTML
<input type="text" name="my_date" value="4/26/2015" class="datepicker">
JS
jQuery(function() {
var datepicker = $('input.datepicker');
if (datepicker.length > 0) {
datepicker.datepicker({
format: "mm/dd/yyyy",
startDate: new Date()
});
}
});
That will highlight the default date as 4/26/2015 (Apr 26, 2015) in the calendar when opened and
disable all the dates before current date.
use
startDate: '-0d'
Like
$("#datepicker").datepicker({
startDate: '-0d',
changeMonth: true
});
You can use the data attribute:
<div class="datepicker" data-date-start-date="+1d"></div>
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
$('#date').datetimepicker({
startDate: today
});
The solution is much simpler:
$('#date').datepicker({
startDate: "now()"
});
Try Online Demo and fill input Start date: now()
<script type="text/javascript">
$('.datepicker').datepicker({
format: 'dd/mm/yyyy',
todayHighlight:'TRUE',
startDate: '-0d',
autoclose: true,
})
Here it is
<script>
$(function () {
var date = new Date();
date.setDate(date.getDate() - 7);
$('#datetimepicker1').datetimepicker({
maxDate: 'now',
showTodayButton: true,
showClear: true,
minDate: date
});
});
</script>
Try it :
$(function () {
$('#datetimepicker').datetimepicker({ minDate:new Date()});
});
To disable past dates & highlight today's date:
$(function () {
$('.input-daterange').datepicker({
startDate : new Date(),
todayHighlight : true
});
});
To disable future dates & highlight today's date:
$(function () {
$('.input-daterange').datepicker({
endDate : new Date(),
todayHighlight : true
});
});
For more details check this out https://bootstrap-datepicker.readthedocs.io/en/latest/options.html?highlight=startdate#quick-reference
Disable all past date
<script type="text/javascript">
$(function () {
/*--FOR DATE----*/
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
//Date1
$('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
format: 'dd-mm-yyyy',
todayHighlight:'TRUE',
startDate: today,
endDate:0,
autoclose: true
});
});
</script>
Disable all future date
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
//Date1
$('#ctl00_ContentPlaceHolder1_txtTranDate').datepicker({
format: 'dd-mm-yyyy',
todayHighlight:'TRUE',
minDate: today,
autoclose: true
});
Please refer to the fiddle http://jsfiddle.net/Ritwika/gsvh83ry/
**With three fields having date greater than the **
<input type="text" type="text" class="form-control datepickstart" />
<input type="text" type="text" class="form-control datepickend" />
<input type="text" type="text" class="form-control datepickthird" />
var date = new Date();
date.setDate(date.getDate()-1);
$('.datepickstart').datepicker({
autoclose: true,
todayHighlight: true,
format: 'dd/mm/yyyy',
startDate: date
});
$('.datepickstart').datepicker().on('changeDate', function() {
var temp = $(this).datepicker('getDate');
var d = new Date(temp);
d.setDate(d.getDate() + 1);
$('.datepickend').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
startDate: d
}).on('changeDate', function() {
var temp1 = $(this).datepicker('getDate');
var d1 = new Date(temp1);
d1.setDate(d1.getDate() + 1);
$('.datepickthird').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
startDate: d1
});
});
});
You can simply add data attribute in html input tag:
In rails html :
<%= form.text_field :appointment_date, 'data-provide': 'datepicker', 'data-date-start-date': "+0d" %>
HTML :
<input data-provide="datepicker" data-date-start-date="+0d" type="text" name="appointment_date" id="appointment_date">
In html
<input class="required form-control" id="d_start_date" name="d_start_date" type="text" value="">
In Js side
<script type="text/javascript">
$(document).ready(function () {
var dateToday = new Date();
dateToday.setDate(dateToday.getDate());
$('#d_start_date').datepicker({
autoclose: true,
startDate: dateToday
})
});
to disable past date just use :
$('.input-group.date').datepicker({
format: 'dd/mm/yyyy',
startDate: 'today'
});
The following worked for me
$('.input-group.date').datepicker({
format: 'dd/mm/yyyy',
startDate: new Date()
});
It depends on what format you put on the datepicker
So first we gave it the format.
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1; //January is 0!
var yyyy = today.getFullYear();
if(dd<10){
dd='0'+dd;
}
if(mm<10){
mm='0'+mm;
}
var today = yyyy+'-'+mm+'-'+dd; //Here you put the format you want
Then Pass the datepicker (depends on the version you using, could be startDate or minDate which is my case )
//Datetimepicker
$(function () {
$('#datetimepicker1').datetimepicker({
minDate: today, //pass today's date
daysOfWeekDisabled: [0],
locale: 'es',
inline: true,
format: 'YYYY-MM-DD HH:mm', //format of my datetime (to save on mysqlphpadmin)
sideBySide: true
});
});
You can find your solution in this link below: https://codepen.io/ahmetcadirci25/pen/NpMNzJ
Thats work for me.
My code:
var date = new Date();
date.setDate(date.getDate());
$('#datetimepicker1').datetimepicker({
isRTL: false,
format: 'dd.mm.yyyy hh:ii',
autoclose: true,
language: 'tr',
startDate: date
});
If your requirement is to disable the startDate and endDate dynamically based on one on another you can you this.
$('#date2').datepicker({
todayHighlight: true,
autoclose: true,
format: "dd/mm/yyyy",
clearBtn : true
}).on('show', function(e){
var date = $('#date3').datepicker('getDate');
if(date){
$('#date2').datepicker('setEndDate', date);
}
});
$('#date3').datepicker({
todayHighlight: true,
autoclose: true,
format: "dd/mm/yyyy",
clearBtn : true
}).on('show', function(e){
var date = $('#date2').datepicker('getDate');
if(date){
$('#date3').datepicker('setStartDate', date);
}
});
If your requirement is just disabled past dates then you can use below snippet.
$('#date2').datepicker({
todayHighlight: true,
autoclose: true,
format: "dd/mm/yyyy",
clearBtn : true,
startDate : new Date()
})
If your requirement is just disabled future dates then you can use below snippet.
$('#date2').datepicker({
todayHighlight: true,
autoclose: true,
format: "dd/mm/yyyy",
clearBtn : true,
endDate : new Date()
})
I hope it will help someone.
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
$('.datePicker').datepicker({
dateFormat: 'DD-MM-YYYY',
orientation: "auto",
startDate: today,
autoclose: true
});
Related
I would like to run this code but without success. I'm a beginner please!
Indeed, I have two dates date1 and date2. and I would like after selecting date date1 that date to be the max date of date date2. I tried with it but it does not work (Onchange)
$(document).ready(function() {
// Date1
$(".date1").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function(selected) {
var minDate = new Date(selected.date.valueOf());
$('.date2').datepicker('setStartDate', minDate);
});
// Date2
$(".date2").datepicker({
todayBtn: 1,
autoclose: true,
}).on('changeDate', function(selected) {
var minDate = new Date(selected.date.valueOf());
$('.date1').datepicker('setStartDate', minDate);
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
<p>Date: <input type="text" class="date1"></p>
<p>Date: <input type="text" class="date2"></p>
I have two date in html Datefrom and Dateto input text with ddmmyyyy format. I am trying to find out the difference between Datefrom and Dateto in Keyup event of Datefrom.
<input type='text' asp-for="Datefrom " class="form-control " id="Datefrom " />
<input type='text' asp-for="Dateto " class="form-control " id="Dateto " />
I am trying to find out the difference between two date in JavaScript as given below. The difference is not showed as correctly.
<script>
$("#Datefrom").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' });
$("#Dateto").datepicker({ format: 'dd/mm/yyyy', date: new Date(1900, 01, 01), autoclose: true, todayBtn: 'linked' });
$('#Datefrom ').keyup(function () {
var stdatestring = $('#Datefrom').val();
var missdatestring = $('#Dateto').val();
var stdateval = moment(stdatestring, 'DD/MM/YYYY').toDate();
var datefromval = moment(missdatestring, 'DD/MM/YYYY').toDate();
var diffdate = missdatestring - stdatestring
});
</script>
I am new to the web development. Here, I am using the jquery datePicker. In this I have a input box and that user can select only year and month and not date. So, I used,
$('#' + duration[k]).datepicker({
format: 'MM yyyy',
viewMode: "months",
minViewMode: "months",
});
I did this, Here my input are getting created dynamically.
var duration = ["StartDuration", "EndDuration"];
var commentText = document.createElement('input');
commentText.setAttribute("type", "text");
commentText.name = "month";
commentText.id = duration[k];
commentText.className = 'form-control';
commentText.rows = '3';
commentText.placeholder = "Enter" + " " + duration[k];
commentText.setAttribute("readOnly", "true");
commentText.setAttribute("ng-model", duration[k]);
Used for loop on the array and then created this input box. Now what happening is here, It gets datepicker but it is having a date-month-year . So, I want to have only year and month. Can any one pleas help me with this ?
You need to use dateformat like this : dateFormat: 'MM yy'
Check the example :
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
.ui-datepicker-calendar {
display: none;
}
<link href="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<label for="startDate">Your Date :</label>
<input name="startDate" id="startDate" class="date-picker" />
Here is fiddle
You can do like this
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
});
Jquery datepicker provides these two - changeMonth,changeYear property for it and make format like MM yy.
i have 2 views. one of them calls the other one for the script of the datetime picker. right now what i get is a datetime picker that had past dates disabled. what i want to get is a date picker that not only has past date disabled but also has the passed time disabled. i am posting my code below.
This is my first view where the datepicker is displayed.
<input class="field-input form_datetime_houseboat" type="text" readonly placeholder="Starting Date" name="fromdate" id="fromdate">
my 2nd view has the section:
<script type="text/javascript">
var nowDate = new Date();
var today = new Date(nowDate.getFullYear(), nowDate.getMonth(), nowDate.getDate(), 0, 0, 0, 0);
var dt = new Date();
var timed = new Date(dt.getHours(), dt.getMinutes());
$(".form_datetime").datetimepicker({format: 'dd-mm-yyyy hh:ii', startDate:today, minTime: timed});
</script>
thanks in advance.
try this script :helps to disable previoue date and time. create new date object as minDate
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.simple-dtpicker.js"></script>// datetime picker
<div id="date_picker"> </div>
<script type="text/javascript">
$(function(){
var dateToday = new Date();
var dates = $('#date_picker').dtpicker({
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);
}
});
});
</script>
Hi i have two datetime picker and using jquery 1.7.2 in both the datetime picker i need date and time defaultly presently am getting these after click box but i need before click only . am using jsfiddle http://jsfiddle.net/srknthcse/f9raubjp/ thank you for your help
$(function() {
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#datepicker').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date(d1);
var addedhour=d2.setHours(d1.getHours()+4);
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#datepicker1').val(datetext);
},
});
});
Instead of setting datepicker to an input field set it to a div. Then use a hidden input for the value as shown on the fiddle:
http://jsfiddle.net/8ztsjcos/2/
<input type="hidden" id="to">
<input type="hidden" id="from">
$(function() {
$('#datepicker').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d = new Date(); // for now
datetext=datetext+" "+d.getHours()+": "+d.getMinutes();
$('#to').val(datetext);
},
});
});
$(function() {
$('#datepicker1').datepicker({
dateFormat: 'dd-mm-yy',
onSelect: function(datetext){
var d1 = new Date();
var d2 = new Date(d1);
var addedhour=d2.setHours(d1.getHours()+4);
// for now
datetext=datetext+" "+d2.getHours()+": "+d2.getMinutes();
$('#from').val(datetext);
},
});
});