This question already has answers here:
jQuery Date Picker - disable past dates
(16 answers)
Closed last month.
i have to select date from last month and previous months dates with this code am not get back to past dates how to proceed for next?
let firstDay = new Date();
$('#date_filter_startmonthly').datepicker({
startDate: firstDay,
endDate: '+0d',
todayHighlight: true,
format: 'yyyy-mm-dd',
orientation: 'bottom auto',
autoclose: true,
changeMonth: false,
changeYear: false,
stepMonths: false,
});
<div class="form-group mb-2">
<label class="col-form-lable mb-0">Start Date:</label>
<div id="date_filter_startmonthly" class="input-group date" data-target-input="nearest">
<div data-target="#date_filter_startmonthly" data-toggle="datepicker" class="input-group datetimepicker">
<input type="text" class="form-control form-control-sm" name="cb_sdate" placeholder="YYYY-MM-DD">
<div class="input-group-addon "></div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js" ></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/base/jquery-ui.min.css" />
Include jQuery script, jQueryUI script, jQueryUI style (must
maintain order of including scripts).
change the selector for datepicker to $(#date_filter_startmonthly input) because datepicker should always point to an input field.
date picker props are changed in order to allow to opt month or year.
$(document).ready(main);
function main(){
$('#date_filter_startmonthly input').datepicker({
todayHighlight: true,
format: 'yyyy-mm-dd',
orientation: 'bottom auto',
autoclose: true,
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css" rel="stylesheet"/>
<div class="form-group mb-2">
<label class="col-form-lable mb-0">Start Date:</label>
<div id="date_filter_startmonthly" class="input-group date" data-target-input="nearest">
<div data-target="#date_filter_startmonthly" data-toggle="datepicker"class="input-group datetimepicker">
<input type="text" class="form-control form-control-sm date-input" name="cb_sdate" placeholder="YYYY-MM-DD">
<div class="input-group-addon "></div>
</div>
</div>
</div>
Related
I have two datepickers made like this:
<input id="periode_eind" type="date" class="datepicker" name="periode_eind" value="#Model.PeriodeTotEnMet.ToString("dd-MM-yyyy")">
They are then converted into jQueryUI datepickers because native HTML5 datepickers don't support a date format and it needs to always be this format:
// Transform native HTML datepickers to jQuery datepickers.
$(document).ready(function () {
var datepicker = $(".datepicker");
datepicker.datepicker();
datepicker.datepicker('option', 'dateFormat', "dd-MM-yyyy");
});
I've also tried passing the dateFormat in the constructor as a property, but that doesn't help and it might be too late as the datepickers have already been initialized by the HTML.
Since the value passed to the datepicker is in the wrong format, it produces the following error:
The specified value "01-05-2016" does not conform to the required
format, "yyyy-MM-dd".
I've also tried to transform to jQuery right away, instead of at the document ready event, but that doesn't help. The jQuery documentation doesn't provide an example with context of how a datepicker is implemented.
How can the datepicker be implemented?
Add the call to datepicker() directly to the class selector and then use the dateFormat option to specify your date format.
Example
$( ".shortYear" ).datepicker({
dateFormat: 'dd-MM-y'
});
$( ".longYear" ).datepicker({
dateFormat: 'dd-MM-yy'
});
$( ".allNumbers" ).datepicker({
dateFormat: 'dd-mm-yy'
});
$( ".yourRequiredFormat" ).datepicker({
dateFormat: 'yy-MM-dd'
});
/*
Simple utility classes for example styling
*/
.bordered{
border: 1px solid black;
}
.padded{
padding: 5px;
}
label span
{
color: red;
font-size: 14px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet"/>
<div class="bordered">
<div class="padded">
<label> Date (dd-MM-y)</label>
<br />
<input type="text" class="shortYear" size="30" >
</div>
</div>
<br />
<div class="bordered">
<div class="padded">
<label> Date (dd-MM-yy)</label>
<br />
<input type="text" class="longYear" size="30" >
</div>
</div>
<br />
<div class="bordered">
<div class="padded">
<label> Date (dd-mm-yy)</label>
<br />
<input type="text" class="allNumbers" size="30" >
</div>
</div>
<br />
<div class="bordered">
<div class="padded">
<label><span>* Your Required Format</span><br /> Date (yy-MM-dd)</label>
<br />
<input type="text" class="yourRequiredFormat" size="30" >
</div>
</div>
<input> type should also be "text" not "date"
<input id="periode_eind" type="text" class="datepicker" name="periode_eind" value="#Model.PeriodeTotEnMet.ToString("dd-MM-yyyy")">
I wanted to show the current up-to-date datetimepicker, but it only shows a few hour late from the current time. For now, I am using the endDate to restrict the limit to 'today'.
I am using malot datetimepicker from here: https://www.malot.fr/bootstrap-datetimepicker/
HTML
<div class="form-group col-xs-12 col-sm-6 col-md-6 col-lg-6">
<label for="dtp_input4" class="control-label">Start Time</label>
<div class="input-group date form_starttime" data-date="" data-date-format="dd/MM/yyyy HH:ii" data-link-field="dtp_input1">
<input class="form-control" size="16" type="text" value="" readonly data-ng-model="startDT">
<span class="input-group-addon"><span class="fa fa-calendar"></span></span>
<span class="input-group-addon"><span class="fa fa-times" id="remove"></span></span>
</div>
<br/>
</div>
JS
$('.form_starttime').datetimepicker({
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
format: 'yyyy.mm.dd HH:ii',
pickerPosition: "bottom-left",
endDate: '+0d',
})
.on('changeDate', function (selected) {
var minDate = new Date(selected.date.valueOf());
$('.form_endtime').datetimepicker('setStartDate', minDate);
});
Image
The current time at the moment I posted this was 1548, but it only shows up till 0700.
var yourTimeZone = = moment.tz("2016-10-07 12:00", "Asia/Ulaanbaatar");
yourTimeZone.format() // returns "2016-10-07T12:00:00+08:00"
You have to pass startDate:2016-10-07T12:00:00+08:00 property with your current time-zone time.
Please change "Asia/Ulaanbaatar" to your country
check here for timezone
I suppose you have error in format it should be yyyy-mm-dd hh:ii
this is how the examples are defined in documentation and format is given as
<div class="input-append date form_datetime">
<input size="16" type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<script type="text/javascript">
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii"
});
</script>
I believe your format in html and script is not matching as it is working fine for me also, try changing that I would suggest.
In the given fiddle here
There are two date inputs 'from' and 'to'
In which I want to disable future date in 'From' only but when i apply endDate code in applies to both 'from' and 'to' date.
I want to apply 'endDate' that is I want to disable future date in 'from' field only and not in 'to' date field.
I picked this datepicker from thiss site
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
$('.input-daterange').datepicker({
autoclose: true,
endDate: '+0d'
});
For any query please comment below
Since you're using the date range functionality and you can't initialize the date pickers separately, you can utilize the built-in setEndDate method to set the endDate property of a specific input element.
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
In your case, you would initialize the date range picker on both input fields (like you were already doing) and then target the specific input element by its attribute and use the setEndDate method:
Updated Example
$('.input-daterange').datepicker({
autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
Full Snippet:
$('.input-daterange').datepicker({
autoclose: true
});
$('.input-daterange [name="start"]').datepicker('setEndDate', '+0d');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
<link href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"/>
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
Assign an id to each input field:
Then instead of $('.input-daterange') use $('#startdate') and $('#enddate') and only include endDate: '+0d' where you need it.
You can use the input name attribute as a selector, and set the attributes for each instance of the datepicker.
// HTML
<div class="input-daterange input-group" id="datepicker">
<span class="input-group-addon">from</span>
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
// JS
$('input[name=start]').datepicker({
autoclose: true,
endDate: '+0d'
});
$('input[name=end]').datepicker({
autoclose: true
});
Try this:
$(".datepicker").datepicker({maxDate: '0'});
Based on select in datetimepicker I would like to set three dates. First is selected date + 28days, second selected date + 56days and third selected date + 84days. If user set a new date, script must do new calculation and set the this new dates in fields: datummeritve2, datummeritve3, datummeritve5.
I've seen some similar questions, but mostly it's not used datetimepicker and also with the answers there were writen I was not able to make it work.
In short.. When user picks a date, other fields must be filled with new calculated dates.
This is my code.
HTML
<div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class='input-group date' id=''>
<p><span class="napis">Pick a date</span></p>
<input style="width: 280px;" type='text' class="form-control" id="datummeritve1" name="datummeritve1" placeholder="Datum meritve" value=""/>
</div>
</div>
<input style="width: 280px;" type='text' class="form-control" id="datummeritve2" name="datummeritve2" placeholder="Datum meritve" value=""/>
<input style="width: 280px;" type='text' class="form-control" id="datummeritve3" name="datummeritve3" placeholder="Datum meritve" value=""/>
<input style="width: 280px;" type='text' class="form-control" id="datummeritve4" name="datummeritve4" placeholder="Datum meritve" value=""/>
JS
$('#datummeritve1').datetimepicker({
onShow: function(ct){
this.setOptions({
minDate: new Date()
});
},
format: 'DD.MM.YYYY',
formatDate: 'DD.MM.YYYY',
datepicker: true,
timepicker: false
});
For my answer you have to include moment.js as well. You also have to set "disabled" for the input fields #datummeritve2, #datummeritve3 and #datummeritve4. NOTE: The user still can easily change them. You also have to check the dateDifference serverside
// Init the non clickable
$('#datummeritve2, #datummeritve3, #datummeritve4').datetimepicker({
defaultDate: new Date(),
locale:moment.locale('de-at'),
format: 'DD.MM.YYYY',
ignoreReadonly:false
});
// Init the main clickable
$('#datummeritve1').datetimepicker({
defaultDate: new Date(),
locale:moment.locale('de-at'),
format: 'DD.MM.YYYY',
ignoreReadonly:false
}).on("dp.change",function(e){
// Fetch the current date
var date28 = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY HH:mm").toDate());
var date56 = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY HH:mm").toDate());
var date84 = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY HH:mm").toDate());
// Add the days to the dates
date28.setDate(date28.getDate()+28);
date56.setDate(date56.getDate()+56);
date84.setDate(date84.getDate()+84);
// set it
$("#datummeritve2").data("DateTimePicker").date(date28);
$("#datummeritve3").data("DateTimePicker").date(date56);
$("#datummeritve4").data("DateTimePicker").date(date84);
});
Jsfiddle: https://jsfiddle.net/rwj2Lmh2/1/
I've managed to make it work (at least I think I did ;))..
Here is my code now. Maybe it can help someone..
JS
$('#datummeritve1').datetimepicker({
onShow: function(ct){
this.setOptions({
minDate: new Date()
});
},
format: 'DD.MM.YYYY',
formatDate: 'DD.MM.YYYY',
datepicker: true,
timepicker: false
});
$("#datummeritve1").change(function(){
var newEnd = new Date(moment($("#datummeritve1").val(), "DD.MM.YYYY").toDate());
newEnd.setDate(newEnd.getDate()+28);
$("#datummeritve2").val(moment(newEnd).format('DD.MM.YYYY'));
newEnd.setDate(newEnd.getDate()+28);
$("#datummeritve3").val(moment(newEnd).format('DD.MM.YYYY'));
newEnd.setDate(newEnd.getDate()+28);
$("#datummeritve4").val(moment(newEnd).format('DD.MM.YYYY'));
});
HTML
<input style="width: 280px;" type='text' class="form-control" id="datummeritve1" name="datummeritve1" placeholder="Datum meritve" value=""/>
<input readonly style="width: 280px;" name="datummeritve2" type="text" id="datummeritve2" class="form-control" placeholder="" value="">
<input readonly style="width: 280px;" name="datummeritve3" type="text" id="datummeritve3" class="form-control" placeholder="" value="">
<input readonly style="width: 280px;" name="datummeritve4" type="text" id="datummeritve4" class="form-control" placeholder="" value="">
Summary: Based on selection of the date (datetimepicker). Text fields (readonly) are filled with generated dates.
I am working on a project where there are two date fields available that will be used for searching between the dates. What I want to do is when a user chooses a date in the FROM field then all the previous dates in the TO field should be disabled.
Example:
FROM: 2016-03-28
To : 2016-04-10
Here in the above example suppose I want to search between these two given dates then while choosing a date from the date picker in the TO field all the dates till 2016-03-28 should be disabled and the user must not be able to select them. Please help.
jQuery date picker:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="css/jquery-1.10.1.min.js"></script>
<script src="css/jquery-ui.js"></script>
<script>
$(function(){
$('.date').datepicker({ format: 'yyyy-mm-dd'});
});
</script>
HTML:
<div class="form-group col-sm-2">
<label>From</label>
<input type="text" name="fdate" autocomplete="off" class="form-control date" style="height:25px;" value="<?php echo $fdate; ?>" />
</div>
<div class="form-group col-sm-2">
<label>To</label>
<input type="text" name="tdate" autocomplete="off" class="form-control date" style="height:25px;" value="<?php echo $tdate; ?>" />
</div>
You can achieve it like this:
$(function(){
var dateObject;
$("input[name='fdate']").datepicker({
format: 'yyyy-mm-dd',
onSelect: function(dateText, inst) {
dateObject = $(this).datepicker({dateFormat: 'yyyy-mm-dd'}).val();
$("input[name='tdate']").datepicker({
format: 'yyyy-mm-dd',
minDate: new Date(dateObject),
});
}
});
});
Here is the working fiddle