We Keep Coding

How to populate two text input with different types of date using keith wood jq

I use a text input to show the date from Keith Wood datepicker jq. I'm using ('ummalqura', 'ar') as the type of date.
so far so good.
The problem is that I want to populate another text input with the equivilant date in ('gregorian', 'en').
in another word, one click on the calendar to genrate two different set of dates, one in (ummalqura) and the other in (gregorian).
any help will be appreciated.
here is the html code:
<div class="container ">
ummalqura date type: <input id="ah" class="form-control" type="text" name="datePicker">
<br>
gregorian date type: <input type="text" id="ad" >
</div>
and here is the js to the calendar datepicker in the first text input:
<script>
$("#ah").calendarsPicker({
calendar:
$.calendars.instance('ummalqura', 'ar'),
startDate: '0d',
minDate: 0,
onSelect: function (dates) {
$(this).trigger('change');
}
});
</script>

How to show always days on datepicker when is open?

I'm using eonasdan-bootstrap-datetimepicker:
<input type="text" class="form-control" ng-model="$ctrl.date" id="dateStart">
<script type="text/javascript">
$("#dateStart").datetimepicker({
format: 'ddd, D MMMM YYYY',
showTodayButton: true
});
</script>
What I want to achieve is that everytime I close the picker and reopen it I'll always have the days picker.
Right now If I'm in the "datepicker-months" and click outside, the picker will close and if I reopen it it will show the months view again, but I want the days one.
I tried with:
on('dp.show', function(e) {
$(".datepicker-days").show();
$(".datepicker-months").hide();
$(".datepicker-years").hide();
$(".datepicker-decades").hide();
});
This ways looks like it's working: if I close it during months view and reopen it I'll get the days datepicker, but if from here I click on the month again I'll get the datepicker-years..
Any help would be appreciated.
EDIT:
Code here:
http://jsfiddle.net/xrqkyypd/51/

The answer is pretty much straightforward using events and viewMode function.
You only must check that when the picker get hide then you reset his viewMode to which ever you want, in this case the days view.
$('#myDatepicker').on('dp.hide', function(e) {
$('#myDatepicker').data("DateTimePicker").viewMode('days')
});

According with documentation, you can set like this:
<div class="container">
<div class="col-sm-6" style="height:130px;">
<div class="form-group">
<div class='input-group date' id='datetimepicker9'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar">
</span>
</span>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker({
viewMode: 'years' //days, weeks etc
});
});
</script>
</div>
For more details check view mode

Disable minutes selection in Bootstrap Datetimepicker

