这是indexloc提供的服务，不要输入任何密码
Skip to content

Add an option to reformat the date value on submit #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed

Add an option to reformat the date value on submit #18

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
0b5e79f
Add "format_submit" setting and default.
peterjmag Nov 21, 2012
5629389
Add option to disable submit reformatting.
peterjmag Nov 21, 2012
a2400bf
Add submitted format section to the docs.
peterjmag Nov 21, 2012
c1beb39
Tweak whitespace for consistency.
peterjmag Nov 21, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions demo.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ input.datepicker--input__focused {
border-color: #0089ec;
}

input[type=submit] {
margin-top: 1em;
padding: 8px 20px;
}



Expand Down
39 changes: 33 additions & 6 deletions docs.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,12 @@ <h3>All the options and default settings:</h3>
show_months_full: true,
show_weekdays_short: true,

<a href="#formats">// Date format</a>
<a href="#formats">// Displayed date format</a>
format: 'd mmmm, yyyy',

<a href="#submitted-formats">// Submitted date format</a>
format_submit: 'yyyy-mm-dd',

<a href="#disable">// Disable picker</a>
disable_picker: false,

Expand Down Expand Up @@ -182,12 +185,32 @@ <h3><strong class="underline-highlight">Custom date formats</strong></h3>

</section>

<section class="holder" id="submitted-formats">

<form method="get" accept-charset="utf-8">
<fieldset>
<h3><strong class="underline-highlight">Custom submitted date formats</strong></h3>
<input id="input_04" name="date" class="datepicker" type="text">
<input type="submit" value="Submit">
</fieldset>
</form>

<pre><code>$( '.datepicker' ).datepicker({
format_submit: 'dd-mm-yyyy'
})</code></pre>

<p>By default, the date picker will submit dates to the server in the format <code>yyyy-mm-dd</code> regardless of the format displayed to the user, as per <a href="http://dev.w3.org/html5/spec/forms.html#input-author-notes" title="4.10.1.5 Date, time, and number formats">the W3C's notes on date formats</a>.</p>

<p>You can override the submitted format by setting <code>format_submit</code> to a string, following the <a href="#formats">same format rules as above</a>. You can also disable on-submit reformatting entirely by setting <code>format_submit</code> to <code>false</code>. In this case, the value submitted to the server will match the displayed format.</p>

</section>


<section class="holder" id="disable">

<fieldset>
<h3><strong class="underline-highlight">Disable picker for native calendar</strong></h3>
<input id="input_04" class="datepicker" type="date">
<input id="input_05" class="datepicker" type="date">
</fieldset>

<pre><code>$( '.datepicker' ).datepicker({
Expand All @@ -205,7 +228,7 @@ <h3><strong class="underline-highlight">Disable picker for native calendar</stro

<fieldset>
<h3><strong class="underline-highlight">Minimum and maximum date range</strong></h3>
<input id="input_05" class="datepicker" type="text">
<input id="input_06" class="datepicker" type="text">
</fieldset>

<pre><code>$( '.datepicker' ).datepicker({
Expand Down Expand Up @@ -297,7 +320,7 @@ <h3><strong class="underline-highlight">Minimum and maximum date range</strong><
<fieldset class="datepicker-themed">
<h3><strong class="underline-highlight">Themed calendar</strong></h3>
<p>Go crazy.</p>
<input id="input_06" class="datepicker" type="text">
<input id="input_07" class="datepicker" type="text">
</fieldset>

<pre><code>.datepicker-themed {
Expand Down Expand Up @@ -386,15 +409,19 @@ <h3><strong class="underline-highlight">Themed calendar</strong></h3>
})

$( '#input_04' ).datepicker({
disable_picker: true
format_submit: 'dd-mm-yyyy'
})

$( '#input_05' ).datepicker({
disable_picker: true
})

$( '#input_06' ).datepicker({
date_min: false,
date_max: 5
})

$( '#input_06' ).datepicker()
$( '#input_07' ).datepicker()

</script>
<script type="text/javascript">
Expand Down
29 changes: 22 additions & 7 deletions pickadate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
/**
* TODO: month & year dropdown selectors
* TODO: add methods onSelectDate, onMonthChange, onOpenCalendar, onCloseCalendar
* TODO: alternate value sent to server
*/

/*jshint
Expand Down Expand Up @@ -573,6 +572,9 @@
render: function() {

var
// Get the element's parent form, if any
parentForm = P._element.form,

// Create a reference to this calendar object
calendarObject = this,

Expand Down Expand Up @@ -642,6 +644,15 @@
}).after( P.$holder )


// If format_submit is not false, bind a submit event
// to the element's parent form to format the element's
// value to format_submit before submitting
if (SETTINGS.format_submit) {
$(parentForm).on({
submit: function() { P._element.value = P.getDateFormatted( SETTINGS.format_submit ) }
})
}

// Create a random calendar object id
calendarObject.id = Math.floor( Math.random()*1e9 )

Expand Down Expand Up @@ -760,21 +771,22 @@
* Get selected date in the
* correct format
*/
getDateFormatted: function() {
getDateFormatted: function( format ) {

var formats = P.dateFormats

// Go through the date formats array
// and return the appropriate values.
// At the end, return the joined array
return formats.toArray().map( function( value ) {
return formats.toArray( format ).map( function( value ) {

// Check if the format exists and
// invoke the function to get the value
// or replace any leading "!" to escape
// the characters
return ( formats[ value ] ) ? formats[ value ]() : value.replace( /^!/, '' )
}).join( '' )

}, //getDateFormatted


Expand Down Expand Up @@ -900,7 +912,7 @@
if ( $dayTargeted ) {

// Set the element value as the formatted date
P._element.value = P.getDateFormatted()
P._element.value = P.getDateFormatted( SETTINGS.format )

// Close the calendar
P.calendar.close()
Expand Down Expand Up @@ -995,8 +1007,8 @@
yy: function() { return DATE_SELECTED.YEAR.toString().substr( 2,2 ) },
yyyy: function() { return DATE_SELECTED.YEAR },

// Create an array by splitting the format in the settings
toArray: function() { return SETTINGS.format.split( /(d{1,4}|m{1,4}|y{4}|yy|!.)/g ) }
// Create an array by splitting the format given in the argument
toArray: function( format ) { return format.split( /(d{1,4}|m{1,4}|y{4}|yy|!.)/g ) }
} //dateFormats


Expand Down Expand Up @@ -1033,9 +1045,12 @@
show_months_full: true,
show_weekdays_short: true,

// Date format
// Displayed date format
format: 'd mmmm, yyyy',

// Submitted date format
format_submit: 'yyyy-mm-dd',

// Disable for browsers with support
disable_picker: false,

Expand Down