We Keep Coding

How to restrict date and month not valid in Jquery / Javascript

This is my code
//Put our input DOM element into a jQuery Object
var $jqDate = jQuery('input[name="jqueryDate"]');
//Bind keyup/keydown to the input
$jqDate.bind('keyup','keydown', function(e){
//To accomdate for backspacing, we detect which key was pressed - if backspace, do nothing:
if(e.which !== 8) {
var numChars = $jqDate.val().length;
if(numChars === 2 || numChars === 5){
var thisVal = $jqDate.val();
thisVal += '/';
$jqDate.val(thisVal);
}
}
});
<div style="font-family: Helvetica,Arial,sans-serif; font-size: 12px; line-height: 150%;">
<strong>HTML5 "date" input type:</strong> <input type="date" name="html5date"><br>
<strong>jQuery "date" input type mimic:</strong> <input type="text" name="jqueryDate" placeholder="dd/mm/yyyy"><br>
Key Input: <span id="keyP">null</span>
</div>
In the above code i have a textbox . In that textbox user enter date manually . It takes date format worked . But user enter day more than 31 and month 12 it not accept.How to restrict date and month by using Jquery or Javascript.
This is Jsfiddle :- https://jsfiddle.net/ChrisCoray/hLkjhsce/

You Need to add 'datePicker'as class name
$(".datePicker").datepicker({
dateFormat: 'd/mm/yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
minDate: Date.parse("1900-01-01"),
maxDate: Date.parse("2100-01-01"),
yearRange: "c-90:c+150"
});
// validation in case user types the date out of valid range from keyboard : To fix the bug with out of range date time while saving in sql
$(function () {
$.validator.addMethod(
"date",
function (value, element) {
var minDate = Date.parse("1900-01-01");
var maxDate = Date.parse("2100-01-01");
var valueEntered = Date.parse(value);
if (valueEntered < minDate || valueEntered > maxDate) {
return false;
}
return !/Invalid|NaN/.test(new Date(minDate));
},
"Please enter a valid date!"
);
});

Setting date range picker start date to blank

I have a daterange picker based on http://www.daterangepicker.com 's daterange picker and I want to set the start date to empty. This will work for what I want to do.
I'm using an text input field to get the dates
</span><input type="text" class="form-control" id="reservation" />
On the site there is an example of setting "Input Initially Empty" but I couldn't get it to work. Basically I don't know where to set it as it seems.
My daterange picker is inside a partial view and it called by another view. Page scripts are set in the view which calls the partial one. On the daterangepicker.js script I found these lines;
//default settings for options
this.parentEl = 'body';
this.element = $(element);
this.startDate = moment().startOf('day');
this.endDate = moment().endOf('day');
this.minDate = false;
this.maxDate = false;
this.dateLimit = false;
this.autoApply = false;
this.singleDatePicker = false;
this.showDropdowns = false;
this.showWeekNumbers = false;
this.timePicker = false;
this.timePicker24Hour = false;
this.timePickerIncrement = 1;
this.timePickerSeconds = false;
this.linkedCalendars = true;
this.autoUpdateInput = true;
this.ranges = {};
As far as I can tell they are based on moment.js. I tried manipulating this.startDate but couldn't manage to set it to a blank value. using this.startdate = null made the whole date range picker stop working so I guess I need something like empty date equivalent of moment.js. Or something entirely different.
Can anyone show me how to do it?

Input Initially Empty
<input type="text" name="datefilter" value="" />
<script type="text/javascript">
$(function() {
$('input[name="datefilter"]').daterangepicker({
autoUpdateInput: false,
locale: {
cancelLabel: 'Clear'
}
});
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('MM/DD/YYYY') + ' - ' + picker.endDate.format('MM/DD/YYYY'));
});
$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});
});
</script>
or
//daterangepickers
//moment.locale('tr');
moment.locale("#SessionHelper.CurrentLanguageTwoChar");
$(".date-control").daterangepicker({
singleDatePicker: true,
showDropdowns: true,
//timePicker: true,
//timePicker24Hour: true,
//timePickerSeconds: true,
minYear: parseInt(moment().subtract(10, 'years').format('YYYY'),10),
maxYear: parseInt(moment().add(10, 'years').format('YYYY'), 10),
autoUpdateInput: false,
singleClasses: "",
locale: {
//format: 'DD.MM.YYYY HH:mm:ss'
//format: 'DD.MM.YYYY'
}
});
$('.date-control').on('apply.daterangepicker', function (ev, picker) {
$(this).val(picker.startDate.format('L'));
});
$('.date-control').on('cancel.daterangepicker', function (ev, picker) {
$(this).val('');
});
http://www.daterangepicker.com/#example5
https://github.com/dangrossman/daterangepicker/issues/815

autoUpdateInput: false
function (chosen_date) {
$('.form-datetime').val(chosen_date.format('YYYY-MM-DD'));
}

I solved this issue using this....I hope this issue could help you.
Input Tag
<div class="form-group">
<label>Due date:</label>
<div class="input-group">
<input type="text"
class="form-control float-right"
id="duetime"
name="due_time"
autocomplete="off"
/>
</div>
</div>
script
<script>
$(function(){
$("#duetime").daterangepicker({
autoUpdateInput: false,
minYear: 1901,
showDropdowns: true,
singleDatePicker: true,
timePicker: true,
timePicker24Hour: false,
timePickerIncrement: 05,
drops: "up",
locale: {
format: 'MM/DD/YYYY hh:mm A'
}
}).on("apply.daterangepicker", function (e, picker) {
picker.element.val(picker.startDate.format(picker.locale.format));
});
});
</script>
Note: I found this from this source https://github.com/dangrossman/daterangepicker/issues/815#issuecomment-493323964

To set default value of date range picker to null,
Inside your function set autoUpdateInput to false
autoUpdateInput: false,

for the daterangepicker include from date and to date
please flowing this code set start date to blank
$('.form-datetime').daterangepicker({autoUpdateInput: false}, (from_date, to_date) => {
console.log(from_date.toDate(), to_date.toDate());
$('.form-datetime').val(from_date.format('DD/MM/YYYY') + ' - ' + to_date.format('DD/MM/YYYY'));
});
Thanks.

I want to disable the past time in datetimepicker in codeigniter

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>

jquery datetime picker date and time should come in box default without clicking on box

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);
},
});
});

Bootstrap datepicker disabling past dates without current date

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
});