I have a date field in my application. By clicking it, a calendar appears. So after selecting a date, the date field must be shown as 'YYYY-MM-DD' but it shows as 'MM-DD-YYYY'.
<div class="control-group">
<label class="control-label" for="from">From</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="startdate" name="startdate" type="date">
</div>
</div>
<div class="control-group">
<label class="control-label" for="to">To</label>
<div class="input-group " >
<span class="add-on input-group-addon"><i class="fa fa-calendar"></i></span>
<input id="enddate" name="enddate" type="date">
</div>
</div>
<script type="text/javascript">
$(function () {
$('#startdate,#enddate').datepicker({dateFormat: "yyyy-mm-dd"});
});
</script>
Change the yyyy to yy. Here you have the doc http://api.jqueryui.com/datepicker/#utility-formatDate
In my experience format of the date depends on language which set for browser.
In browser js console you can see it with
navigator.languages
Hope it helps.
Related
I am trying to display age on the text field when I change the date picker. When I choose a date the value doesn't show up on the age text field. How can I display the age when I pick a date? Is there a better way of doing this?
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
$(document).ready(function() {
$(document).on('change', '.birthDate', function() {
var a = moment($(this).val(), "MM/DD/YYYY").month(0).from(moment().month(0));
$('#age').val(a);
});
})
You have a couple of issues. Firstly, the element has no birthDate class, it's an id. As such the selector needs to be #birthDate, not .birthDate.
Secondly, the format of the date will depend on the user's locale. For example, mine displays in YYYY-MM-DD format. As such your explicit instruction to momentJS to parse the date in DD/MM/YYYY format caused it to be read incorrectly. You're better off not specifying the format and letting momentJS determine for itself.
With those issues addressed, try this:
jQuery($ => {
$(document).on('change', '#birthDate', function() {
var a = moment($(this).val()).month(0).from(moment().month(0));
$('#age').val(a);
});
})
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-id-card-o"></i> </span>
</div>
<input name="age" class="form-control" placeholder="Age" type="text" id="age">
</div>
<div class="form-group input-group">
<div class="input-group-prepend">
<span class="input-group-text"> <i class="fa fa-birthday-cake"></i> </span>
</div>
<input name="birthDate" class="form-control" type="date" id="birthDate">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>
Here are the code for enabling datepicket to work in firefox
<script src="js/vendor/jquery-3.2.1.min.js"></script>
<script src="js/vendor/modernizr-custom.js"></script>
<script type="text/javascript">
var datefield=document.createElement("input");
datefield.setAttribute("type", "date");
if (datefield.type!=="date"){ //if browser doesn't support input type="date", load files for jQuery UI Date Picker
document.write('<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/dot-luv/jquery-ui.css " rel="stylesheet" type="text/css" />\n');
document.write('<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"><\/script>\n');
}
</script>
<script>
$(function(){
if (!Modernizr.inputtypes.date) { //if browser doesn't support input type="date", initialize date picker widget:
// If not native HTML5 support, fallback to jQuery datePicker
$('input[type=date]').datepicker({
// Consistent format with the HTML5 picker
dateFormat : 'dd-mm-yy'
},
// Localization
$.datepicker.regional['it']
);
}
});
</script>
Below are the html code
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<span class="input-group-addon">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</div>
</div>
What I want is when I click on the glyphicon icon/button, that the calendar also appear so that I can choose a date to input into the same field just like the input type=date.
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12">
<label for="inputDate">Date of Birth: </label>
<div class="input-group datetime">
<input type="date" id='datefield' name="date" placeholder="DD/MM/YYYY" class="form-control" required/>
<label class="input-group-addon" for="datefield">
<i class="glyphicon glyphicon-calendar"></i>
</label>
</div>
</div>
Change span containing glyphicon-calendar to label, add attribute for with the ID of parent datetimepicker (in this case ID is datefield), your glyphicon-calendar icon is now clickable and will open the date time picker.
Thanks #Washington Guedes for original answer
btw this solution won't work if you nest your date time picker in html table for some reason - thought this info might be useful... you have to use bootstrap.
I want to make my DateTimePicker format to be yyyy-mm-dd because it is the format that I've inserted in my database.
Here is the markup:
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
And here is the code I wrote to change the format, but it doesn't work:
$(document).ready(function() {
$(function () {
$('.datepicker').datetimepicker({
format: 'YYYY-MM-DD'
});
});
});
$('.datetimepicker').datetimepicker({
timepicker: false,
format: 'Y-m-d',
closeOnDateSelect: true,
scrollInput: false
});
The problem is your jQuery selector, you should use $('[data-provide="datepicker"]') instead of $('.datepicker') or add a datepicker class to your input.
Here a working example:
$('[data-provide="datepicker"]').datetimepicker({
format: 'YYYY-MM-DD'
});
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-sm-6">
<div class="input-group date" data-provide="datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
In your jQuery code, it uses a datepicker class but you are not using it correctly. You should use it like below
<div class="col-sm-6">
<div class="input-group date datepicker">
<input type="text" class="form-control" id="repdate" name="repdate" placeholder="Report date" required>
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
Anyway, you do not have to use the same format in your database as you can update the date on your backend code with the proper database format later.
I use bootstrap-datepicker and want to have a second addon with a checkbox.
I don't want trigger the show of datepicker when i click in the checkbox addon.
I tested the stopPropagation, return false on the onclick event of the second addon but it doesn't work :(
<div class="container">
<div class ="form-group">
<label class="col-sm-2 control-label" >Received Date</label>
<div class="col-sm-2 input-group date" data-date-format="mm-dd-yyyy" id="ARDT">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
<span class="input-group-addon test"><input type="checkbox"/></span>
</div>
</div>
</div>
with this javascript :
$(document).ready(function() {
$('#ARDT').datepicker();
$('.date .test').click(function(e){
e.stopPropagation();
});
});
you can view live on this jsfiddle : http://jsfiddle.net/5a5xzz10/4/
Can you help me ?
Thanks
Whiletrue
EDIT : Found a solution :
<div class ="form-group">
<label class="control-label" >Received Date OK</label>
<div class="input-group">
<div class="input-group date" data-date-format="mm-dd-yyyy" id="ARDT2">
<input class="text-input form-control" type="text" name="ARDT" maxlength="10" />
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
<span class="input-group-addon"><input type="checkbox"/></span>
</div>
</div>
embbed the input-group for the datepicker inside another and put the second input-group-addon just after
like here : http://jsfiddle.net/5a5xzz10/6
I have an answer but it doesn't seems very elegant.
I added the checkbox after started the datepicker generation.
$(document).ready(function() {
$('#ARDT').datepicker();
$("div.date").append($('<span class="input-group-addon test"><input type="checkbox"/></span>'));
});
I am using date and time picker that not used for getting current date and time instead that is to for user want to select some date and time so for...
This is my code for date and time picker.
<form class="form-horizontal" id="myForm">
<label for="from" class="col-sm-1 col-md-1 col-xs-3 control-label">From:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"> <i
class="fa fa-time"></i>
</span> <input type="text" name="from_time" id="from_time"
class="form-control" placeholder="" readonly="" />
</div>
</div>
<label for="to" class="col-sm-1 col-md-1 col-xs-3 control-label">To:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-time"></i> </span> <input type="text"
name="to_time" id="to_time" class="form-control" placeholder=""
readonly="">
</div>
</div>
<label for="date" class="col-sm-1 col-md-1 col-xs-3 control-label">Date:</label>
<div class="form-group ">
<div class="input-group">
<span class="input-group-addon"><i
class="fa fa-cal"></i> </span> <input type="text"
name="date" id="date" class="form-control" placeholder="" />
</div>
</div>
<input type="button" onclick="getresult()" value="Submit">
</form>
</div>
</div>
</div>
and my script code for date and time picker
<script type="text/javascript">
$(document).ready(function(){
$('#from_time').timepicker({showMeridian: false});
$('#to_time').timepicker({showMeridian: false});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#date').datepicker({ dateFormat: 'mm-dd-yy' }).datepicker("setDate", new Date());
});
</script>
and here is how i try to get that result of date and time from text box id
function getresult(){
var Date=$("date").val();
var From_Time=$("from_time").val();
var To_Time=$("to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
but this gives result like "undefined" "undefined"..in don't know what to do plzzz help me out from this
You have to use ID selector # sign to get value.
function getresult(){
var Date=$("#date").val();
var From_Time=$("#from_time").val();
var To_Time=$("#to_time").val();
alert(Date+" "+From_Time+" "+To_Time);
}
Manual