i am trying to combine bootstrap datepicker along with some text.Say for example
hello 12/12/2013
In the jsfiddle Suppose if i write hello and then choose a date then the word hello is replaced by the date.
this is the jsfiddle showing bootstrap datepicker,Please tell me how to append some text along with datepicker.Following is the jquery code to get the datepicker.i am referring this site for bootstrap datepicker
$('#datetimepicker').datetimepicker({
format: 'dd/MM/yyyy hh:mm:ss',
language: 'pt-BR'
});
Simply, if you want the same text for any date chosen:
$('#datetimepicker').datetimepicker({
format: 'hello dd/MM/yyyy hh:mm:ss',
language: 'pt-BR'
});
And, if like in your example, you dont want the time:
$('#datetimepicker').datetimepicker({
format: 'hello dd/MM/yyyy',
language: 'pt-BR'
});
See this jsfiddle.
You can do something like this..
var val=" ";
$(function() {
$("#datetimepicker").datetimepicker({
format: "yyyy-MM-dd",
linkField: "#txt",
linkFormat: "yyyy-mm-dd",
autoclose: true,
});
jQuery('#datetimepicker').datetimepicker().on('changeDate', function(ev){
var chk=$(".darea1").val();
chk=chk.replace(val, " ");;
$(".darea1").val(chk);
$(".darea1").val($( ".darea1" ).val()+$( "#txt" ).val());
val=$( "#txt" ).val();
});
});
check this fiddle
Related
I am trying to define a date input field with two alt date display fields where they all have distinct date formats. In the example below, if my date input is 013017 then I want my alt date display fields to show
Display 1: 2017-01-30
Display 2: 01-30-17
But instead I'm getting
Display 1: 2017-01-30, 01-30-17
Display 2: 2017-01-30, 01-30-17
Here is my markup:
<p>Date Input: <input type="text" id="datepicker1"> </p>
<p>Display 1: <input type="text" id="alternate1" size="30"> </p>
<p>Display 2: <input type="text" id="alternate2" size="30"> </p>
Here is my js:
$( function() {
$( "#datepicker1" ).datepicker({
dateFormat: "mmddy",
altField: "#alternate1, #alternate2",
altFormat: "yy-mm-dd, mm-dd-y"
});
});
here is a jsfiddle: https://jsfiddle.net/5rqtj056/
The altFormat property accepts one format date, to be used for representing elements retrieved by the altField selector.
This a snippet from jQuery UI official documentation
altFormat
Type: String
Default: ""
The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function
In order to do that, you need to bind an event on the #alternate1 for example and filling that one, you will convert the date and then fill the #alternate2
Here your new JS code:
$( function() {
$( "#datepicker1" ).datepicker({
dateFormat: "mmddy",
altField: "#alternate1",
altFormat: "yy-mm-dd",
onSelect: function(dateText) {
$('#alternate1').trigger("change");
}
});
$("#alternate1").change(elaborateDate);
$("#datepicker1").keyup(elaborateDate);
function elaborateDate() {
var alt1Date = $('#alternate1').val();
var newDate = $.datepicker.formatDate( "mm-dd-y", new Date(alt1Date) );
$('#alternate2').val(alt1Date);
}
});
https://jsfiddle.net/5rqtj056/8/
I'm trying to figure out how I can get the date the user has selected on the datepicker. I've tried many things mentionned on this site, but it doesn't seem to work. Here's my code:
// script for the date picker inline
$('#calendar1 div').datepicker({
keyboardNavigation: false,
todayHighlight: true
$("#calendar1 div").click(
var date = $("#calendar1 div").datepicker("getDate");
});
});
// script for the datepicker text input
$('#calendar2 .input-group.date').datepicker({
keyboardNavigation: false,
todayHighlight: true
$("#calendar2 .input-group.date").click(
var date = $("#calendar2 .input-group.date").datepicker("getDate");
});
});
The datepickers appear fine when I don't run the .click(...), so I believe the problem is there.
Thanks
You have your closing braces in the wrong place, and your handlers need to be functions, like this:
// script for the date picker inline
$('#calendar1 div').datepicker({
keyboardNavigation: false,
todayHighlight: true
});
$("#calendar1 div").click(function() {
// this is the selected element
var date = $(this).datepicker("getDate");
});
// script for the datepicker text input
$('#calendar2 .input-group.date').datepicker({
keyboardNavigation: false,
todayHighlight: true
});
$("#calendar2 .input-group.date").click(function() {
// this is the selected element
var date = $(this).datepicker("getDate");
});
I had my markup like below for start and end date:
<div class="input-daterange dateselector"
id="publishedDateSelector">
<input type="text" class="input-small form-control" /><input
type="text" class="input-small form-control" />
</div>
The following code initializing the datepicker:
$('.dateselector').datepicker({
clearBtn : true,
orientation : "top",
todayHighlight : true
});
When I tried to get the date by '#publishedDateSelector').datepicker('getDate'), it used to return a jQuery object which was not a date representation. The way I got the dates are by:
'#publishedDateSelector input:first').datepicker('getDate'); //StartDate
'#publishedDateSelector input:last').datepicker('getDate'); //EndDate
Can someone explain how to capture the selected date from the inline/embedded version of Eternicode's extended Bootstrape Datepicker - http://eternicode.github.io/bootstrap-datepicker/
<form class="form-date" role="form" action="/'.$ref.'/edit" method="get">
<div class="form-group" id="datepickid">
<div></div>
<input type="hidden" name="dt_due" id="dt_due">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
...
$('#datepickid div').datepicker({
startDate: "+1d",
todayHighlight: true
});
As I'm sure is clear, I want it to write to the hidden input when the date selected changes.
I'm sure i'm missing something obvious, but the other examples write to the input it is linked too, but there seems to be no obvious way the data is output from the inline version.
All help appreciated.
Nevermind, the answer was given via a Google Group.
I had to add .on(ChangeDate)...
$('#datepickid div').datepicker({
startDate: "+1d",
todayHighlight: true
}).on('changeDate', function(e){
$('#dt_due').val(e.format('dd/mm/yyyy'))
});
You can also use this to get all dates (for multidate)
$('#datepickid div').datepicker({
startDate: "+1d",
todayHighlight: true
}).on('changeDate', function(e){
$('#dt_due').val(
$('#datepickid div').datepicker('getFormattedDate') // get the formatted date from the datepicker (using the format you instantiated it with)
);
});
Recently I am working in a project that needs to implement some pages using datepicker for more user usability, more specific Bootstrap 3 DatePicker, particulary I think is the best framework I ever found on the internet.
While I was developing, I found the same problem you describe, but how I don't know what specific framework you are using, I am describing my solution and my code.
Initially, the framework in question is the Bootstrap 3 Datepicker.
This answer may not be useful to some users using another frameworks, different from this.
My HTML code:
<div class="form-group form-group-md" align="left">
<label for="inputDataInicial" class="col-form-label">Data Inicial:</label>
<div class="inputDataInicial" name="inputDataInicial" id="inputDataInicial"></div>
</div>
To initialize the datepicker:
$("#inputDataInicial").datetimepicker({
format: 'DD/MM/YYYY',
locale: 'pt-br',
useCurrent: true,
inline: true,
sideBySide: true
}).on('dp.change', function(e){
$('.inputDataInicial').val(e.date.format('YYYYMMDD'));
});
Next, I set the default date using the moment framework - Bootstrap 3 Datepicker uses it:
var currentDate = moment().format('YYYYMMDD');
$('.inputDataInicial').val(currentDate);
$('.inputDataFinal').val(currentDate);
Finally, I implemented a simple button to get the selected date:
$(".btn_relatorio_amap_gerar").unbind("click").on("click",function(e) {
var data_inicial = $(".inputDataInicial").val() + ' 00:00:00';
var data_final = $(".inputDataFinal").val() + ' 23:59:59';
alert(data_inicial + ' - ' + data_final);
});
The result:
I hope that helps you.
this works for me & is simplest way
$('#datetimepicker').datepicker({
format: 'mm/dd/yyyy',
startDate: 'now',
useCurrent: true,
todayBtn: "linked",
todayHighlight: true,
inline: true,
sideBySide: true
});
<div id="datetimepicker">
<input type="hidden" name="delivery_date" id="delivery_date" value="">
</div>
I want to set default time in this datetimepicker as 00:01 for the current date. Anyone tried that before? Having a tough time with it. It Seems simple.
$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm'
});
I need to use setDate, but I'm not sure how. I checked their code, but did not find a parameter for that.
None of the above worked for me, however I had success setting the default at time of instantiation.
JQuery
<script type="text/javascript">
$(function () {
var dateNow = new Date();
$('#datetimepicker').datetimepicker({
defaultDate:dateNow
});
});
</script>
Set a default input value as per this GitHub issue.
HTML
<input type="text" id="datetimepicker-input"></input>
jQuery
var d = new Date();
var month = d.getMonth()+1;
var day = d.getDate();
var output = d.getFullYear() + '/' +
(month<10 ? '0' : '') + month + '/' +
(day<10 ? '0' : '') + day;
$("#datetimepicker-input").val(output + " 00:01:00");
jsFiddle
JavaScript date source
EDIT - setLocalDate/setDate
var d = new Date();
var month = d.getMonth();
var day = d.getDate();
var year = d.getFullYear();
$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm'
});
$("#startdatetime-from").data('DateTimePicker').setLocalDate(new Date(year, month, day, 00, 01));
jsFiddle
For use datetime from input value, just set option useCurrent to false, and set in value the date
$('#datetimepicker1').datetimepicker({
useCurrent: false,
format: 'DD.MM.YYYY H:mm'
});
i tried to set default time for a picker and it worked:
$('#date2').datetimepicker({
format: 'DD-MM-YYYY 12:00:00'
});
this will save in database as : 2015-03-01 12:00:00
used for smalldatetime type in sql server
It works for me:
<script type="text/javascript">
$(function () {
var dateNow = new Date();
$('#calendario').datetimepicker({
locale: 'es',
format: 'DD/MM/YYYY',
defaultDate:moment(dateNow).hours(0).minutes(0).seconds(0).milliseconds(0)
});
});
</script>
use this after initialisation
$('.form_datetime').datetimepicker('update', new Date());
Hello developers,
Please try this code
var default_date= new Date(); // or your date
$('#datetimepicker').datetimepicker({
format: 'DD/MM/YYYY HH:mm', // format you want to show on datetimepicker
useCurrent:false, // default this is set to true
defaultDate: default_date
});
if you want to set default date then please set useCurrent to false otherwise setDate or defaultDate like methods will not work.
This Works for me. I have to use specially date format like this 'YY-MM-dd hh:mm' or 'YYYY-MM-dd hh:mm'
$('#datetimepicker1').datetimepicker({
format: 'YYYY-MM-dd hh:mm',
defaultDate: new Date()
});
This is my solution for your problem :
$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm'
}).on('dp.change', function (e) {
var specifiedDate = new Date(e.date);
if (specifiedDate.getMinutes() == 0)
{
specifiedDate.setMinutes(1);
$(this).data('DateTimePicker').date(specifiedDate);
}
});
This also work for setting a default hour or both.
Note that this code sample works with the useCurrent: false parameter too.
When the user pick a date, we check if the minute is 0 (hard-coded default value). In this case, we set a 1. Then, the user cannot select 0.
I solved my problem like this
$('#startdatetime-from').datetimepicker({
language: 'en',
format: 'yyyy-MM-dd hh:mm',
defaultDate:new Date()
});
Momentjs.com has good documentation on how to manipulate the date/time in relation to the current moment. Since Momentjs is required for the Datetimepicker, might as well use it.
var startDefault = moment().startof('day').add(1, 'minutes');
$('#startdatetime-from').datetimepicker({
defaultDate: startDefault,
language: 'en',
format: 'yyyy-MM-dd hh:mm'
});
By using Moment.js, i able to set the default time
var defaultStartTime = moment(new Date());
var _startTimeStr = "02:00 PM"
if (moment(_startTimeStr, 'HH:mm a').isValid()) {
var hr = moment(_startTimeStr, 'HH:mm a').hour();
var min = moment(_startTimeStr, 'HH:mm a').minutes();
defaultStartTime = defaultStartTime.hours(hr).minutes(min);
}
$('#StartTime').datetimepicker({
pickDate: false,
defaultDate: defaultStartTime
});
This works for me after a long hours of search , This solution is for Bootstrap datetimepicker version 4. when you have to set the default date in input field.
HTML
"input type='text' class="form-control" id='datetimepicker5' placeholder="Select to date" value='<?php echo $myDate?>'// $myDate is having value '2016-02-23' "
Note- If You are coding in php then you can set the value of the input datefield using php, but datetimepicker sets it back to current date when you apply datetimepicker() function to it. So in order to prevent it, use the given JS code
JAVASCRIPT
<script>
$('#datetimepicker5').datetimepicker({
useCurrent: false //this is important as the functions sets the default date value to the current value
,format: 'YYYY-MM-DD'
});
</script>
Hi i using this code to show a expiration date based on the select.
<script>
$(function(){
$("#date_picker").datepicker();
$("#Plano_Id").change(function() {
var offset = +$(this).find("option:selected").attr("title"), /* get days to add on date*/
theDate = new Date();
theDate.setDate(theDate.getDate() + offset);
$("#date_picker").datepicker("setDate", theDate);
});
});
</script>
But this returns the date in this format mm/dd/yyyy. I'm trying to show dd/mm/yyyy
For setting the format for a specific date control
$('#datepicker').datepicker({ dateFormat: 'dd/mm/yyyy' });
For setting it throughout your site/page, use
$.datepicker.setDefaults({ dateFormat: 'dd/mm/yyyy' });
//Note:Call this before initializing any date pickers
Use the dateFormat option: http://jqueryui.com/demos/datepicker/#date-formats