Couldn't find any answers on related threads or on the flatpickr documentation so posting here hoping for a miracle.
I'm using flatpickr and have to set a minDate based on a variable.
var $date = $('#calendar').data('date');
console.log ($date); // this will return the correct value
$("#calendar").flatpickr( {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Ymd",
minDate: $date ,
maxDate: new Date().fp_incr(60), // 60 days from now
disableMobile: "true",
});
And on my page I have
<input id="calendar" placeholder="Pick a date" data-date="{{ "now"|date("Ymd") }}" >
I'm using twig so my console.log will return today's date but it has no impact on the minDate.
In the future the minDate will not be today's date, I just used it to test.
In an older version of flatpickr you could set these types of variables directly in instead of in the js code, but it seems like it's unfortunately not in use anymore.
According to flatpickr documentation
Date Strings, which must match the dateFormat chronologically
YYYY-MM-DD HH:MM
So, "now"|date("Ymd") is invalid, try "now"|date("Y-m-d")
https://flatpickr.js.org/examples/#supplying-dates-for-flatpickr
DYNAMIC SOLUTION
We can set a minimum date for flatpickr dynamically
Let's say we have a shipping date field and we do not want it to be earlier than the payment date
flatpickr("#shipping_date", {});
<div class="form-group row">
<label for="shipping_date" class="col-form-label text-right">Shipping Date</label>
<input type="text" class="form-control" name="shipping_date" id="shipping_date" value="" data-toggle="flatpickr">
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
We can set a minimum date for shipping date field when document loaded like that
flatpickr("#shipping_date", {});
var payment_date = '2022-08-06';
$(document).ready(function(){
const element = document.querySelector("input[name=shipping_date]");
element._flatpickr.config.onOpen.push(function(dateObj, dateString, flatpickrInstance) {
var minimumDate = moment(payment_date).format('YYYY-MM-DD');//e.x. payment_date -> 2022-08-06
var minimumDateVars = minimumDate.split('-');
flatpickrInstance.set('minDate', new Date(parseInt(minimumDateVars[0]), parseInt(minimumDateVars[1]) - 1, parseInt(minimumDateVars[2])));
});
});
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<div class="form-group row">
<label for="shipping_date" class="col-form-label text-right">Shipping Date</label>
<input type="text" class="form-control" name="shipping_date" id="shipping_date" value="" data-toggle="flatpickr">
</div>
Full Code
Code Pen
Related
My html code like this :
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
My JavaScript code like this:
$(function () {
$('#datepicker').datetimepicker();
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datetimepicker').value;
console.log(value)
});
Demo like this: https://jsfiddle.net/8jpmkcr5/89/
If I click the timepicker and click the decrement hour icon, it does not work. I know it happens because this code : minDate: moment().startOf('minute').add(300, 'm'). I want the code to work only on this day. Other than today the code does not work
How can I do it?
Your #datepicker and #timepicker are unrelated, they are fully independent,
is up to you to relate them. You can dinamically set minDate of #timepicker using minDate function.
You can add a listner for dp.change event and enable or disable the minDate for the #timepicker chceking if the selected day is current day (using momentjs isSame).
You have to add minDate option also to #datepicker if you want to disable past dates, as you stated in the comments.
Here a working sample:
$(function () {
$('#datepicker').datetimepicker({
minDate: moment().startOf('day')
}).on('dp.change', function(e){
if( e.date && e.date.isSame(moment(), 'd') ){
var min = moment().startOf('minute').add(300, 'm');
$('#timepicker').data("DateTimePicker").minDate(min);
} else {
$('#timepicker').data("DateTimePicker").minDate(false);
}
});
$('#timepicker').datetimepicker({
minDate: moment().startOf('minute').add(300, 'm'),
});
});
$("#btnSubmit").click(function() {
value = document.getElementById('datepicker').value;
console.log(value)
valueTime = document.getElementById('timepicker').value;
console.log(valueTime)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.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.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='datepicker' data-date-format="DD-MM-YYYY" />
</div>
</div>
<div class='col-sm-6'>
<div class="form-group">
<input type='text' class="form-control" id='timepicker' data-date-format="HH:mm" />
</div>
</div>
</div>
</div>
<button id="btnSubmit">
Submit
</button>
Please note that, as stated before, #datepicker and #timepicker are unrelated, so with the #timepicker you are simply selecting a time, that defaults to current day (no automatic relationship with the selected day using #datepicker).
If you want to limit the input to today only, why are you trying to set a limit on the time picker? You should be setting the limit on the date picker
Starting date and ending date are same. If change starting date automatically changed end date. Here my code
<input id="startingDate" class="datePicker form-control" name="startingDate" value="14-01-2017" type="text">
<input id="endingDate" class="datepicker form-control" name="endingDate" value="" type="text">
Javascript code
$(document).on('blur', '#startingDate', function(){
var date = $(this).val();
$("#endingDate").datetimepicker({
dateFormat: "dd-mm-yy",
defaultDate: date
});
});
What is my problem and how i can solve that problem ??
if you want to have the same value in endingDate when you leave your startingDate
you can do that's
<script>
$(document).ready(function(){
$("#startingDate").blur(function (){
$("#endingDate").val($(this).val());
});
});
</script>
How do I allow only selection of Sundays on my datepicker? I did a little bit of research and came across a lot of answers stating that I need to use beforeShowDay, These are my codes:
<div class="pickaDate" style="width:25%;">
<input type='text' id="date" />
<script>
jQuery(document).ready(function() {
jQuery('#date').datepicker({
beforeShowDay: function(date){
return [date.getDay()===0];
}
});
});
</script>
</div>
I got the codes from this link but changed the input type to date because that's the only way the datepicker would appear. But I can still select all the dates.
My knowledge on this is basic at best. Help is appreciated
beforeShowDay: A function that takes a date as a parameter and must return an array with true/false indicating whether or not this date is selectable
Try this:
$("#date").datepicker({
beforeShowDay: function(date) {
return [date.getDay() === 0];
}
});
<link href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<input id="date" type="text">
Fiddle here
When user selects a date on the first field, the second field must start on the selected date, and disallow any selection of previous date. I created a fiddle for reference
http://jsfiddle.net/gfokvuxr/ and here is the code:
Thank you
<label class="form-label">Loading Date</label>
<div class="input-append success date">
<input type="text" name="loadingdate" id="dt1" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
<label class="form-label">Delivery date</label>
<div class="input-append success date">
<input type="text" name="deliverydate" id="dt2" class="span12" required >
<span class="add-on"><span class="arrow"></span><i class="fa fa-th"></i></span>
</div>
this is the JS code
$('.input-append.date').datepicker({
autoclose: true,
format: 'dd/mm/yyyy',
todayHighlight: true,
startDate: new Date()
});
Based on my reading of the API, it would be thus:
$('#loadDate').change(function(event, ui){
$('#deliverDate').datepicker( "setDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
$('#deliverDate').datepicker( "option", "minDate", (Date)($( "#loadDate" ).datepicker( "getDate" )));
});
https://jsfiddle.net/1a09hyff/1/
Give each datepicker an ID and use those to register an event listener on the first to update the second's minDate.
That said, it isn't working for some reason; I can't get any of the modification methods (including destroy) to actually work. A couple throw internal errors (I've been seeing a lot of those lately, where date.getMonth() throws getMonth is not a function etc).
I am checking the Liferay Site for Alloy UI date picker.
The problem in the given example is that there is no select option. If the DOB of my user is in 70's then the user has to click back button multiple times.
This is not a happy scenario for the user. How can I edit my AUI javascript to something like month and year option given by jquery here
I'm assuming that you are using AlloyUI 1.5 here, and so I would recommend using the DatePickerSelect component but hiding the select elements that you don't need with display: none;. Assuming that you only want a year dropdown, you could hide both the month and day dropdowns. I've created a runnable snippet example here:
AUI().use('aui-datepicker', function (A) {
var datePicker = new A.DatePickerSelect({
dayNode: '#day',
monthNode: '#month',
yearNode: '#year',
calendar: {
dateFormat: '%m/%d/%Y'
},
render: true
});
// Working around the fact that the calendar does not get updated
// when a new year is selected:
var yearNode = A.one('#year');
yearNode.on('change', function(event) {
datePicker.calendar.set('currentYear', yearNode.get('value'));
var date = datePicker.calendar.date;
datePicker.calendar.clear();
datePicker.calendar.date = date;
});
});
<script src="http://cdn.alloyui.com/1.5.1/aui/aui-min.js"></script>
<link href="http://cdn.alloyui.com/1.5.1/aui-skin-classic/css/aui-skin-classic-all-min.css" rel="stylesheet">
<div id="datePicker">
<select id="month" style="display: none;">
<option></option>
</select>
<select id="day" style="display: none;">
<option></option>
</select>
<select id="year">
<option></option>
</select>
</div>
AUI Element:
<aui:input name="dateOfBirth" cssClass="dob" id="dateOfBirth" title="Date Of Birth" placeholder="dd/mm/yyyy" readonly="true" >
Script:
$(".dob").datepicker({ dateFormat: "dd/mm/yy",minDate: new Date(), changeYear: true,changeMonth: true,yearRange: "-0:+10y", onClose: function(date, datepicker) {$(".dob").focus(); }});