I gone to many of the questions already asked in stackoverflow related to my problem, but i still i can't find any solution. I am trying to get the value from datpicker in my javascript function, but not able to change its format. By default its showing in mm/dd/yy format and i want in yyyy-mm-dd format. Can anyone please help.
Below is my html code :
<html xmlns:h="http://xmlns.jcp.org/jsf/html">
<h:head>
<script>
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
$.datepicker.formatDate( 'yy-mm-dd' ,date );
alert(date); }
</script>
</h:head>
<body>
<input type="text" id="fromdate" class="form-control dpd1" name="from"placeholder="Select From Date"></input>
<span class="input-group-addon">To</span>
<input type="text" id="todate" class="form-control dpd2" name="to" placeholder="Select To Date" ></input>
<input type="button" onclick="getdate()" value="Change Date"></input>
</body>
</html>
Thanks in advance.
<script>
$(document).ready(function(){
$('#datepicker').datepicker({ dateFormat: 'yy-mm-dd' });
});
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
alert(date);
}
</script>
The format of dates can be a combination of any of the following characters:
d – day of month (single digit where applicable)
dd – day of month (two digits)
m – month of year (single digit where applicable)
mm – month of year (two digits)
y – year (two digits)
yy – year (four digits)
D – short day name
DD – full day name
M – short month name
MM – long month name
'...' – any literal text string
# - UNIX timestamp (milliseconds since 01/01/1970)
function getdate()
{
alert("Entered function");
var date = $('#fromdate').val();
date = $.datepicker.formatDate( 'yy-mm-dd', date );
alert(date);
}
You need to assign the result of the formatDate call to your date object. Then you can alert it.
HTML
<input type="text" id="fromdate" class="datepicker form-control dpd1" name="from" placeholder="Select From Date"></input> <span class="input-group-addon">To</span>
<input type="text" id="todate" class="datepicker form-control dpd2" name="to" placeholder="Select To Date"></input>
<input type="button" class="getdate" value="Change Date"></input>
JavaScript
//Define fields with class name 'datepicker' as jQueryUI datepicker
$('.datepicker').datepicker({
dateFormat: 'yy-mm-dd' //Setting dateformat for the datepicker
});
//Binding 'onclick' function for the button with class name 'getdate'
$('.getdate').on('click', function () {
var date = $('#fromdate').val();
alert(date);
});
JSFiddle
Its works for me
<input type="text" id="fromdate" class="form-control dpd1" name="from"placeholder="Select From Date"></input>
$('#fromdate').datepicker({
format: 'yyyy/mm/dd'
});
Related
I have a date that comes from a Bootstrap DateTimePicker $('#datetimepicker').find("input").val() that has the format "mm/dd/yyyy".
<div class='input-group date' id='datetimepicker'>
<form autocomplete="off" onkeydown="return event.key != 'Enter';">
<input type='text' autofill="off" readonly class="form-control" />
</form>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
I'm trying to get the UTC date and time for the selected date, at midnight, using Moment js:
moment.utc($('#datetimepicker').find("input").val()).tz(timezone).format('YYYY-MM-DD HH:mm:ss')
For example, starting date from the picker is 01/21/2022 and the timezone is America/Phoenix which is UTC-7.
I should have 2022-01-21 07:00:00 but my code returns 2022-01-20 17:00:00.
What am I doing wrong? Is there a way to get the UTC time for a day at 00:00 time, just by knowing the timezone?
You have to create the timestamp in your local timezone first, and then convert it to UTC. You are doing it the other way around. Ie if I split up your code snippet, you are doing the following
let thedate = $('#datetimepicker').find("input").val();
let utcdate = moment.utc(thedate);
let localdate = utcdate.tz(timezone);
Thus, the timezone offset is, of course, added in the wrong direction ...
Try the following
function getTime() {
let thedate = $('#thedate').val();
console.log(thedate)
// create a timestamp in the respective timezone
let localdate = moment.tz(thedate, "America/Phoenix");
// convert it to utc
let utcdate = localdate.utc();
// format the timestamp
console.log(utcdate.format("YYYY-MM-DD HH:mm:ss"));
}
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="thedate" type="date">
<input type="button" onClick="getTime()" value="Get Time">
I use the bootstrap date picker and I use two textboxes to search by date from-to, want to the second textbox give me the days after the days in the first textbox,
any help, please.
HTML :
<form action="{{url('search/ticket')}}" method="get">
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerfrom form-control" name="remember" placeholder="Search From" id="txtStartDate" required>
</div>
<div class="col-md-6 col-sm-4">
<input type="text" class="timepickerto form-control" name="remember" placeholder="Search To" id="txtEndDate" required>
<button type="submit" class="basic-button">Submit</button>
</div>
</form>
javascript :
<script type="text/javascript">
$(document).ready(function () {
$('.timepickerfrom').datetimepicker({
format: 'YYYY-MM-DD',
});
$('.timepickerto').datetimepicker({
format: 'YYYY-MM-DD',
});
});
</script>
You have to use the change event on the input itself if you want to respond to manual input, because the changeDate event is only for when the date is changed using the datepicker.
Try this code:
$(document).ready(function () {
$('.timepickerfrom').datepicker({
format: 'yyyy-mm-dd',
}).on('changeDate', function(selected){
var minDate = new Date(selected.date.valueOf());
$('.timepickerto').datepicker('setStartDate', minDate);
});
$('.timepickerto').datepicker({
format: 'yyyy-mm-dd',
});
});
I found the solution if anyone wants help.
It's called the linked datepicker
https://eonasdan.github.io/bootstrap-datetimepicker/#linked-pickers
I have a scenario where I use Bootstrap Datetimepicker to select time, but when I manually type the time, even in correct format, it changes to 12:00 AM on date picker close
Here is my datetimepicker:
$('#ShiftStart').datetimepicker({
minDate: actualDate,
maxDate: maxDate,
useCurrent: false,
format: 'hh:mm A',
defaultDate:moment(startTime),
stepping: 15
});
$('#ShiftEnd').datetimepicker({
minDate: actualDate,
maxDate: maxDate,
format: 'hh:mm A',
defaultDate:moment(startTime),
stepping: 15
});
Even if I bind an onfocusout event to set the value of the datetimepicker it doesn't change when the picker closed.
$("#ShiftStart").focusout(function (e) {
//here it is defaulted again to 12:00 AM
var time = $('#' + e.target.id).val();
$('#' + e.target.id).attr('data-time', actualDate + ' ' + time);
$('#' + e.target.id).attr('value', actualDate + ' ' + time);
$('#' + e.target.id).val(time)
});
Any work around on this.
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
.datetimepicker({
minDate: actualDate,
maxDate: maxDate,
useCurrent: false,
format: 'hh:mm A',
defaultDate: moment("12/27/2017"),
stepping: 15
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment#2.19.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" value="12/27/2017 12:00 AM" data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
The datetimepicker defaults back to 12:00 AM even if you select the value from the picker (not only manually type), I think this is a bug of the the lastest versions of the component.
Anyway, there are a couple of things to fix in your code. As the date([newDate]) states :
Takes string, Date, moment, null parameter and sets the components model current moment to it. [...]
Parsing of the newDate parameter is made using moment library with the options.format and options.useStrict components configuration.
So minDate, maxDate and defaultDate are strings parsed using format option (hh:mm A in your case) and this will produce wrong values, use moment(String, String) instead (e.g. defaultDate: moment("12/27/2017", 'MM/DD/YYYY')).
Even the value property in the HTML is parsed using format, 12/27/2017 12:00 AM does not match hh:mm A so I've removed it in my snippet.
Here a working example using version 4.17.37 of the datetimepicker:
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
var startTime = $('#StartTime').val();
$('#ShiftStart')
.datetimepicker({
minDate: moment(actualDate, 'MM/DD/YYYY'),
maxDate: moment(maxDate, 'MM/DD/YYYY'),
useCurrent: false,
format: 'hh:mm A',
defaultDate: moment("12/27/2017", 'MM/DD/YYYY'),
stepping: 15
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment-with-locales.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input id="StartTime" type="hidden" value="12/27/2017 8:00:00 AM">
<div class="row">
<div class='col-sm-6'>
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" data-time="12/27/2017 12:00 AM" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
</div>
</div>
Side thoughts:
Since you are using hh:mm A format, you can probably just manage time and get rid of minDate and maxDate (in your example you are limiting to a single given day)
If you want to do something when the components hides use dp.hide event.
I think this is happening because minDate is reseting the field value to the current date at midnight (probably the default time), and similarly maxdate probably also sets it to midnight by default.
Remove minDate: actualDate and maxDate: maxDate from the initialisation:
<input id="ActualDate" type="hidden" value="12/27/2017">
<input id="MaxDate" type="hidden" value="12/28/2017">
<input class="form-control timepicker valid" data-val="true" data-val-genericcompare="Start time must be earlier than end time" data-val-genericcompare-comparetopropertyname="ShiftEnd" data-val-genericcompare-operatorname="LessThan" data-val-required="The Start Time field is required."
id="ShiftStart" name="ShiftStart" style="max-width : none; border : 1px solid #cccccc;" type="text" aria-required="true" aria-describedby="ShiftStart-error" aria-invalid="false">
<script>
var actualDate = $('#ActualDate').val();
var maxDate = $('#MaxDate').val();
$('#ShiftStart').datetimepicker({
useCurrent: false,
format: 'hh:mm A',
});
</script>
In reply to your comment, you can pass in the maxDate parameter like this:
maxDate: new Date('2017', '12', '27', '03', '30', '00', '00')
Which i guess you will need to build from the maxDate string. Note that to get this working I had to remove the defaultDate parameter from the snippet in your question.
I have a datepicker that has all past days disabled, and all days except Tuesdays and Wednesdays disabled.
I'd like the default day to be the frist enabled day of the week. If it's tuesday, then it should display tuesday, If wednesday, then wednesday. Any other day it should display next tuesday in the input field.
This is the code I'm using for the datepicker.
<script type="text/javascript">
$(document).ready(function(){
$( ".datepicker" ).datepicker({
minDate:'0',
changeMonth:true,
changeYear:true,
beforeShowDay:
function(dt)
{
return [dt.getDay() === 2 || dt.getDay() === 3, ""];
}});
});
</script>
And the input that I'm using the selector on:
<form method="POST">
<div style='margin:0 auto; text-align:center;'>
<label>Appointment Date: </label>
<input type="hidden" name="action" value="list_appointments" />
<input type="text" id="datepicker" name="date" class="datepicker" />
<!--value=--><?php #echo date_format(new DateTime("now",new DateTimeZone('America/Chicago')),'m/d/Y');?>
<input type="submit" value="Refresh List" name="Update" />
<br />
</div>
</form>
You can use momentjs to make getting the next day of the week a little easier and then just have a if-else statement to get the correct day of the week:
function setDate() {
var today = moment().isoWeekday(); //or just = new Date().getDay();
if (today <= 2) {
return moment().isoWeekday(2);
} else if (today === 3) {
return moment().isoWeekday(3);
} else {
return moment().add(1, 'weeks').isoWeekday(2);
}
}
Call the setDate() function then and set that return value as the date in the datepicker.
$('.datepicker').datepicker("setDate", new Date(setDate()));
Here's a working example: https://jsfiddle.net/jutcw0ve/
I have a datepicker from the internet on my system and I want to restrict a user choice so they are only allowed to pick from today on wards. Below shows my javascript and the HTML form the datepicker is held in is held in.
I tried using minDate : '0' as well as the one that is in the function now.
Any help appreciated.
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy', minDate: +0 });
});
</script>
<div class="form-group">
<label class="col-sm-2 control-label">Start Date:</label>
<div class="col-sm-10">
<input class="form-control" type="date" id="datepicker" name="start_date" required="required">
</div>
</div>
<input type="date" min="2000-01-02">
date input type has an min and max attribute to restrict the date selection.
Here you can get today's date in JavaScript and set that value to your date input type. I just gave an example in above code snippet.
Try this:
var datePicker = $('#datepicker').datepicker({
beforeShowDay: function (date) {
return date.valueOf() >= now.valueOf();
}
});
Please try something like this,
$('#datepicker').datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0
});
demo in jsfiddle