Look to just copy the Year to the 2nd input - not the entire date. Here is the HTML so 1st input - date format is correct. 2nd input - date format needs to be just the year and not the whole date.
look here
http://jsfiddle.net/xyp7khfe/13/
<input id="sdate" />
<input id="edate" />
and here is the JQUERY
$('#sdate').datepicker({
dateFormat: 'dd-M-yy',
changeMonth: false,
changeYear: true,
firstDay: 1,
onSelect: function () {
$('#edate').val(this.value);
}
});
Instead of updating the value with the .val() method, you could use the setDate method to update the value while taking the dateFormat property value into consideration:
$('#edate').datepicker('setDate', new Date(this.value));
Updated Example
$('#sdate').datepicker({
dateFormat: 'dd-M-yy',
changeMonth: false,
changeYear: true,
firstDay: 1,
onSelect: function () {
$('#edate').datepicker('setDate', new Date(this.value));
}
});
Alternatively, you can create a date based on the value and then use the .getFullYear() method:
$('#edate').val(new Date(this.value).getFullYear());
Updated Example
$('#sdate').datepicker({
dateFormat: 'dd-M-yy',
changeMonth: false,
changeYear: true,
firstDay: 1,
onSelect: function() {
$('#edate').val(new Date(this.value).getFullYear());
}
});
Related
Current code:
function validateInput() {
console.log($(this).val())
}
$("#element")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function() {
validate.validateInput()
}
})
Outcome/Issue:
When I do this, I am getting nothing, even if I pick any date on the datepicker. I want to be able to get the current selected value if selected or null if not. Am I doing this correctly?
You should pass this to the function so that you can refer that inside the function to access the value. Also, not sure why you are using validate in validate.validateInput():
function validateInput(el){
console.log($(el).val());
}
$("#element")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function() {
validateInput(this);
}
});
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<p>Date: <input type="text" id="element"></p>
Pass it as an ordinary argument.
function validateInput(el) {
console.log($(el).val())
}
$("#element")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function() {
validateInput(this)
}
})
Well u could do like this:
function validateInput(element){
console.log($(element).val())
}
and call
$("#element")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function() {
validate.validateInput('#element');
}
});
or dinamically
$(".date_input")
.datepicker({
todayHighlight: true,
weekStart: 0,
format: "yyyy-mm-dd",
onClose: function(e) {
validate.validateInput(e.target);
}
});
Providing validate.validateInput() doesn't need this to refer to validate (eg to call other validate methods), then you can use Array.prototype.bind() to control the interpretation of this, without needing to pass a parameter.
function validateInput() {
console.log($(this).val());
}
$("#element").datepicker({
'todayHighlight': true,
'weekStart': 0,
'format': "yyyy-mm-dd",
'onClose': validate.validateInput.bind(this)
});
I'm using datetimepicker and its working fine, but I want to translate the language to "pl". But its not working with none of the options below:
$( ".input-group.date" ).datetimepicker({
format: "dd MM yyyy - hh:ii",
autoclose: true,
locale: 'pl'
});
$( ".input-group.date" ).datetimepicker({
format: "dd MM yyyy - hh:ii",
autoclose: true,
language: 'pl'
});
$( ".input-group.date" ).datetimepicker({
format: "dd MM yyyy - hh:ii",
autoclose: true,
language: 'pl-PL'
});
It appears always in "en". Do you know why is not working?
According to the documentation the method of setting the locale has changed. Use $.datetimepicker.setLocale('pl'); before instantiation instead of setting an option value.
With an input of <input class="input-group date" type="text"> you can instantiate like this:
$.datetimepicker.setLocale('pl');
$('.input-group.date').datetimepicker({
closeOnDateSelect: true,
format: 'd.m.Y H:i'
});
Note that I had to use the jquery.datetimepicker.full.min.js version of the plugin script file to avoid a noted issue.
I'm using bootstrap in my application web.
I created a method that initialize all input of type date with a class called form_datetime:
function initDatepicker(){
$(".form_datetime").datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: "it",
todayHighlight: true,
autoclose: true,
orientation:"auto"
});
}
The input html:
<input name="date" class="form-control form_datetime date"
type="text"
ng-model="date"
required >
Here the issue is that when i pick the field of date , the input will be empty and i losed the value that is setted before (value getted from dataBase).
The date value comming in format string "dd/mm/yyyy".
How can i get the date in the calender of the actual date of the input?
If you use AngularJS Material Datepicker and the moment plugin, you can force that format with
.config(function($mdDateLocaleProvider) {
$mdDateLocaleProvider.formatDate = function(date) {
return moment(date).format('DD/MM/YYYY');
};
$mdDateLocaleProvider.parseDate = function(dateString) {
var m = moment(dateString, 'DD/MM/YYYY', true);
return m.isValid() ? m.toDate() : new Date(NaN);
};
});
See it implemented.
The solution is in the followin link
function initDatepicker(){
$(".form_datetime").datepicker({
format: "dd/mm/yyyy",
weekStart: 1,
language: "it",
todayHighlight: true,
autoclose: true,
orientation:"auto",
forceParse: false //
});
}
I'm using date and datetime functions for my textfields, when I click at textfield it shows the calender and I select date and datetime from calender and my functions are
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true,
format: "mm/dd/yyyy",
startDate: new Date()
});
$(".datetime-picker").datetimepicker({
autoclose: true,
isRTL: Metronic.isRTL(),
format: "mm/dd/yyyy - hh:ii",
pickerPosition: (Metronic.isRTL() ? "bottom-right" : "bottom-left")
});
What I want is when I load my page the values set by automatically current date and datetime. I search about these functions but cannot set default values of current date and datetime. I also try defaultdate: new Date() OR defaultdate: '03/09/2015' but didn't work for me. How could I do this?
I've done this but my programme is not working properly I don't know why is this happening?
Use setDate as shown below, (this code should be on the document ready event)
$('.date-picker').datepicker({
rtl: Metronic.isRTL(),
autoclose: true,
format: "mm/dd/yyyy"
}).datepicker("setDate", new Date());
Sample from my code:
Display current Date:
buildLogDateToTxt.datepicker({
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
onClose: function (dateText, inst) {
this.fixFocusIE = true;
this.focus();
}
}).datepicker("setDate", new Date());
Set previous date:
buildLogDateFromTxt.datepicker({
showOn: "button",
buttonImage: "images/calendar.png",
buttonImageOnly: true,
onClose: function (dateText, inst) {
this.fixFocusIE = true;
this.focus();
}
}).datepicker("setDate", "-7");
I want to filtering the date range base when page loads and display it on the page.
the date is being autofill, my problem is is not able to filter it when using document ready in JQUERY, any thought ?
code:
<label for="from">Start date:</label>
<input type="text" style="width: 196px;" id="from" />
<label for="to">End date:</label>
<input type="text" style="width: 196px;" id="to" />
//function for datepicker and date range
$(function() {
$("#from").datepicker({
defaultDate: "-3w",
minDate: "-3w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function(selectedDate) {
$("#to").datepicker("option", "minDate", selectedDate);
}
}).datepicker('setDate', '-3w');
$("#to").datepicker({
defaultDate: "+1w",
maxDate: "currentText",
changeMonth: true,
numberOfMonths: 1,
onSelect: function(selectedDate) {
$("#from").datepicker("option", "maxDate", selectedDate);
}
}).datepicker('setDate', '+1w');
});
function attemping....to fitler when pages load
$(document).ready(function () {
$filter = new Array();
$from = new Date(Date.parse($("#from").datepicker('setDate', '-3w')));
$to = new Date(Date.parse($("#to").datepicker('setDate', 'currentText')));
$to = $to.setDate($to.getDate() + 1);
if ($("#from").val()) {
$filter.push({ field: "DateEnrolled", operator: "islessthanorequalto", value: $to });
}
if ($("#to").val()) {
$filter.push({ field: "DateEnrolled", operator: "isgreaterthanorequalto", value: $from });
}
var grid = $("#grid").data("kendoGrid");
grid.dataSource.load($filter);
});
});
Try
grid.dataSource.filter($filter)
instead of
grid.dataSource.load($filter)
Updated 11.02.2012
Here's a fiddle with what you're attempting to do.
I made the filter take action on a button press instead of PageLoad so that you can see the data before and after the filter action.
You have to create a logical "and" filter object and add your filters to that.
1) Create the "and" filter object
var customFilter = {
logic: "and",
filters: []
};
2) Add the filters to the object
customFilter.filters.push({
field: "DOB",
operator: "isgreaterthanorequalto",
value: date1
});
customFilter.filters.push({
field: "DOB",
operator: "islessthanorequalto",
value: date2
});
3) Set the filter on the grid's data source
$("#testGrid").data("kendoGrid").dataSource.filter[customFilter]);
Sorry for the first answer being so lazy. I was in a rush that day and just tried to get something up to help. Hope this helps out better.