Develop Reference

Trying to set date through air-date-picker

I am trying to add date picker but I am facing issue that Air DatePicker is showing date in both English and One more language I guess Russian
//Here it is code I am using for this
<input required type="text" class="form-control datepicker-here" id="textSchorOfficeOrderDate" autocomplete="off" data-language='en' data-date-format="yyyy-mm-dd">
//And Function for Date
$("#textSchorOfficeOrderDate").datepicker({
autoClose: true,
clearButton: true,
onSelect: function (formattedDate, date, inst) {
self.currentDate = date;
//It does't effct if I comment or not below line
self.onChangeMonthAndYear();
}
})
I want just English Language Date

Add language option in your script.I hope it will works for you.
$("#textSchorOfficeOrderDate").datepicker({
autoClose: true,
clearButton: true,
language: 'en', //add this line
onSelect: function (formattedDate, date, inst) {
self.currentDate = date;
//It does't effct if I comment or not below line
self.onChangeMonthAndYear();
}
})
This is ref link: http://t1m0n.name/air-datepicker/docs/

How to have a dynamic maximum end date in Bootstrap Date Picker

I am using the following date picker on my website for a start and end date selection:
https://bootstrap-datepicker.readthedocs.org/en/latest/index.html
The rules are:
start date can be between today and + 30 days, no more
end date can be no more than 1 year after the selected start date
So when the form loads, I've set the endDate option to "+1y -1d" which works great. But if the customer picks a start date of +30 days for example, I need the endDate option on the second field to extend to "current start date +1y -1d" again.
I've started the code but really not sure how to acheive this:
<script type="text/javascript">
$(function() {
$(".startdate").datepicker({
format: 'd MM yyyy',
startDate: '+0d',
endDate: '+30d',
autoclose: true,
startView: 0,
minViewMode: 0,
todayHighlight: true,
orientation: "top"
});
$(".enddate").datepicker({
format: 'd MM yyyy',
startDate: '+1d',
endDate: '+1y -1d',
autoclose: true,
startView: 0,
minViewMode: 0,
todayHighlight: true,
orientation: "top"
});
$("#startdate").change(function() {
var startdate = new Date ( $("#startdate").val() ) ;
//alert(startdate);
var newendatemaximum;
$(".enddate").datepicker({
endDate: ???????
});
});
});
</script>
Work In Progress Solution:
$(".startdate").change(function() {
//alert("start date change");
var newendatemaximum = new Date ( $(".startdate").val() ) ;
newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
alert(newendatemaximum);
$(".enddate").datepicker("option", "endDate", newendatemaximum);
});

You don't have to use json to set datepicker options. You can set them directly. Once you have the new max date that you want to use as a javascript date, you can just set that option directly:
$("#startdate").change(function() {
var newendatemaximum = new Date ( $("#startdate").val() ) ;
newendatemaximum.setYear(newendatemaximum.getFullYear() + 1);
$(".enddate").datepicker("option", "endDate", newendatemaximum);
});

Datepicker change date value and formatting rails 4

I've made form to change date or city, but datepicker doesn't work properly. Here is link: http://leszczyna.wzks.uj.edu.pl/12_stolarski/events_for_seniors/pl/events?utf8=%E2%9C%93&search=Krak%C3%B3w&start_date=11-06-2015
Problem is with datepicker, when you click on it, it changes date to another format and year is set to 1911.
Here is my js:
$('document').ready(function() {
if ($('body.events').length) {
/* Datepicker for changing date in events */
$('.date').datepicker({
'language': "pl",
'todayHighlight': true,
'format': 'dd-mm-yyyy',
'autoclose': true
})
}
And part of my erb file
<div class="form-group">
<label class="sr-only" for="date">Email</label>
<%= text_field_tag :start_date,
params[:start_date],
placeholder: 'Kliknij, aby wybrać datę',
class: 'form-control date',
:data => {
provide: 'datepicker'
}
%>
</div>

You have kept your format as dd-mm-yyyy, but your param :start_date holds value in wrong order. If you want to set come default date, I will suggest you to use defaultViewDate option. Your calendar dates (which opens up initially) are disabled, that's why it selects some 1911 year date. try using startDate and endDate option. I hope it will fix it.

setting minDate in datepicker in Rails

I need to apply minDate attribute to the datepicker in Rails App as today's date.
In _admin_controls.html.erb
<%= f.input :end_date, wrapper: :append do %>
<div id="datepicker" class="datepicker input-group edit-left">
<%= f.text_field :end_date, :class => "datetime form-control" %>
application.js contains
jQuery(document).on('focus', 'input.datetime', function() {
opts = {format: 'M dd, yyyy', autoclose: true};
jQuery(this).datepicker(opts);
jQuery(".datepicker").css("z-index",10000);
});
What should be the javascript to do so only for _admin_controls.html.erb?

If You are using Jquery then you can set the date like this :
// If you want to set a date then assign it to a variable or create a function and call that function directly.
var currentDate = new Date();
$("#mydate").datepicker().datepicker("setDate", new Date());

I have been able to solve the problem.
In application.js, I removed the code related to datepicker and its librariies and created a new file datepicker.js
datepicker.js contains
/* bootstrap datepicker */
//= require bootstrap-datepicker/core
//= require bootstrap-datepicker/locales/bootstrap-datepicker.es
jQuery(document).on('focus', 'input.datetime', function() {
opts = {format: 'M dd, yyyy', autoclose: true};
jQuery(this).datepicker(opts);
});
In application.js
//= require datepicker
In _admin_controls.html.erb,
<%= f.input :end_date, wrapper: :append do %>
<div id="datepicker" class="datepicker input-group edit-left">
<%= f.text_field :end_date, :class => "datetime form-control", :'data-date-start-date' => Date.current.strftime('%m/%d/%Y') %>
And this disables backdate selection for particularly _admin_controls datepicker. :)

This should do it
$('#start_date').datepicker({
minDate: 0,
onSelect: function (selected) {
$("#end_date").datepicker("option", "minDate", selected)
}
});
Where end date being the one in the other box which allows to select the max one .

You can set the rails input field to the following:
<%= f.datetime_local_field(:end_date, min: Time.now().to_s.slice(0,10) ) %>

Put age restriction of 18 years - Bootstrap Datepicker

I am using Bootstrap Datepicker.
I want to put an Age Restriction of 18 Years.
Dates less than Age 18 Years from current date should be disabled.
Here is my Fiddle:
http://jsfiddle.net/kGGCZ/17/
JS:
$(function()
{
$('#datepicker').datepicker(
{
viewMode: "years",
defaultDate: '-2yr',
}
);
});

Simply put endDate: '-18y' if you only want to allow user whose age is 18 years and above.
<input type="text" class="datepicker">
<script>
$('.datepicker').datepicker({
endDate: '-18y'
});
</script>
Working Example: https://jsfiddle.net/sparshturkane/w46euf5q/1/
Please refer Bootstrap Date picker docs for more options and instructions

This is the JavaScript you are after:
var dt = new Date();
dt.setFullYear(new Date().getFullYear()-18);
$('#datepicker').datepicker(
{
viewMode: "years",
endDate : dt
}
);
But your fiddle is using coffeescript so here is the same in coffee:
dt = new Date()
dt.setFullYear new Date().getFullYear() - 18
$("#datepicker").datepicker
viewMode: "years"
endDate: dt
working example: http://jsfiddle.net/Ln5x6/1/

You can use yearRange, to let users choose only years which comes under 18+ from current year. Like,
jQuery('#dateob').datepicker({
changeMonth: true,
changeYear: true,
yearRange: '-110:-18',
showButtonPanel: true
});