Change the date format to yyyy-mm-dd in Datepicker - javascript

I am using Datepicker for my HTML field .
The HTML code is :
<input type="text" id="from-datepicker"/>
The Jquery code to set and get the date picker fields is :
$("#from-datepicker").datepicker({ dateFormat: 'yy-mm-dd'});
$("#from-datepicker").on("change", function () {
var fromdate = $(this).val();
alert(fromdate);
});
This code, however, displays the field in 'mm-dd-yyyy' format.
Can someone tell me where am I going wrong ?
My imported CDNs are :
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
Thanks in advance.

Yes, change dateFormat to just format and you need 4 sets of 'y's
Sample code:
<script src="https://code.jquery.com/jquery-2.2.3.min.js" integrity="sha256-a23g1Nt4dtEYOj7bR+vTu7+T8VP13humZFBJNIYoEJo=" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.0/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.1/css/bootstrap-datepicker3.min.css">
<script>
$( document ).ready(function() {
$("#from-datepicker").datepicker({
format: 'yyyy-mm-dd'
});
$("#from-datepicker").on("change", function () {
var fromdate = $(this).val();
alert(fromdate);
});
});
</script>
<input type="text" id="from-datepicker"/>

See the format option: http://bootstrap-datepicker.readthedocs.io/en/latest/options.html#format
toDisplay: function (date, format, language) to convert date object to string, that will be stored in input field
toValue: function (date, format, language) to convert string object to date, that will be used in date selection

UPDATE 2018
As of bootstrap-datepicker version 1.6.4, setting data-date-format attribute to 'yyyy-mm-dd' on an input element works as well.
For e.g.
<input data-provide="datepicker" name="date_selected" data-date-format="yyyy-mm-dd" placeholder="Select date" required>

The option is format
You can set a default value for all your app:
$.fn.datepicker.defaults.format = 'yy-mm-dd';
Or:
$("#from-datepicker").datepicker({format: 'yy-mm-dd'});

Related

Pick date in jquery calendar with cypress

I have the following code snippet of jquery calendar plugin used in my app and the cypress code snipped to select the date 1990-10-11.
$(function() {
$("#datepicker").datepicker({
changeMonth: true,
changeYear: true,
dateFormat:"yy-mm-dd"
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>
cy.get("#datepicker").click();
cy.get(".ui-datepicker-month").select("10");
cy.get(".ui-datepicker-year").select("1990");
cy.get("table.ui-datepicker-calendar").then(() => {
cy.contains('11').click();
});
With the code I can change the year and month but cannot select the day.
How can I set the date to 1990-10-11 via cypress.
Try like below to click on date 11.
cy.get("a.ui-state-default:contains(11)").click();
#Karan's answer looks good, but I would be more specific in the select (since ui-state-default looks a little too generic).
cy.get('[data-handler="selectDay"] a:contains("11")').click()

How to set multiple date in the calendar with mvvm?

How to set multiple date in the calendar with mvvm.
I have my calendar :
<div id="calendar1" data-role="calendar"
data-bind="value: Cvalue,
dates: Csource,
events:{change: ConChange}">
</div>
JS, view model:
Cvalue:null,
Csource:[],
Conchange:function(){
}
Csource contains:
[
{"nome":"1"},{"data":"21/112017"},
{"nome":"2"},{"data":"22/112017"},
{"nome":"3"},{"data":"26/112017"},
{"nome":"4"},{"data":"28/112017"},
{"nome":"5"},{"data":"29/112017"}
]
Cain i see this dates with different color in the calendar?
and at onChange of day, i'd like to print the name of date;
something like this attached image:
A plugin called multiDatesPicker will meet your requirement
$('#mdp-demo').multiDatesPicker();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.css" rel="stylesheet"/>
<link href="https://code.jquery.com/ui/1.12.1/themes/pepper-grinder/jquery-ui.css" rel="stylesheet"/>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.rawgit.com/dubrox/Multiple-Dates-Picker-for-jQuery-UI/master/jquery-ui.multidatespicker.js"></script>
<input id="mdp-demo">

Load date to input field after selecting from Bootstrap datetimepicker

What I am trying to do is, after selecting a date on Bootstrap Datetimepicker, it should load a value on my input field, but I don't know how to do that. There's my JSFiddle.
This is my jQuery for datetimepicker
$(function () {
$('.datetimepickerinline').datetimepicker({inline: true});
});
I need to use it for all inputs, or in other words, closest input field.
You called so many unwanted libraries. Just try this bootstrap datepicker. Hope this work for you.
$(document).ready(function(){
$('#datepicker').datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
todayHighlight: true,
forceParse: false,
});
});
demo
Here is solution you want: jsfiddle
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val($(this).data('date'));
});
See reference here
Further more, I noticed that you want use moment.js
You can use something like this, using custom format:
$('.datetimepickerinline').on('change dp.change', function(e){
$('input').val(moment($(this).data('date')).format('DD/MM/YYYY, h:mm'));
});
You need to apply class 'datetimepickerinline' on your input field.
<input id="" placeholder="press to show calendar" class="input datetimepickerinline">
Try this fiddle : - https://jsfiddle.net/ekm0on2a/11/
you need to add datepicker class in your input field.
<link rel="stylesheet" type="text/css" media="screen" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/build/css/bootstrap-datetimepicker.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>
<div id="container">
<div class="my-example">
<input id="datepicker" placeholder="press to show calendar" class="input input-datepicker">
<div class="dropdown">
<div class="datetimepickerinline">
</div>
</div>
</div>
</div>
//script
$(function () {
$('#datepicker').datetimepicker({inline: true});
});

Removing the colon from 24 hrs format time in jquery datepicker

I need to resolve an issue that has been bugging my bug list for a while but can't find anything solid in Google. All I want is to remove the colon from the time so I can display it in REAL military time.
So, this is wrong --> 13:25 hrs
This is right --> 1325 hrs
I am using Jquery Date Picker form the Jquery UI library and datetimepicker-addon.js from here
HTML
<div class="container">
<input type="text" name="my_date" id="my_date" value="" />
</div>
JS
$(function(){
$("#my_date").datetimepicker({
timeFormat: "HH:mm 'hrs'",
showButtonPanel: false
});
});
Here is a handy dandy CODEPEN
I appreciate the help
In the timeFormat of the datetimepicker remove the colon
$(function(){
// when the document has loaded
// attach the datetimepicker
$("#my_date").datetimepicker({
timeFormat: "HHmm 'hrs'",
showButtonPanel: false
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-sliderAccess.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.js'></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<div class="container">
<input type="text" name="my_date" id="my_date" value="" />
</div>

how i can change year in buddist year in moment,js

I am using bootstrap datetimepicker. Its need moment.js.
To make it local I have use this moment with locale
I need my year should be Buddhist year-2016 means 2559(2016+543). How can I achieve this using moment.
My html is :
$('#startDate').datetimepicker({
format: 'DD-MM-YYYY',
locale: 'th',
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="http://momentjs.com/downloads/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<div class="col-md-6 date">
<input type='text' class="form-control" id='startDate' />
</div>
I need this:

Categories