Develop Reference

Xeditable Date input configuration to accept dates before 1970

Using x-editable JS plugin I added a new date type input in my form (Combodate (date) element), everything looks fine, but the input accepts the only date starting from 1/1/1970. I need to change this configuration because the birthdate of my customer can be previous than 1970.
Unfortunately in the x-editable documentation (link) there isn't any configuration related to the date range.
Below my HTML code (with PHP data):
<a href="#" id="dipendente-datanascita"
data-type="combodate"
data-value="<?php echo $dipendente["datanascita"]; ?>"
data-format="YYYY-MM-DD"
data-viewformat="DD/MM/YYYY"
data-template="DD/MM/YYYY"
data-pk="1"
data-title="Select Date of birth"
data-url="api/update-dipendente.php?id=<?php echo $id_dipendente; ?>"
class="editable editable-click" style="">
<?php echo $utility->formatDate($dipendente["datanascita"]); ?>
</a>
and the JS part:
$('#dipendente-datanascita').editable({
prepend: "Non selezionato",
mode: 'inline',
inputclass: 'form-control-sm'
});
Can anyone help with this? thank you in advance.

The year 1970 is a configuration that can be edit changing the file bootstrap-editable.js that is part of the library (remember to also generate the minified js if the app uses it). Here an example of the configuration:
$.fn.combodate.defaults = {
//in this format value stored in original input
format: 'DD-MM-YYYY HH:mm',
//in this format items in dropdowns are displayed
template: 'D / MMM / YYYY H : mm',
//initial value, can be `new Date()`
value: null,
minYear: 1970,
maxYear: 2015,
yearDescending: true,
minuteStep: 5,
secondStep: 1,
firstItem: 'empty', //'name', 'empty', 'none'
errorClass: null,
roundTime: true, // whether to round minutes and seconds if step > 1
smartDays: false // whether days in combo depend on selected month: 31, 30, 28
};
Change the minYear value and it will work!!

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/

angular material (md-datepicker) - how to set different date format to different datepicker in one page

I am using angular material (md-datepicker). My requirement is to set different date format based on selection. i.e. if user select 'daily', datepicker would show 'MM/DD/YYYY'. If user select 'monthly' then datepicker should show 'MMM YYYY' and for 'hourly', it should be 'MM/DD/YYYY hh:mm'
https://plnkr.co/edit/S4mnF7?p=preview
Is it feasible using md-datepicker? I do not see any option to set format property in HTML. Saw the documentation of $mdDateLocaleProvider. But it does not give option to set different format to different controls.

You can use $mdDateLocaleProvider , the formatDate function to set the date format: Function to format a date object to a string. The datepicker directive also provides the time zone, if it was specified.
And in the datepicker directive, you can use the md-date-locale attribute: This Allows for the values from the $mdDateLocaleProvider to be ovewritten on a per-element basis (e.g. msgOpenCalendar can be overwritten with md-date-locale="{ msgOpenCalendar: 'Open a special calendar' }").
something like:
<md-datepicker ng-model="myDate" md-date-locale="mylocale"></md-datepicker>
<md-datepicker ng-model="myOtherDate" md-date-locale="myOtherlocale"></md-datepicker>
and in controller
$scope.mylocale = {
formatDate: function(date) {
var m = moment(date);
return m.isValid() ? m.format('YYYY') : '';
}
};
$scope.myOtherlocale = {
formatDate: function(date) {
var m = moment(date);
return m.isValid() ? m.format('MMMM YYYY') : '';
}
};
https://embed.plnkr.co/u9wY3rvtpmXdQ7zrbMpB/

How to create multiple bootstrap datetime picker while doing itereation

Hi guys am iterating the database records in jsp using iterator. Here per each iteration text,startdatetime picker and end datetime picker. i have used date time picker with id creates a problem. I dont know how many rows i gonna iterate how can i solve this?
In fiddle you may suggest me like this run one for loop with 5 iteration with in the first column some simple text second column start datetime picker and third column end datetime picker
<s:iterator value="%{#session.subjectlist}" status="resultstatus">
<td><s:property value="#resultstatus.count" /></td>(this is serial number like 1,2,3 etc used as id in datetime picker)
<td><s:property /></td>(this is a simple text)
<td>
<div class='input-group date' id="<s:property value="#resultstatus.count"/>">
<input type='text' name="examDate1" class="form-control" readonly="readonly" onClick="activateDatePicker()" />
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar">/span></span>
</div>
</td>
<script type="text/javascript">
$(document).ready(function() {
$(function() {
$('#datetimepicker7').datetimepicker({
format : 'yyyy-mm-dd hh:ii',
startDate : new Date(),
autoclose : 1
}).on('changeDate',function(selected) {
var minDate = new Date(selected.date.valueOf());
$('#datetimepicker8').datetimepicker('setStartDate',minDate);
$('#adminTimeTableForm').bootstrapValidator(
'revalidateField', 'examDate1');
});
$('#datetimepicker8').datetimepicker({
format : 'yyyy-mm-dd hh:ii',
startDate : new Date(),
autoclose : 1
}).on('changeDate',function(selected) {
var minDate = new Date(selected.date.valueOf());
$('#datetimepicker7').datetimepicker('setEndDate', minDate);
$('#adminTimeTableForm').bootstrapValidator('revalidateField', 'examDate2');
});
});
});
</script>

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.