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>
Related
I have a booking form that requires two dates, so I'm using the built in option that Bootstrap datepicker has (it consists on calling the datepicker function on the father element that contains the inputs), to show the daterange selected, this is my HTML:
<div class="grupo vip-fechas input-daterange">
<div class="barra verde"> <span>¿Cuándo llegas?</span></div>
<input type="text" class="input calendario" id="entrada_input" name="entrada_input" placeholder="Selecciona una fecha">
<input type="hidden" id="fecha_inicio" name="fecha_inicio">
<div class="barra verde"> <span>¿Cuándo te vas?</span></div>
<input type="text" class="input calendario" id="salida_input" name="salida_input" placeholder="Selecciona una fecha">
<input type="hidden" id="fecha_fin" name="fecha_fin">
</div>
This is my Javascript code:
$(document).ready(function(){
iniciarFechas();
});
function iniciarFechas(){
var date = new Date();
var today = new Date(date.getFullYear(), date.getMonth(), date.getDate());
var date_hidden;
$('.vip-fechas.input-daterange').datepicker({
weekStart: 1,
maxViewMode: 1,
language: "es",
startDate: today,
disableTouchKeyboard: true,
format: {
toDisplay: function(date, format, language) {
var fecha = moment(date).add(1,"day");
date_hidden = fecha;
return fecha.format("dddd DD [de] MMMM, YYYY");
},
toValue: function(date, format, language) {
var fecha = moment(date).add(1,"day");
return moment(fecha).format("DD/MM/YY");
//return moment(date, ["DD.MM.YYYY", "DDMMYYYY"]).toDate();
}
},
}).on("changeDate", function(e){
var fecha_formateada = moment(date_hidden).format("DD/MM/YY");
$(this).next().val(fecha_formateada);
});
}
The daterange works correctly but I want to store the formatted date inside the hidden inputs, as you can see, the format that I want is this: ...format("DD/MM/YY"); but what I get is the display format: format("dddd DD [de] MMMM, YYYY"), also I noticed that $(this) value within this line: $(this).next().val(fecha_formateada); refers to the container div, and not the input that has changed value, so how can I save the date as I want inside the hidden inputs?
I'm not sure what your problem is but by looking at your code I can only guess that you might be in the middle of a race condition.
You're setting the date_hidden variable in Datepicker.toDisplay and then reading from it in the changeDate custom event.
Put a debugger or a console log in both callbacks to make sure you're not in the middle of a race condition.
As for setting the formatted value in the input fields, well I can see in your HTML code that you have selectors that you can use, like the hidden field's ID for example.
Another thing I'd suggest is, instead of setting and reading the date_hidden field in those different callbacks, just call $('#elementID').datepicker('getDate') in the changeDate event handler and do all the transformations you need there, then extract that code and put it in a separate function.
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
I use the jQuery Datetimepicker plugin from XDSoft: http://xdsoft.net/jqplugins/datetimepicker/
I have the calender displayed inline. Here comes my code:
HTML:
<input type="text" id="start_date">
JS:
jQuery('#start_date').datetimepicker({
format:'d.m.Y H:i',
inline:true
});
My problem: When I pick a date in the frontend, the input field does not get the selected date as a value. What changes do I need to make or what do I need to add?
Get value from Onchange Event
Try this
onChangeDateTime:function(dp,$input){
$('#datePickValue').text($input.val());
}
Full Code look like this
jQuery('#start_date').datetimepicker({
format:'d.m.Y H:i',
inline:true,
onChangeDateTime:function(dp,$input){
$('#start_date').text($input.val()); // change the div as per your need - change the text as val ( it depends on the field)
});
Use the date time picker event.
HTML
<input type="hidden" id="start_date">
JS
var $startDate = $('#start_date');
$startDate.datetimepicker({
inline:true,
sideBySide: true
});
$startDate.on('dp.change', function() {
var selectedDate = $(this).val();
alert(selectedDate);
});
JS Fiddle Demo
$('#start_date').datetimepicker({
format:"d/m/Y H:i:s",
inline:true,
step:5,
onChangeDateTime: function (ct,$i) {
$('#start_date').val(ct.dateFormat('d/m/Y H:i'));
}
});
Try this..It works for me , so it should work for u too..Happy coding..
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