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");
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.
Am having issue where if someone enters an invalid date manually such as "%/4/12" into the datepicker it will autoformat it to "04/12/2017" or if you enter "12/123/20258" it formats to ‘12/12/2025 which I don't want. Is there any way to disable this? Here is what I already have:
$(function () {
$('#new-effective-date').datetimepicker({
format: 'MM/DD/YYYY',
defaultDate: false,
useCurrent: false,
keepInvalid: true
});
});
Add:
useStrict
http://eonasdan.github.io/bootstrap-datetimepicker/Options/#usestrict
and Change your codes to this:
$(function () {
$('#new-effective-date').datetimepicker({
format: 'MM/DD/YYYY',
useStrict: true,
keepInvalid: true,
});
});
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 //
});
}
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());
}
});