I wan't datetimepicker to show only rounded hours and disable minutes selection. So user will be able to pick only hours, like 02:00. However I can't achieve this simple task. Here is my code (in a Laravel view):
$("#date_from").datetimepicker({
format: 'yyyy-mm-dd hh:00',
startDate: "{{date('Y-m-d')}}",
minuteStepping: 60,
autoclose: true }).on('hide', function(e) {
$("#date_to").datetimepicker(
"setStartDate", new Date($('#date_from').val())
)....
I've tried steps: 60, stepping:60, minView: 1 and others.
Still I'm getting this

Here is one example for you, i think it will help you.
jsfiddle.net/tmk0293z/7/
There is changedate event bind with a function and changes the another startdate of other field.
Thanks,
Nishit Zinzuvadiya
Here is the actual code
(HTML):
<div class="input-append date form_datetime" id="first">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<div class="input-append date form_datetime" id="second">
<input type="text" value="" readonly>
<span class="add-on"><i class="icon-th"></i></span>
</div>
<span id="selected"></span>
JS:
$(".form_datetime").datetimepicker({
format: "dd MM yyyy - hh:ii",
minView:1,
autoclose:true
});
$("#first").datetimepicker().on("changeDate", function(e){
var first = new Date(e.date.setMinutes(0));
first.setHours(first.getHours()+first.getTimezoneOffset()/60); //timezone correction
$("#second").datetimepicker('setStartDate', first);
//other = $("#first").find("input").val();
//$("#second").datetimepicker('setStartDate', other); //works also
});

see the option viewMode and format
https://eonasdan.github.io/bootstrap-datetimepicker/Options/

try using step: 60 not steps
please check this link also :click here

Contact form 7 datepicker depending on a textfield value

I've created a form with a text field showing a date with this format: dd/mm/yyyy, and then I have a datepicker.
This Contact form 7 datepicker should have a mindate depending on the textfield value.
Actually I have only this code on the datepicker, because I need only Thursday are enabled.
<script type="text/javascript">
jQuery(function($){
$("#code").datepicker({
beforeShowDay: function(date){
var day = date.getDay();
return [day == 4];
}});
});
</script>
Text field code ([showparam fecha] is a shortcode depending on an URL parameter):
<input name="date-start" id:"date-start" value="[showparam fecha]" size="40" class="wpcf7-form-control wpcf7-text" aria-required="false" aria-invalid="false" type="text" disabled>
Datepicker code:
[date* date-end id:code date-format:mm/dd/yyyy min-date:0 max-date:31/12/2017]
Image:
Front
Any idea?
Thank you so much
Luis

Why document ready does not work for kendo controls

Please try the following code for example:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<script type="text/javascript">
function DateOfBirth_Change() {
var input = document.getElementById("DateOfBirth").value;
document.getElementById("spanDateOfBirth").innerHTML = input;
}
$(document).ready(function () {
DateOfBirth_Change();
});
</script>
<input data-val="true" data-val-date="The field Date of Birth: must be a date." data-val-required="*" id="DateOfBirth" name="DateOfBirth" type="date" value="24/10/1984" />
<script>
jQuery(function(){jQuery("#DateOfBirth").kendoDatePicker({"change":DateOfBirth_Change,"format":"dd/MM/yyyy","parseFormats":["dd/MM/yyyy"],"min":new Date(1900,0,1,0,0,0,0),"max":new Date(2099,11,31,0,0,0,0)});});
</script>
<span id="spanDateOfBirth" style="padding-left: 25px;"></span>
It does not work on page load if the document ready function is defined above kendo control...But if it's below, it works fine... Why is this so?

I can see that you have set value of <input type=date.. as "24/10/1984" and which is in wrong format according to HTML5 input date type. Refer - http://www.w3schools.com/html/html5_form_input_types.asp, http://www.w3.org/TR/html5/single-page.html#dates-and-times
When in document.ready, you have invoked document.getElementById("DateOfBirth").value, it gave you blank, as input type="date" has a value in incorrect format and when that typecasted to date it got blank. See the attached example.
Definitely both way ( if you put document.ready first or last )it will work. You need to use following html markup for this.
<input data-val="true" data-val-date="The field Date of Birth: must be a date." data-val-required="*" id="DateOfBirth" name="DateOfBirth" type="date" value="1984-10-24" />
Why it worked when you put document.ready last - because, kendodatepicker made proper initialization and set correct date, and when doc.ready fired , it is able to get value and set.
Note:- document.ready() and (jQuery(){}) are same as document.ready and they execute serially, that is why it worked when you put document.ready at last code block. - jQuery - multiple $(document).ready ...?
To make sure you understand , why it does not work, i am giving following example.
function getincdate() {
alert($("#incorrect_dt").val());
}
function getcdate() {
alert($("#correct_dt").val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Incorrect date -
<input type="date" id="incorrect_dt" value="24/10/1984" />
<input type="button" value="Get inccorect date" onclick="getincdate()" />
<br />
you can see above, value is not set here, but with .kendodatepicker, it worked, but after you do .kendo...
<br/>
Correct date-
<input type="date" id="correct_dt" value="1984-10-24" />
<input type="button" value="Get correct date" onclick="getcdate()" />